From 2646b0cd7e18e557883860d421fffa21cfa5327c Mon Sep 17 00:00:00 2001
From: likexuan <likexuan@geedgenetworks.com>
Date: Fri, 29 Jul 2022 14:42:15 +0800
Subject: [PATCH] =?UTF-8?q?fix=20:=20=E9=A5=BC=E5=9B=BED3=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/chart/chart/chartPieD3.vue | 37 ++++++++++++-------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/nezha-fronted/src/components/chart/chart/chartPieD3.vue b/nezha-fronted/src/components/chart/chart/chartPieD3.vue
index 1d79d98f0..7bc5e55f5 100644
--- a/nezha-fronted/src/components/chart/chart/chartPieD3.vue
+++ b/nezha-fronted/src/components/chart/chart/chartPieD3.vue
@@ -198,7 +198,6 @@ export default {
             'transform',
             'translate(' + this.width / 2 + ',' + (this.height / 2) + ')'
           )
-          .style('position', 'relative')
         arcs
           .append('path')
           .attr('class', 'path')
@@ -221,9 +220,16 @@ export default {
           .append('foreignObject')
           .attr('y', d => { // y轴居中减文字大小的一半
             const y = arc.centroid(d)[1]
-            return y - Math.sqrt(2) / 2 * (this.outerRadius / 2) + Math.ceil(this.outerRadius / 16)
+            if (d.endAngle > 4 && d.endAngle < 5 && d.startAngle > 4 && d.startAngle < 5) {
+              return y - Math.sqrt(2) / 2 * (this.outerRadius / 2) + Math.ceil(this.outerRadius / 16) * 3
+            } else {
+              return y - Math.sqrt(2) / 2 * (this.outerRadius / 2) + Math.ceil(this.outerRadius / 16)
+            }
           })
           .attr('transform', (d, i) => {
+            if ((d.endAngle - d.startAngle) > 6.28) {
+              return 'translate(' + (-this.outerRadius / 2) + ',' + (-this.outerRadius / 3) + ')'
+            }
             return 'translate(' + (arc.centroid(d)[0] - Math.abs(arc.centroid(d)[0]) - Math.ceil(this.outerRadius / 16)) + ',' + (0) + ')' // x轴为最左侧  //x轴居中减文字大小的一半
           })
           .style('font-size', (i) => {
@@ -237,6 +243,9 @@ export default {
             if ((d.endAngle - d.startAngle) < 0.25) {
               return 0
             } else {
+              if ((d.endAngle - d.startAngle) > 5) {
+                return this.outerRadius
+              }
               return Math.abs(arc.centroid(d)[0]) * 2
             }
           })
@@ -248,20 +257,20 @@ export default {
             }
             // return Math.abs(arc.centroid(d)[1]) - Math.ceil(this.outerRadius / 10)
           })
-          .style('padding-left', () => {
-            if (this.isFullscreen) {
-              return 20
-            } else {
-              return 5
-            }
-          })
+          // .style('padding-left', () => {
+          //   if (this.isFullscreen) {
+          //     return 20
+          //   } else {
+          //     return 5
+          //   }
+          // })
           .style('padding-right', (d, i) => {
             const path = document.getElementsByClassName('path')[i]
             const w = path.getBoundingClientRect().width
-            if (((d.endAngle - d.startAngle) < 0.25) || (Math.abs(arc.centroid(d)[0]) * 2 < w / 2)) {
-              return 0
-            } else {
+            if ((d.endAngle > 5 && d.endAngle < 6 && d.startAngle > 4 && d.startAngle < 6) && ((d.endAngle - d.startAngle) > 0.25)) {
               return (Math.abs(arc.centroid(d)[0]) * 2 - w / 3) / 2
+            } else {
+              return 0
             }
           })
           .style('line-height', '16px')
@@ -324,7 +333,7 @@ export default {
       } else if (str) {
         return `
               <div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer">
-                <p style="width: 80%;height: 100%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center;display: flex;align-items: center;justify-content: center;line-height: 150%">
+                <p style="width: 80%;height: 100%;text-align:center;display: flex;align-items: center;justify-content: center;line-height: 150%">
                   <i class="${
                     node.data.mapping && node.data.mapping.icon
                   }" style="color: ${
@@ -339,7 +348,7 @@ export default {
       } else if (valueStr) {
         return `
               <div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;">
-                <p style="width: 80%;height: 100%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center;display: flex;align-items: center;justify-content: center;line-height: 150%">
+                <p style="width: 80%;height: 100%;text-align:center;display: flex;align-items: center;justify-content: center;line-height: 150%">
                   <i class="${
                     node.data.mapping && node.data.mapping.icon
                   }" style="color: ${