fix: 修复ECharts环形图文字重叠的问题

Tencent · Feb 14, 2024 · 76bc6c5 · 76bc6c5
1 parent ce97b04
commit 76bc6c5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/src/pages/dashboard/base/components/MiddleChart.vue b/src/pages/dashboard/base/components/MiddleChart.vue
@@ -97,6 +97,25 @@ const renderCountChart = () => {
   }
   countChart = echarts.init(countContainer);
   countChart.setOption(getPieChartDataSet(chartColors.value));
+
+  // 取消之前高亮的图形
+  countChart.dispatchAction({
+    type: 'downplay',
+    seriesIndex: 0,
+    dataIndex: -1,
+  });
+  // 高亮当前图形
+  countChart.dispatchAction({
+    type: 'highlight',
+    seriesIndex: 0,
+    dataIndex: 1,
+  });
+  // 显示 tooltip
+  countChart.dispatchAction({
+    type: 'showTip',
+    seriesIndex: 0,
+    dataIndex: 1,
+  });
 };
 
 const renderCharts = () => {

diff --git a/src/pages/dashboard/base/index.ts b/src/pages/dashboard/base/index.ts
@@ -367,8 +367,8 @@ export function getPieChartDataSet({
         emphasis: {
           scale: true,
           label: {
-            show: true,
-            formatter: ['{value|{d}%}', '{name|{b}渠道占比}'].join('\n'),
+            show: false,
+            // formatter: ['{value|{d}%}', '{name|{b}渠道占比}'].join('\n'), 就是这个东西造成文字重叠
             rich: {
               value: {
                 color: textColor,