From 4f092c2bf7deb43a8683c59e6b78075abdab7f9d Mon Sep 17 00:00:00 2001 From: zhangyu Date: Mon, 7 Dec 2020 17:57:19 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=20dashboard?= =?UTF-8?q?=E7=95=8C=E9=9D=A2=EF=BC=8Cpanel=E5=86=85=E7=9A=84chart?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E7=82=B9=E5=87=BB=E5=8F=B3=E4=B8=8A=E8=A7=92?= =?UTF-8?q?=E7=9A=84=E5=A0=86=E5=8F=A0=E6=97=B6=EF=BC=8C=E6=9D=A5=E5=9B=9E?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=8F=90=E7=A4=BA=E4=BC=9A=E4=BB=8E=E8=8B=B1?= =?UTF-8?q?=E6=96=87=E5=8F=98=E6=88=90=E4=B8=AD=E6=96=87=20=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/charts/line-chart-block.vue | 77 +++++++++++++++++-- .../common/project/popData/lineChart.vue | 73 +++++++++++++++++- 2 files changed, 142 insertions(+), 8 deletions(-) diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index 7d9b7275e..135993c73 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -331,6 +331,7 @@ }) } }, + clickLegend(legendName,index){ //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部 let curIsGrey=this.isGrey[index]; @@ -511,7 +512,7 @@ show:false, top:'0', right:'18', - showTitle:true, + showTitle:false, feature:{ dataZoom:{ yAxisIndex:false, @@ -523,14 +524,27 @@ magicType:{ type:['stack'], title:{ - stack:self.$t('overall.toolBox.stack') + stack:self.$t('overall.toolBox.stack'), }, iconStyle:{ borderColor:stackIconBorderColor, }, emphasis:{ borderColor:stackIconChooseBorderColor, - } + }, + }, + }, + tooltip: { // 和 option.tooltip 的配置项相同 + show: true, + position:'top', + formatter: function (param) { + return param.title; // 自定义的 DOM 结构 + }, + backgroundColor:'rgba(255,255,255,0)', + borderColor :'rgba(255,255,255,0)', + textStyle: { + fontSize: 12, + color : '#439AC6' }, } }, @@ -818,7 +832,8 @@ getChart(this.chartIndex).on('magictypechanged', function (params) { self.isStackArea = !self.isStackArea; if(self.isStackArea){ - this.setOption({ + console.log(123123); + getChart(self.chartIndex).setOption({ toolbox:{ feature:{ dataZoom:{ @@ -884,7 +899,33 @@ }, } }); - } + }else{ + getChart(self.chartIndex).setOption({ + toolbox:{ + feature:{ + dataZoom:{ + yAxisIndex:false, + title:{ + zoom:self.$t('overall.toolBox.zoom'), + back:self.$t('overall.toolBox.back'), + } + }, + magicType:{ + type:['stack'], + title:{ + stack:self.$t('overall.toolBox.stack') + }, + iconStyle:{ + borderColor:'#7e7e7e', + }, + emphasis:{ + borderColor:stackIconChooseBorderColor, + } + }, + } + }, + }) + } }); }); } else if (chartSite === 'screen') { // 全屏显示 @@ -1022,6 +1063,32 @@ }, } }); + }else{ + this.setOption({ + toolbox:{ + feature:{ + dataZoom:{ + yAxisIndex:false, + title:{ + zoom:self.$t('overall.toolBox.zoom'), + back:self.$t('overall.toolBox.back'), + } + }, + magicType:{ + type:['stack'], + title:{ + stack:self.$t('overall.toolBox.stack') + }, + iconStyle:{ + borderColor:'#7e7e7e', + }, + emphasis:{ + borderColor:stackIconChooseBorderColor, + } + }, + } + }, + }) } }); }); diff --git a/nezha-fronted/src/components/common/project/popData/lineChart.vue b/nezha-fronted/src/components/common/project/popData/lineChart.vue index 755ed0b7a..9f29b4b99 100644 --- a/nezha-fronted/src/components/common/project/popData/lineChart.vue +++ b/nezha-fronted/src/components/common/project/popData/lineChart.vue @@ -472,7 +472,8 @@ toolbox:{ show:false, top:'0', - showTitle:true, + right:'18', + showTitle:false, feature:{ dataZoom:{ yAxisIndex:false, @@ -484,14 +485,27 @@ magicType:{ type:['stack'], title:{ - stack:self.$t('overall.toolBox.stack') + stack:self.$t('overall.toolBox.stack'), }, iconStyle:{ borderColor:stackIconBorderColor, }, emphasis:{ borderColor:stackIconChooseBorderColor, - } + }, + }, + }, + tooltip: { // 和 option.tooltip 的配置项相同 + show: true, + position:'top', + formatter: function (param) { + return param.title; // 自定义的 DOM 结构 + }, + backgroundColor:'rgba(255,255,255,0)', + borderColor :'rgba(255,255,255,0)', + textStyle: { + fontSize: 12, + color : '#439AC6' }, } }, @@ -870,6 +884,32 @@ }, } }); + }else{ + this.setOption({ + toolbox:{ + feature:{ + dataZoom:{ + yAxisIndex:false, + title:{ + zoom:self.$t('overall.toolBox.zoom'), + back:self.$t('overall.toolBox.back'), + } + }, + magicType:{ + type:['stack'], + title:{ + stack:self.$t('overall.toolBox.stack') + }, + iconStyle:{ + borderColor:'#7e7e7e', + }, + emphasis:{ + borderColor:stackIconChooseBorderColor, + } + }, + } + }, + }) } }); }); @@ -1001,7 +1041,34 @@ }, } }); + }else{ + this.setOption({ + toolbox:{ + feature:{ + dataZoom:{ + yAxisIndex:false, + title:{ + zoom:self.$t('overall.toolBox.zoom'), + back:self.$t('overall.toolBox.back'), + } + }, + magicType:{ + type:['stack'], + title:{ + stack:self.$t('overall.toolBox.stack') + }, + iconStyle:{ + borderColor:'#7e7e7e', + }, + emphasis:{ + borderColor:stackIconChooseBorderColor, + } + }, + } + }, + }) } + }); }); }