修改可以根据图例点击饼状图

src/containers/Dashboard/CampusRank/CampusRankChart.vue

@@ -55,7 +55,7 @@ export default {
         useHtml: true,
         containerTpl: `
          <div class="g2-legend">
-          <ul class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></ul>
+          <ul class="g2-legend-list legend-CampusRank" style="list-style-type:none;margin:0;padding:0;"></ul>
          </div>`,
         itemTpl: (value, color, checked, index) => {
           const obj = this.data[index];
@@ -66,6 +66,7 @@ export default {
               class="g2-legend-list-item item-${index} ${checked}"
               data-value="${value}"
               data-color=${color}
+              data-index=${index}
               style="cursor: pointer;font-size:14px;width:100%;"
             >
               <i
@@ -137,6 +138,7 @@ export default {
         this.changeSelected(this.data[0]);
         this.updateCampusName(this.data[0]);
         this.SelectedDataIndex = this.data[0];
+        this.bindClickLegendHandle();
       } else {
         this.updateCampusName();
         this.SelectedDataIndex = null;
@@ -144,6 +146,8 @@ export default {
     },
     clickHandle(ev) {
       let data = ev.data._origin;
+      console.log(data);
+
       if (this.SelectedDataIndex.areaId !== data.areaId) {
         this.SelectedDataIndex = data;
         this.changeSelected(data);
@@ -152,11 +156,55 @@ export default {
         } else {
           this.showOtherNameHandle();
         }
+      } else {
+        let selected = this.chartGeom._getSelectedShapes();
+
+        if (selected && selected.length) {
+          this.chartGeom.clearActivedShapes();
+          this.chartGeom.clearSelected();
+        } else {
+          this.chartGeom.setSelected(data);
+        }
+      }
+    },
+    bindClickLegendHandle() {
+      let ulDom = document.querySelector('.legend-CampusRank');
+      ulDom.removeEventListener('click', this.clickLegendHandle);
+      ulDom.addEventListener('click', this.clickLegendHandle);
+    },
+    clickLegendHandle(ev) {
+      let liDom = null;
+      if (ev.target.tagName === 'LI') {
+        liDom = ev.target;
+      } else {
+        liDom = ev.target.parentElement;
+      }
+      const index = Number(liDom.dataset.index);
+      if (isNaN(index)) {
+        return;
+      }
+
+      // this.chart.eachShape(function(data, shape, gemo) {
+      //   console.log(gemo);
+      // });
+
+      this.chartGeom.clearActivedShapes();
+
+      const data = this.data[index];
+      if (this.SelectedDataIndex.areaId !== data.areaId) {
+        this.SelectedDataIndex = data;
+        this.chartGeom.setSelected(data);
+        this.changeSelected(data);
+        if (data.areaId) {
+          this.changeCampusHandle(data);
+        } else {
+          this.showOtherNameHandle();
+        }
       }
     },
     changeSelected(data) {
       this.percentDom = document.querySelector('.CampusRank-percent');
-      this.areaNameDom = document.querySelector('.CampusRank-areaName');
+      // this.areaNameDom = document.querySelector('.CampusRank-areaName');
       if (this.percentDom) {
         if (this.total === 0) {
           this.percentDom.innerHTML = '0.00';
@@ -166,9 +214,9 @@ export default {
           );
         }
       }
-      if (this.areaNameDom) {
-        this.areaNameDom.innerHTML = data.areaName;
-      }
+      // if (this.areaNameDom) {
+      //   this.areaNameDom.innerHTML = data.areaName;
+      // }
     },
   },
 };

src/containers/Dashboard/SeviceRatio/SeviceRatioChart.vue

@@ -50,7 +50,7 @@ export default {
         useHtml: true,
         containerTpl: `
          <div class="g2-legend">
-          <ul class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></ul>
+          <ul class="g2-legend-list legend-SeviceRatio" style="list-style-type:none;margin:0;padding:0;"></ul>
          </div>`,
         itemTpl: (value, color, checked, index) => {
           const obj = this.data[index];
@@ -61,6 +61,7 @@ export default {
               class="g2-legend-list-item item-${index} ${checked}"
               data-value="${value}"
               data-color=${color}
+              data-index=${index}
               style="cursor: pointer;font-size:14px;width:100%;"
             >
               <i
@@ -122,6 +123,7 @@ export default {
         this.chartGeom.setSelected(this.data[0]);
         this.changeSelected(this.data[0]);
         this.SelectedDataIndex = this.data[0];
+        this.bindClickLegendHandle();
       }
     },
     clickHandle(ev) {
@@ -130,6 +132,42 @@ export default {
         this.SelectedDataIndex = data;
         this.changeSelected(data);
         this.changeServiceHandle(data);
+      } else {
+        let selected = this.chartGeom._getSelectedShapes();
+
+        if (selected && selected.length) {
+          this.chartGeom.clearActivedShapes();
+          this.chartGeom.clearSelected();
+        } else {
+          this.chartGeom.setSelected(data);
+        }
+      }
+    },
+    bindClickLegendHandle() {
+      let ulDom = document.querySelector('.legend-SeviceRatio');
+      ulDom.removeEventListener('click', this.clickLegendHandle);
+      ulDom.addEventListener('click', this.clickLegendHandle);
+    },
+    clickLegendHandle(ev) {
+      let liDom = null;
+      if (ev.target.tagName === 'LI') {
+        liDom = ev.target;
+      } else {
+        liDom = ev.target.parentElement;
+      }
+      const index = Number(liDom.dataset.index);
+      if (isNaN(index)) {
+        return;
+      }
+
+      this.chartGeom.clearActivedShapes();
+
+      const data = this.data[index];
+      console.log(liDom, data);
+      if (this.SelectedDataIndex.serviceId !== data.serviceId) {
+        this.SelectedDataIndex = data;
+        this.chartGeom.setSelected(data);
+        this.changeSelected(data);
       }
     },
     changeSelected(data) {