From f3983ff59adf63a4c7278994ff1001a95d4fac75 Mon Sep 17 00:00:00 2001
From: likexuan <likexuan@geedgenetworks.com>
Date: Fri, 28 Oct 2022 09:21:20 +0800
Subject: [PATCH] =?UTF-8?q?fix=20:=20pieD3=20=E9=BC=A0=E6=A0=87=E7=A7=BB?=
 =?UTF-8?q?=E5=85=A5=EF=BC=8C=E6=94=BE=E5=A4=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/chart/chart/chartPieD3.vue | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/nezha-fronted/src/components/chart/chart/chartPieD3.vue b/nezha-fronted/src/components/chart/chart/chartPieD3.vue
index e1facb4c6..c341e616e 100644
--- a/nezha-fronted/src/components/chart/chart/chartPieD3.vue
+++ b/nezha-fronted/src/components/chart/chart/chartPieD3.vue
@@ -65,6 +65,7 @@ export default {
       height: 0,
       innerRadius: 0,
       outerRadius: 0,
+      textSize: 0,
       tooltip: {
         x: 0,
         y: 0,
@@ -178,6 +179,7 @@ export default {
         }
         // 半径
         this.outerRadius = Math.min(this.width, this.height) / 3
+        this.textSize = Math.ceil(this.outerRadius / 18) > 30 ? 30 : Math.ceil(this.outerRadius / 18)
         // 画布
         const svg = d3
           .select(`#chart-canvas-${this.chartId}`)
@@ -219,7 +221,15 @@ export default {
               return d.data.color
             }
           })
-
+        const _this = this
+        arcs.on('mouseover', function (d) {
+          d3.select(this).select('path').transition().attr('transform', 'scale(1.1)')
+          d3.select(this).select('foreignObject').style('font-size', _this.textSize * 1.1)
+        })
+        arcs.on('mouseout', function (d) {
+          d3.select(this).select('path').transition().attr('transform', 'scale(1)')
+          d3.select(this).select('foreignObject').style('font-size', _this.textSize)
+        })
         /* 添加文字信息 */
         arcs.append('foreignObject')
           .attr('width', (d, i) => {
@@ -255,13 +265,7 @@ export default {
               return 'translate(' + (arc.centroid(d)[0] - (Math.abs(d.endAngle - d.startAngle) / 3.14 * this.outerRadius / 2)) + ',' + (arc.centroid(d)[1] - (Math.abs(d.endAngle - d.startAngle) / 3.14 * this.outerRadius / 2)) + ')'
             }
           })
-          .style('font-size', (i) => {
-            if (Math.ceil(this.outerRadius / 18) > 30) {
-              return 30
-            } else {
-              return Math.ceil(this.outerRadius / 18)
-            }
-          })
+          .style('font-size', this.textSize)
           .style('line-height', '16px')
           .html((d) => {
             if ((d.endAngle - d.startAngle) < 0.5 && Math.ceil(this.outerRadius / 18 < 30)) {