perf: 优化饼图legend交互效果

src/components/charts/chart-options.js

@@ -37,14 +37,15 @@ const line = {
   animation: false,
   grid: {
     left: 55,
-    bottom: 45,
+    bottom: 30,
-    top: 30
+    top: 40,
+    right: 25
   },
   color: chartColor,
   legend: {
     show: true,
-    right: 30,
+    right: 25,
-    top: 'top',
+    top: 8,
     orient: 'horizontal',
     icon: 'circle',
     itemGap: 20,
@@ -187,14 +188,16 @@ const pieWithTable = {
     itemWidth: 10, // 设置宽度
     itemHeight: 10, // 设置高度
     itemGap: 20,
-    selectedMode: false,
+    tooltip: {
-    // formatter: tooLongFormatter
+      show: true
+    },
+    formatter: tooLongFormatter
   },
   series: [
     {
       type: 'pie',
       selectedMode: 'single',
-      radius: ['42%', '70%'],
+      radius: ['42%', '65%'],
       center: ['30%', '50%'],
       data: [],
       label: {

src/views/charts/Chart.vue

@@ -474,7 +474,11 @@ export default {
           })
         }
       })
-
+      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