From bebd568b468599df9436fe07ef5b878aad9b55b8 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Wed, 14 Jul 2021 22:06:56 +0800
Subject: [PATCH] =?UTF-8?q?CN-53=20perf:=20cn-53=E7=AC=AC=E4=B8=80?=
 =?UTF-8?q?=E6=9D=A1=EF=BC=8C=E9=A5=BC=E5=9B=BElegend=E4=BA=8B=E4=BB=B6?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/charts/Chart.vue | 55 +++++++++++++++++++++++++++-----------
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index b000fe40..15462dbc 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -454,8 +454,7 @@ export default {
       tableQueryParams[chartParams.nameColumn] = [] // 处理两个图表不一样的地方
       get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
         if (response.code === 200) {
-          const data = response.data.result
-          this.chartOption.series[0].data = data.map(d => {
+          const data = response.data.result.map(d => {
             tableQueryParams[chartParams.nameColumn].push(d[chartParams.nameColumn])
             return {
               data: d,
@@ -463,6 +462,7 @@ export default {
               value: parseInt(d[chartParams.valueColumn])
             }
           })
+          this.chartOption.series[0].data = data
           if (this.chartOption.series[0].data && this.chartOption.series[0].data.length > 10) { // pieWithTable 图例超过10个改为滚动显示
             this.chartOption.legend.type = 'scroll'
           }
@@ -477,26 +477,51 @@ export default {
           })
         }
       })
+      // legend点击事件
       this.myChart.on('legendselectchanged', function (params) {
         self.myChart.setOption({
           legend: { selected: { [params.name]: true } }
         })
-      })
-      this.myChart.on('click', function (echartParams) {
-        const childrenParams = { startTime: parseInt(self.startTime / 1000), endTime: parseInt(self.endTime / 1000), limit: 10, order: self.orderPieTable }
-        childrenParams[chartParams.nameColumn] = echartParams.name
-        if (self.selectPieChartName === echartParams.name) {
-          self.selectPieChartName = ''
-          childrenParams[chartParams.nameColumn] = tableQueryParams[chartParams.nameColumn]
-        } else {
-          self.selectPieChartName = echartParams.name
-        }
-        get(replaceUrlPlaceholder(chartParams.urlTable, childrenParams)).then(response2 => {
-          if (response2.code === 200) {
-            self.pieTableData = response2.data.result
+        self.chartOption.series[0].data.forEach((d, i) => {
+          if (self.selectPieChartName === d.name) {
+            self.myChart.dispatchAction({
+              type: 'unselect',
+              seriesIndex: 0,
+              dataIndex: i
+            })
+            self.loadPieTableData()
+          } else {
+            if (d.name === params.name) {
+              self.selectPieChartName = d.name
+              self.myChart.dispatchAction({
+                type: 'select',
+                seriesIndex: 0,
+                dataIndex: i
+              })
+              self.loadPieTableData(params.name)
+            } else {
+              self.myChart.dispatchAction({
+                type: 'unselect',
+                seriesIndex: 0,
+                dataIndex: i
+              })
+            }
           }
         })
       })
+      // 饼图色块点击事件
+      this.myChart.on('click', function (echartParams) {
+        self.loadPieTableData(echartParams.name)
+      })
+    },
+    loadPieTableData (name = '') {
+      const childrenParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), limit: 10, order: this.orderPieTable }
+      childrenParams[this.chartInfo.params.nameColumn] = name
+      get(replaceUrlPlaceholder(this.chartInfo.params.urlTable, childrenParams)).then(response => {
+        if (response.code === 200) {
+          this.pieTableData = response.data.result
+        }
+      })
     },
     tableLimitChange () {
       const chartParams = this.chartInfo.params || null // 图表参数