fix : pieD3 调整

nezha-fronted/src/components/chart/chart/chartPieD3.vue

@@ -158,7 +158,7 @@ export default {
     // 绘制饼图
     drawArcPie (data) {
       this.$nextTick(() => {
-        let showAngle = 0
+        // const showAngle = 0
         d3.select(`#chart-canvas-${this.chartId}`).selectAll('svg').remove()// 清空作图区域
         // 重新赋值宽高
         try {
@@ -210,7 +210,7 @@ export default {
             return arc(d)
           })
         // 边界线
-        // .attr('stroke', 'white')
+          .attr('stroke', 'white')
         // 颜色
           .attr('fill', (d, i) => {
             if (d.data.mapping) {
@@ -220,75 +220,126 @@ export default {
             }
           })
 
-        // 文字
+        /* 添加文字信息 */
-        arcs
+        arcs.append('foreignObject')
-          .append('foreignObject')
-          .attr('y', d => { // y轴居中减文字大小的一半
-            const y = arc.centroid(d)[1]
-            // 居中
-            let height = 90
-            if (Math.ceil(this.outerRadius / 8) < 30) {
-              height = Math.ceil(this.outerRadius / 8) * 3
-            }
-            if ((d.endAngle - d.startAngle) > 5) {
-              height += this.outerRadius
-            }
-            return y - height / 2
-          })
-          .attr('x', d => { // y轴居中减文字大小的一半
-            const x = arc.centroid(d)[0]
-            // 居中
-            let width = 0
-            if ((d.endAngle - d.startAngle) < 0.25) {
-              width = 0
-            } else {
-              if ((d.endAngle - d.startAngle) > 5) {
-                width = this.outerRadius * 2
-              }
-              width = this.outerRadius * (d.endAngle - d.startAngle) / 3.14
-              width = width > this.outerRadius / 3 ? width : this.outerRadius / 3
-            }
-            return x - width / 2
-          })
-          .style('font-size', (i) => {
-            if (Math.ceil(this.outerRadius / 8) > 30) {
-              return 30
-            } else {
-              return Math.ceil(this.outerRadius / 8)
-            }
-          })
           .attr('width', (d, i) => {
             if ((d.endAngle - d.startAngle) < 0.25) {
               return 0
+            } else if ((d.endAngle - d.startAngle) > 6) {
+              return this.outerRadius
+            } else if ((d.endAngle - d.startAngle) > 3 && (d.endAngle - d.startAngle) < 6) {
+              return this.outerRadius - this.outerRadius / 5
             } else {
-              if ((d.endAngle - d.startAngle) > 5) {
+              return Math.abs(d.endAngle - d.startAngle) / 3.14 * this.outerRadius
-                return this.outerRadius * 2
-              }
-              let width = 0
-              showAngle += d.endAngle - d.startAngle
-              if (showAngle > 0.75) {
-                width = this.outerRadius * (d.endAngle - d.startAngle) / 3.14
-                width = width > this.outerRadius / 3 ? width : this.outerRadius / 3
-                showAngle = 0
-              } else {
-                showAngle += d.endAngle - d.startAngle
-                width = 0
-              }
-              return width
             }
           })
           .attr('height', (d, i) => {
-            if (Math.ceil(this.outerRadius / 8) > 30) {
+            if ((d.endAngle - d.startAngle) < 0.25) {
-              return 90
+              return 0
+            } else if ((d.endAngle - d.startAngle) > 1) {
+              return 1 / 3.14 * this.outerRadius
             } else {
-              return Math.ceil(this.outerRadius / 8) * 3
+              return Math.abs(d.endAngle - d.startAngle) / 3.14 * this.outerRadius
+            }
+          })
+          .attr('transform', (d, i) => {
+            if ((d.endAngle - d.startAngle) < 0.25) {
+              return ''
+            } else if ((d.endAngle - d.startAngle) > 6) {
+              return 'translate(' + (-this.outerRadius / 2) + ',' + (-this.outerRadius / 5) + ')'
+            } else if ((d.endAngle - d.startAngle) > 3 && (d.endAngle - d.startAngle) < 6) {
+              return 'translate(' + (arc.centroid(d)[0] - (this.outerRadius - this.outerRadius / 5) / 3) + ',' + (arc.centroid(d)[1] - (1 / 3.14 * this.outerRadius / 2)) + ')'
+            } else if ((d.endAngle - d.startAngle) > 1 && (d.endAngle - d.startAngle) < 3) {
+              return 'translate(' + (arc.centroid(d)[0] - (Math.abs(d.endAngle - d.startAngle) / 3.14 * this.outerRadius / 2)) + ',' + (arc.centroid(d)[1] - (1 / 3.14 * this.outerRadius / 2)) + ')'
+            } else {
+              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('line-height', '16px')
           .html((d) => {
+            if ((d.endAngle - d.startAngle) < 0.5 && Math.ceil(this.outerRadius / 18 < 30)) {
+              return ` <div style="color:${(d.data.mapping && d.data.mapping.color && d.data.mapping.color.text) || '#000'};">...</div>`
+            } else {
               return this.drawText(d)
+            }
           })
 
+        // // 文字
+        // arcs
+        //   .append('foreignObject')
+        //   .attr('y', d => { // y轴居中减文字大小的一半
+        //     const y = arc.centroid(d)[1]
+        //     // 居中
+        //     let height = 90
+        //     if (Math.ceil(this.outerRadius / 8) < 30) {
+        //       height = Math.ceil(this.outerRadius / 8) * 3
+        //     }
+        //     if ((d.endAngle - d.startAngle) > 5) {
+        //       height += this.outerRadius
+        //     }
+        //     return y - height / 2
+        //   })
+        //   .attr('x', d => { // y轴居中减文字大小的一半
+        //     const x = arc.centroid(d)[0]
+        //     // 居中
+        //     let width = 0
+        //     if ((d.endAngle - d.startAngle) < 0.25) {
+        //       width = 0
+        //     } else {
+        //       if ((d.endAngle - d.startAngle) > 5) {
+        //         width = this.outerRadius * 2
+        //       }
+        //       width = this.outerRadius * (d.endAngle - d.startAngle) / 3.14
+        //       width = width > this.outerRadius / 3 ? width : this.outerRadius / 3
+        //     }
+        //     return x - width / 2
+        //   })
+        //   .style('font-size', (i) => {
+        //     if (Math.ceil(this.outerRadius / 8) > 30) {
+        //       return 30
+        //     } else {
+        //       return Math.ceil(this.outerRadius / 8)
+        //     }
+        //   })
+        //   .attr('width', (d, i) => {
+        //     if ((d.endAngle - d.startAngle) < 0.25) {
+        //       return 0
+        //     } else {
+        //       if ((d.endAngle - d.startAngle) > 5) {
+        //         return this.outerRadius * 2
+        //       }
+        //       let width = 0
+        //       showAngle += d.endAngle - d.startAngle
+        //       if (showAngle > 0.75) {
+        //         width = this.outerRadius * (d.endAngle - d.startAngle) / 3.14
+        //         width = width > this.outerRadius / 3 ? width : this.outerRadius / 3
+        //         showAngle = 0
+        //       } else {
+        //         showAngle += d.endAngle - d.startAngle
+        //         width = 0
+        //       }
+        //       return width
+        //     }
+        //   })
+        // .attr('height', (d, i) => {
+        //   if (Math.ceil(this.outerRadius / 8) > 30) {
+        //     return 90
+        //   } else {
+        //     return Math.ceil(this.outerRadius / 8) * 3
+        //   }
+        // })
+        // .style('line-height', '16px')
+        // .html((d) => {
+        //   return this.drawText(d)
+        // })
+
         arcs.on('mouseenter', this.bubbleEnter)
         arcs.on('mousemove', this.bubbleMove)
         arcs.on('mouseleave', this.bubbleLeave)
@@ -326,10 +377,8 @@ export default {
       if (str && valueStr) {
         return `
               <div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;">
-                <p style="color:${(node.data.mapping && node.data.mapping.color && node.data.mapping.color.text) || '#000'};width: 100%;height: 100%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center;line-height: 150%">
+                <div style="color:${(node.data.mapping && node.data.mapping.color && node.data.mapping.color.text) || '#000'};overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">${str}</div>
-                  <span>${str}</span>
+                <p style="width: 80%;height: 100%;text-align:center;display: flex;align-items: center;justify-content: center;">
-                </p>
-                <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;">
                   <i class="${
                     node.data.mapping && node.data.mapping.icon
                   }" style="color: ${
@@ -352,7 +401,7 @@ export default {
           node.data.mapping.color &&
           node.data.mapping.color.icon
         };font-size:1em;"></i>
-                  <span style="color:${(node.data.mapping && node.data.mapping.color && node.data.mapping.color.text) || '#000'};text-overflow: ellipsis;white-space: nowrap;overflow:hidden;display:inline-block">${str}</span>
+                  <div style="color:${(node.data.mapping && node.data.mapping.color && node.data.mapping.color.text) || '#000'};overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">${str}</div>
                 </p>
               </div>
             `
@@ -367,7 +416,7 @@ export default {
           node.data.mapping.color &&
           node.data.mapping.color.icon
         };font-size:1em;"></i>
-                  <span style="color:${(node.data.mapping && node.data.mapping.color && node.data.mapping.color.text) || '#000'};text-overflow: ellipsis;white-space: nowrap;overflow:hidden;display:inline-block">${valueStr}</span>
+                  <div style="color:${(node.data.mapping && node.data.mapping.color && node.data.mapping.color.text) || '#000'};overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">${valueStr}</div>
                 </p>
               </div>
             `