Auto commit

src/components/Pie3D.vue

 <template>
   <div>
-    <p>D3JS实现的3D饼图</p>
     <div id="abc"></div>
   </div>
 </template>
@@ -13,7 +12,7 @@ let config = reactive({
   color:["#5470c6","#91cc75","#fac858","#ee6666","#73c0de"],//颜色
   sfShowLabel:true, //是否显示文本标线
   sfLegend:true, //是否显示图例
-  legendOrient:'horizontal', //图例，横向、纵向
+  legendOrient:'vertical', //图例，横向horizontal、纵向 vertical
   legendType:'scroll', //图例类型，普通图例plain还是 scroll翻页图例
 })
 //基础数据

src/utils/pie.js

@@ -176,8 +176,20 @@ export default function pie(id, width, height, data, x, y, rx, ry, h, config,ir=
                 .enter()
                 .append('g');
         }else{
-            //纵向
-            console.log('纵向')
+            //纵向 vertical
+            legendBox = legendSvg.attr('height',400)
+            .attr('width',200)
+            .style('top',0)
+            .style('left',7)
+            .append('g')
+            .attr('id','legend_svg');
+            legend = legendBox.selectAll('g')
+                .data(data)
+                .enter()
+                .append('g')
+                .attr('transform',(d,i) => {
+                    return `translate(0,${i * 20})`
+                });
         }
         //创建图例前的小圆点样式
         let legendItembox = legend.append('circle')
@@ -355,6 +367,55 @@ export default function pie(id, width, height, data, x, y, rx, ry, h, config,ir=
                     }
                 })
             }
+        }else{
+            let maxWidth = 0 //获取最大宽度
+                legend.each(function(){
+                    if(maxWidth < d3.select(this).node().getBBox().width){
+                        maxWidth = d3.select(this).node().getBBox().width
+                    }
+                })
+                if(config.legendType === 'scroll'){
+                    console.log('翻页')
+                }else{
+                    //普通图例
+                    //计算分组
+                    let totalPage = 1 //总页码
+                    let legendNumHeight = 0 //初始高度
+                    let rowList = [] //普通图例一列显示多少个图例
+                    legend.each(function(d,i){
+                        legendNumHeight += 20
+                        if(legendNumHeight > 400){
+                            legendNumHeight = 0
+                            if(data.length - 1 !== i){
+                                totalPage ++
+                                rowList.push(i)
+                            }
+                        }
+                    })
+                    legendSvg.attr('width',(maxWidth + 10) * totalPage);
+                    let listX = [] //各个图例的X
+                    let listY = [] //各个图例的Y
+                    let left = 0
+                    let top = 0
+                    legend.each(() => {
+                        top += 20
+                        rowList.forEach(item => {
+                            if(item - 1 === i){
+                                left += maxWidth + 10
+                                top = 0
+                            }
+                        })
+                        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]})`
+                        }
+                    })
+                }
         }
 
     }