Auto commit

src/components/Pie3D.vue

@@ -10,7 +10,8 @@ import pie from '../utils/pie'
 import { onMounted, reactive } from 'vue';
 
 let config = reactive({
-  color:["#0f7eee","#24Daff","#FFFF80","#caf982","#80DCff"]
+  color:["#5470c6","#91cc75","#fac858","#ee6666","#73c0de"],//颜色
+  sfShowLabel:true //是否显示文本标线
 })
 //基础数据
 const salesData = [

src/utils/pie.js

@@ -97,5 +97,59 @@ export default function pie(id, width, height, data, x, y, rx, ry, h, config,ir=
         let colorIndex = index % config.color.length
         return d3.hsl(config.color[colorIndex]).darker(0.7)
     });
+    //是否显示标签
+    if(config.sfShowLabel){
+        //创建文本标签引导线
+        const line = d3.select('#pie_chart')
+            .append('g')
+            .attr('transform',`translate(350,200)`)
+            .attr('class','line');
+        //引导线
+        line.selectAll('.line')
+            .data(dataset)
+            .enter()
+            .append('line')
+            .attr('stroke',(d,index) => {
+                let colorIndex = index % config.color.length
+                return config.color[colorIndex]
+            })
+            .attr('x1',0)
+            .attr('y1',0)
+            .attr('x2',d => {
+                return 1.5 * rx * Math.cos(0.5 * (d.startAngle + d.endAngle))
+            })
+            .attr('y2',d => {
+                return 1.5 * ry * Math.sin(0.5 * (d.startAngle + d.endAngle))
+            })
+            .style('visibility', d => {
+                return 'visible'
+            });
+        //文本
+        const textbox = d3.select('#pie_chart')
+            .append('g')
+            .attr('transform','translate(350,200)')
+            .attr('class','textbox');
+        const text = textbox.selectAll('desc')
+            .data(dataset)
+            .enter()
+            .append('text')
+            .attr('font-size','14px')
+            .attr('text-anchor','middle')
+            .style('visibility', d => {
+                return 'visible'
+            })
+            .attr('fill',(d,index) => {
+                let colorIndex = index % config.color.length
+                return config.color[colorIndex]
+            })
+            .text(d => {
+                return `${d.data.label}:${d.data.value}${d.data.DWMC}`
+            })
+            .attr('transform', d => {
+                let x = 1.5 * (rx + 10) * Math.cos(0.5 * (d.startAngle + d.endAngle))
+                let y = 1.5 * (ry + 10) * Math.sin(0.5 * (d.startAngle + d.endAngle))
+                return `translate(${x},${y})`
+            })
 
+    }
 }
\ No newline at end of file