fix : pieD3 鼠标移入，放大dev-3.4-d3

1 files 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)) {