diff --git a/src/components/Pie3D.vue b/src/components/Pie3D.vue index e10f09ac50d45c13c8934be01713b943999b737a..806990b8d08a16c1eeb432aab1aa9415274adde5 100644 --- a/src/components/Pie3D.vue +++ b/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 = [ diff --git a/src/utils/pie.js b/src/utils/pie.js index 23ca78b0f3c817028c25d8dae3f90a2e92c8e8a1..08bb9d38b0754c38cd14280323392cff0b8111b6 100644 --- a/src/utils/pie.js +++ b/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