Auto commit

src/components/Pie3D.vue

@@ -12,6 +12,7 @@ import { onMounted, reactive } from 'vue';
 let config = reactive({
   color:["#5470c6","#91cc75","#fac858","#ee6666","#73c0de"],//颜色
   sfShowLabel:true, //是否显示文本标线
+  sfLegend:true, //是否显示图例
   legendOrient:'horizontal', //图例，横向、纵向
   legendType:'plain', //图例类型，普通图例plain还是 scroll翻页图例
 })
@@ -37,5 +38,6 @@ onMounted(() => {
 #abc{
   width: 700px;
   height: 400px;
+  position: relative;
 }
 </style>

src/utils/pie.js

@@ -152,5 +152,108 @@ export default function pie(id, width, height, data, x, y, rx, ry, h, config,ir=
             })
 
     }
-    
+    //是否显示图例
+    if(config.sfLegend){
+        //此处为了实现横向和纵向图例的效果，必须在外层盒子中创建薪的svg来包裹图例盒子
+        const legendSvg = d3.select(id)
+            .append('svg')
+            .style('position','absolute');
+        let legend = null //每一个图例
+        let legendBox = null //图例层最外层大盒子
+        //判断是否横向图例
+        if(config.legendOrient === 'horizontal'){
+            //横向
+            legendBox = legendSvg.attr('width',700)
+                .attr('height',20)
+                .style('top',() => {
+                    return 400 - 30
+                })
+                .style('left',7)
+                .append('g')
+                .attr('id','legend_svg')
+            legend = legendBox.selectAll('g')
+                .data(data)
+                .enter()
+                .append('g');
+        }else{
+            //纵向
+            console.log('纵向')
+        }
+        //创建图例前的小圆点样式
+        let legendItembox = legend.append('circle')
+            .attr('cx',10)
+            .attr('cy',10)
+            .attr('r',7);
+
+        legendItembox.attr('fill',(d,index) => {
+            let colorIndex = index % config.color.length
+            return config.color[colorIndex]
+        });
+        //图例旁边的文字
+        legend.append('text')
+            .text(d => {
+                return d.label
+            })
+            .style('font-size','14px')
+            .attr('fill','#000000')
+            .attr('y',11)
+            .attr('x',30)
+            .attr('dy',3);
+        //处理横向图例的翻页还是普通
+        if(config.legendOrient === 'horizontal'){
+            //判断是普通图例还是翻页图例
+            if(config.legendType === 'scroll'){
+                console.log('scroll')
+            }else{
+                //类型是普通图例
+                legendSvg.attr('width',700 - 20);
+                //获取总页数
+                let legendNumLength = 0
+                let totalPage = 1 //总页数
+                let lineList = [] //如果是普通图例判断一行显示多少个
+                legend.each(function(d,i) {
+                    legendNumLength += d3.select(this).node().getBBox().width + 10
+                    if(legendNumLength > (700 - 20 - (d3.select(this).node().getBBox().width + 10))){
+                        legendNumLength = 0
+                        //避免移动到最后一页多加一夜
+                        if(data.length - 1 !== i){
+                            lineList.push(i)
+                            totalPage++
+                        }
+                    }
+                })
+                let maxWidth = 0 //获取最大的图例宽度
+                legend.each(function() {
+                    if(maxWidth < d3.select(this).node().getBBox().width){
+                        maxWidth = d3.select(this).node().getBBox().width
+                    }
+                });
+                legendSvg.attr('height',20*totalPage)
+                    .style('top',450 - 30 - 20*(totalPage - 1));
+                let listX = [] //各个图例横向的X
+                let listY = [] //图例纵向的Y
+                let left = 0
+                let top = 0
+                legend.each(function(d,i) {
+                    left += d3.select(this).node().getBBox().width + 10
+                    lineList.forEach(item => {
+                        if(item === i){
+                            left = 0
+                            top += 20
+                        }
+                    })
+                    listX.push(left)
+                    listY.push(top)
+                });
+                legend.attr('transform',(d,i) => {
+                    if(i === 0){
+                        return 'translate(0,0)'
+                    }else{
+                        return `translate(${listX[i - 1]},${listY[i - 1]})`
+                    }
+                })
+            }
+        }
+
+    }
 }
\ No newline at end of file