perf: legend高亮逻辑变更

nezha-fronted/src/components/charts/chartPreview.vue

@@ -606,8 +606,48 @@
         }
       },
       clickScreenLegend(legendName,index){
+        /*点击legend
+        * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
+        * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
+        * 3.否则只改变被点击的legend状态
+        * */
+        let highlightNum = 0; //高亮数量
+        this.isGreyScreen.forEach(g => {
+          if (!g) {
+            highlightNum++;
+          }
+        });
+        let hasGrey = highlightNum < this.isGreyScreen.length; //是否有置灰的
+        let curIsGrey = this.isGreyScreen[index]; //当前legend的状态
+        let currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1; //当前legend是否是目前唯一高亮的
+
+        let echart = this.echartModalStore;
+        if (echart) {
+          if (!hasGrey) { //1.除当前legend外全置灰
+            echart.dispatchAction({
+              type: 'legendInverseSelect'
+            });
+            echart.dispatchAction({
+              type: 'legendSelect',
+              name: legendName
+            });
+            this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index);
+          } else if (currentIsTheOnlyOneHighlight) { //2.全高亮
+            echart.dispatchAction({
+              type: 'legendAllSelect'
+            });
+            this.isGreyScreen = this.isGreyScreen.map(() => false);
+          } else {
+            let type = curIsGrey ? "legendSelect" : "legendUnSelect";
+            echart.dispatchAction({
+              type: type,
+              name: legendName
+            });
+            this.$set(this.isGreyScreen, index, !this.isGreyScreen[index]);
+          }
+        }
         //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
-        let curIsGrey=this.isGreyScreen[index];
+        /*let curIsGrey=this.isGreyScreen[index];
         if(this.echartModalStore){
           this.screenLegendList.forEach((item,i)=>{
             let isGrey = this.isGreyScreen[i];
@@ -650,7 +690,7 @@
               }
             }
           })
-        }
+        }*/
       },
       formatLegend(chartWidth,name){
         if(!name){

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -178,6 +178,7 @@
     </div>
   </div>
 </template>
+
 <script>
   import axios from 'axios';
   import echarts from 'echarts';
@@ -346,21 +347,45 @@
         }
       },
       clickLegend(legendName, index){
-        let curIsGrey=this.isGrey[index];
+        /*点击legend
+        * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
+        * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
+        * 3.否则只改变被点击的legend状态
+        * */
+        let highlightNum = 0; //高亮数量
+        this.isGrey.forEach(g => {
+          if (!g) {
+            highlightNum++;
+          }
+        });
+        let hasGrey = highlightNum < this.isGrey.length; //是否有置灰的
+        let curIsGrey = this.isGrey[index]; //当前legend的状态
+        let currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1; //当前legend是否是目前唯一高亮的
+
         let echart = getChart(this.chartIndex)
         if (echart) {
-          if(curIsGrey){
+          if (!hasGrey) { //1.除当前legend外全置灰
+            echart.dispatchAction({
+              type: 'legendInverseSelect'
+            });
             echart.dispatchAction({
               type: 'legendSelect',
               name: legendName
-            })
+            });
-          }else{
+            this.isGrey = this.isGrey.map((g, i) => i !== index);
+          } else if (currentIsTheOnlyOneHighlight) { //2.全高亮
             echart.dispatchAction({
-              type: 'legendUnSelect',
+              type: 'legendAllSelect'
+            });
+            this.isGrey = this.isGrey.map(() => false);
+          } else {
+            let type = curIsGrey ? "legendSelect" : "legendUnSelect";
+            echart.dispatchAction({
+              type: type,
               name: legendName
-            })
+            });
+            this.$set(this.isGrey, index, !this.isGrey[index]);
           }
-          this.$set(this.isGrey,index,!curIsGrey)
         }
       },
       clickLegend2(legendName,index){
@@ -411,20 +436,45 @@
         }
       },
       clickScreenLegend(legendName,index){
-        let curIsGrey=this.isGreyScreen[index];
+        /*点击legend
-        if(this.echartModalStore) {
+        * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
-          if(curIsGrey){
+        * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
-            this.echartModalStore.dispatchAction({
+        * 3.否则只改变被点击的legend状态
+        * */
+        let highlightNum = 0; //高亮数量
+        this.isGreyScreen.forEach(g => {
+          if (!g) {
+            highlightNum++;
+          }
+        });
+        let hasGrey = highlightNum < this.isGreyScreen.length; //是否有置灰的
+        let curIsGrey = this.isGreyScreen[index]; //当前legend的状态
+        let currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1; //当前legend是否是目前唯一高亮的
+
+        let echart = this.echartModalStore;
+        if (echart) {
+          if (!hasGrey) { //1.除当前legend外全置灰
+            echart.dispatchAction({
+              type: 'legendInverseSelect'
+            });
+            echart.dispatchAction({
               type: 'legendSelect',
               name: legendName
-            })
+            });
+            this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index);
+          } else if (currentIsTheOnlyOneHighlight) { //2.全高亮
+            echart.dispatchAction({
+              type: 'legendAllSelect'
+            });
+            this.isGreyScreen = this.isGreyScreen.map(() => false);
           } else {
-            this.echartModalStore.dispatchAction({
+            let type = curIsGrey ? "legendSelect" : "legendUnSelect";
-              type: 'legendUnSelect',
+            echart.dispatchAction({
+              type: type,
               name: legendName
-            })
+            });
+            this.$set(this.isGreyScreen, index, !this.isGreyScreen[index]);
           }
-          this.$set(this.isGreyScreen,index,!curIsGrey)
         }
       },
       clickScreenLegend2(legendName,index){
@@ -879,7 +929,6 @@
             getChart(this.chartIndex).on('magictypechanged', function (params) {
               self.isStackArea = !self.isStackArea;
               if(self.isStackArea){
-                  console.log(123123);
                 getChart(self.chartIndex).setOption({
                   toolbox:{
                     feature:{

nezha-fronted/src/components/page/dashboard/overview/chart.vue

@@ -249,8 +249,58 @@
         return color;
       },
       clickLegend(legendName,index){
+        /*点击legend
+        * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
+        * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
+        * 3.否则只改变被点击的legend状态
+        * */
+        let highlightNum = 0; //高亮数量
+        this.legend.forEach(g => {
+          if (!g.isGray) {
+            highlightNum++;
+          }
+        });
+        let hasGray = highlightNum < this.legend.length; //是否有置灰的
+        let curIsGray = this.legend[index].isGray; //当前legend的状态
+        let currentIsTheOnlyOneHighlight = !curIsGray && highlightNum === 1; //当前legend是否是目前唯一高亮的
 
-        let curIsGrey=this.legend[index].isGray;
+        let echart = this.chart;
+        if (echart) {
+          if (!hasGray) { //1.除当前legend外全置灰
+            echart.dispatchAction({
+              type: 'legendInverseSelect'
+            });
+            echart.dispatchAction({
+              type: 'legendSelect',
+              name: legendName
+            });
+            this.legend = this.legend.map((g, i) => {
+              if (i === index) {
+                g.isGray = false;
+              } else {
+                g.isGray = true;
+              }
+              return g;
+            });
+          } else if (currentIsTheOnlyOneHighlight) { //2.全高亮
+            echart.dispatchAction({
+              type: 'legendAllSelect'
+            });
+            this.legend = this.legend.map(g => {
+              g.isGray = false;
+              return g;
+            });
+          } else {
+            let type = curIsGray ? "legendSelect" : "legendUnSelect";
+            echart.dispatchAction({
+              type: type,
+              name: legendName
+            });
+            let vm = this;
+            this.$set(this.legend, index, function(){let legend = vm.legend[index]; legend.isGray = !legend.isGray; return legend;}());
+          }
+        }
+        /*let curIsGrey=this.legend[index].isGray;
         if(this.chart){
           if(curIsGrey){
             this.chart.dispatchAction({
@@ -264,7 +314,7 @@
             });
           }
           this.$set(this.legend[index],'isGray',!curIsGrey)
-        }
+        }*/
       },
       clickLegend2(legendName,index){
         let curIsGrey=this.legend[index].isGray;