diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue index 5df63650f..e75418e0b 100644 --- a/nezha-fronted/src/components/charts/chartPreview.vue +++ b/nezha-fronted/src/components/charts/chartPreview.vue @@ -145,6 +145,7 @@ xAxis: [], theData: [], // series数据组 }, + isStackArea:false, echartModalStore: null, // 全屏查看时数据 chartType: 'line', // 图表类型 screenModal: false, @@ -326,7 +327,6 @@ that.$refs.loadingPreview.endLoading(); } } -console.log('=======',this.chart); iframe.src = this.chart.param.url; }); } @@ -642,6 +642,8 @@ console.log('=======',this.chart); } }; + let stackIconBorderColor = (chartInfo.type==='stackArea'?'#53a3cb':'#7e7e7e'); + let stackIconChooseBorderColor = (chartInfo.type==='stackArea'?'#7e7e7e':'#53a3cb'); var option = { title:{ show:false, @@ -656,7 +658,13 @@ console.log('=======',this.chart); yAxisIndex:false }, magicType:{ - type:['stack'] + type:['stack'], + iconStyle:{ + borderColor:stackIconBorderColor, + }, + emphasis:{ + borderColor:stackIconChooseBorderColor, + } } } }, @@ -698,7 +706,7 @@ console.log('=======',this.chart); formatter:function(params){ //display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; let str = `
`; - + let sum = 0; //let str = `
`; params.forEach((item, i) => { //let tip=legend.find((element)=>{ @@ -716,6 +724,7 @@ console.log('=======',this.chart); if(val===0){ val = Number(item.data[1]); } + sum +=val; str += `
`; str += `
${tip?(tip.alias?tip.alias:tip.name):item.seriesName}
`; str += `
`; @@ -724,6 +733,17 @@ console.log('=======',this.chart); str += `
`; }); + if(chartInfo.type==='stackArea' || self.isStackArea){ + sum = parseFloat(Number(sum).toFixed(2)); + str +=`
`; + str +=`
` + str +=self.$t("dashboard.panel.chartTotal"); + str +=`
`; + str +=`
`; + str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2); + str +=`
`; + str += `
`; + } str +=`
`; return str; }, @@ -891,6 +911,62 @@ console.log('=======',this.chart); this.echartModalStore.setOption(option);//创建图表 this.$refs.loadingPreview.endLoading(); }); + this.echartModalStore.on('magictypechanged', function (params) { + self.isStackArea = !self.isStackArea; + if(self.isStackArea){ + this.setOption({ + toolbox:{ + feature:{ + magicType:{ + iconStyle:{ + borderColor:'#7e7e7e', + }, + }, + } + }, + tooltip: { + formatter:function(params){ + let str = `
`;let sum = 0; + params.forEach((item, i) => {let tip=legend[item.seriesIndex]; + let color = self.bgColorList[item.seriesIndex]; + if(i===0){ + let value=bus.computeTimezone(item.data[0]); + let t_date = new Date(value); + str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " " + + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':'); + str +=`
`; + } + let val = parseFloat(Number(item.data[1]).toFixed(2)); + if(val===0){ + val = Number(item.data[1]); + } + sum +=val; + str += `
`; + str += `
${tip?(tip.alias?tip.alias:tip.name):item.seriesName}
`; + str += `
`; + str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2); + str += `
`; + str += `
`; + }); + if(chartInfo.type==='stackArea' || self.isStackArea){ + sum = parseFloat(Number(sum).toFixed(2)); + str +=`
`; + str +=`
` + str +=self.$t("dashboard.panel.chartTotal"); + str +=`
`; + str +=`
`; + str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2); + str +=`
`; + str += `
`; + } + + str +=`
`; + return str; + }, + } + }); + } + }); }, mouseEnterFullChart(){ if (this.echartModalStore) { @@ -952,6 +1028,7 @@ console.log('=======',this.chart); if(iframe){ iframe.src=""; } + this.isStackArea = false; }, // 重新请求数据 刷新操作 diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index 3bef9f36a..70a50a2a9 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -187,6 +187,7 @@ seriesItem: [], // 保存信息 seriesItemScreen:[], images: '', + isStackArea:false, isError:false, errorContent:'', toolbox: false, @@ -696,6 +697,8 @@ } }; + let stackIconBorderColor = (chartInfo.type==='stackArea'?'#53a3cb':'#7e7e7e'); + let stackIconChooseBorderColor = (chartInfo.type==='stackArea'?'#7e7e7e':'#53a3cb'); var option = { title:{ show:false, @@ -710,8 +713,14 @@ yAxisIndex:false }, magicType:{ - type:['stack'] - } + type:['stack'], + iconStyle:{ + borderColor:stackIconBorderColor, + }, + emphasis:{ + borderColor:stackIconChooseBorderColor, + } + }, } }, tooltip: { @@ -782,6 +791,7 @@ let str = `
`; //let str = `
`; + let sum = 0; params.forEach((item, i) => { //alert('tooltip====='+JSON.stringify(item)) //let tip=legend.find((element)=>{ @@ -801,6 +811,7 @@ if(val===0){ val = Number(item.data[1]); } + sum +=val; str += `
`; str += `
${tip?(tip.alias?tip.alias:tip.name):item.seriesName}
`; str += `
`; @@ -815,6 +826,18 @@ str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2); str +=`
`;*/ }); + if(self.data.type==='stackArea' || self.isStackArea){ + sum = parseFloat(Number(sum).toFixed(2)); + str +=`
`; + str +=`
` + str +=self.$t("dashboard.panel.chartTotal"); + str +=`
`; + str +=`
`; + str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2); + str +=`
`; + str += `
`; + } + str +=`
`; return str; // return `
${params[0].seriesName}:${params[0].data[1]}
`; @@ -1041,6 +1064,67 @@ this.echartStore.setOption(option);//创建图表 this.$refs['localLoading'+this.chartIndex].endLoading(); this.firstShow = true; // 展示操作按键 + + this.echartStore.on('magictypechanged', function (params) { + self.isStackArea = !self.isStackArea; + if(self.isStackArea){ + this.setOption({ + toolbox:{ + feature:{ + magicType:{ + iconStyle:{ + borderColor:'#7e7e7e', + }, + }, + } + }, + tooltip: { + formatter:function(params){ + let str = `
`; + let sum = 0; + params.forEach((item, i) => {let tip=legend[item.seriesIndex]; + let color = self.bgColorList[item.seriesIndex]; + if(i===0){ + let value=bus.computeTimezone(item.data[0]); + let t_date = new Date(value); + str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " " + + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':'); + str +=`
`; + } + let val = parseFloat(Number(item.data[1]).toFixed(2)); + if(val===0){ + val = Number(item.data[1]); + } + sum +=val; + str += `
`; + str += `
${tip?(tip.alias?tip.alias:tip.name):item.seriesName}
`; + str += `
`; + str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2); + str += `
`; + str += `
`; + }); + if(self.data.type==='stackArea' || self.isStackArea){ + sum = parseFloat(Number(sum).toFixed(2)); + str +=`
`; + str +=`
` + str +=self.$t("dashboard.panel.chartTotal"); + str +=`
`; + str +=`
`; + str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2); + str +=`
`; + str += `
`; + } + + str +=`
`; + return str; + }, + } + }); + } + }); + //this.echartStore.dispatchAction({ + //type: 'magictypechanged', + //}); }); } else if (chartSite === 'screen') { // 全屏显示 @@ -1127,6 +1211,63 @@ let divHeight = this.$refs.screenLegendArea.offsetHeight; this.echartModalStore.resize({height: '100%'}); });*/ + this.echartModalStore.on('magictypechanged', function (params) { + self.isStackArea = !self.isStackArea; + if(self.isStackArea){ + this.setOption({ + toolbox:{ + feature:{ + magicType:{ + iconStyle:{ + borderColor:'#7e7e7e', + }, + }, + } + }, + tooltip: { + formatter:function(params){ + let str = `
`; + let sum = 0; + params.forEach((item, i) => {let tip=legend[item.seriesIndex]; + let color = self.bgColorList[item.seriesIndex]; + if(i===0){ + let value=bus.computeTimezone(item.data[0]); + let t_date = new Date(value); + str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " " + + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':'); + str +=`
`; + } + let val = parseFloat(Number(item.data[1]).toFixed(2)); + if(val===0){ + val = Number(item.data[1]); + } + sum +=val; + str += `
`; + str += `
${tip?(tip.alias?tip.alias:tip.name):item.seriesName}
`; + str += `
`; + str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2); + str += `
`; + str += `
`; + }); + if(self.data.type==='stackArea' || self.isStackArea){ + sum = parseFloat(Number(sum).toFixed(2)); + str +=`
`; + str +=`
` + str +=self.$t("dashboard.panel.chartTotal"); + str +=`
`; + str +=`
`; + str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2); + str +=`
`; + str += `
`; + } + + str +=`
`; + return str; + }, + } + }); + } + }); } }, handleLineFeed(str,chartWidth){ @@ -1259,10 +1400,11 @@ // 重新请求数据 刷新操作 refreshChart() { this.dropdownMenuShow=false; + let id = this.data.id; this.clearChart(); this.$refs['localLoading'+this.chartIndex].startLoading(); - /*this.firstShow = false; - this.$emit('on-refresh-data', this.data.id);*/ + this.firstShow = false; + this.$emit('on-refresh-data', id); }, initDialog(){ //此时初始化，才能获得screenShowArea对象，否则此对象为undefined，无法初始化图表 diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js index 7dd778b86..2fc798ce7 100644 --- a/nezha-fronted/src/components/common/language/cn.js +++ b/nezha-fronted/src/components/common/language/cn.js @@ -97,6 +97,7 @@ const cn = { searchItem: { name: "名称" }, + chartTotal:'总和', createPanelTitle: "新增面板", selectPanelTitle: "选择面板", createPanelTitleSec: "新增面板", diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index 3c43b94cf..c9cf7466f 100644 --- a/nezha-fronted/src/components/common/language/en.js +++ b/nezha-fronted/src/components/common/language/en.js @@ -101,6 +101,7 @@ const en = { searchItem:{ name:'name' }, + chartTotal:'total', //面板-侧滑框 createPanelTitle: 'New panel', //"新增面板" selectPanelTitle:'Select', //"选择面板"