Auto commit

src/components/Pie3D.vue

@@ -14,7 +14,7 @@ let config = reactive({
   sfShowLabel:true, //是否显示文本标线
   sfLegend:true, //是否显示图例
   legendOrient:'horizontal', //图例，横向、纵向
-  legendType:'plain', //图例类型，普通图例plain还是 scroll翻页图例
+  legendType:'scroll', //图例类型，普通图例plain还是 scroll翻页图例
 })
 //基础数据
 const salesData = [

src/utils/pie.js

@@ -203,7 +203,109 @@ export default function pie(id, width, height, data, x, y, rx, ry, h, config,ir=
         if(config.legendOrient === 'horizontal'){
             //判断是普通图例还是翻页图例
             if(config.legendType === 'scroll'){
-                console.log('scroll')
+                legendSvg.attr('width',700 - 80);
+                    //计算每一个图例的距离
+                    let list = []
+                    let left = 0
+                    legend.each(function(){
+                        left += d3.select(this).node().getBBox().width + 10
+                        list.push(left)
+                    })
+                    legend.attr('transform',function(d, i){
+                        if(i === 0){
+                            return 'translate(0,0)'
+                        }else {
+                            return `translate(${list[i - 1]},0)`
+                        }
+                    })
+                    //图例宽度大于盒子宽度
+                    if(legendSvg.node().getBBox().width > (700 - 80)){
+                        //获取总页数
+                        let legendNumLength = 0
+                        let totalPage = 1 //总页数
+                        let curPage = 1 //翻页定义当前页数
+                        let transitionX = 0 //需要移动图例整体所占的距离
+                        let lineList = [] //如果是普通图例判断一行显示多少个
+                        legend.each(function(d,i){
+                            legendNumLength += d3.select(this).node().getBBox().width + 10
+                            if(legendNumLength > (700 - 80 - (d3.select(this).node().getBBox().width + 10))){
+                                legendNumLength = 0
+                                //避免移动到最后一页多加一夜
+                                if(data.length - 1 !== i){
+                                    lineList.push(i)
+                                    totalPage++
+                                }
+                            }
+                        })
+                        //定义横向翻页的svg
+                        const legendPageSvg = d3.select(id)
+                            .append('svg')
+                            .attr('width',100)
+                            .attr('height',20)
+                            .style('position','absolute')
+                            .style('top',400 - 30)
+                            .style('left',700 - 80);
+                        let sym = d3.symbol().type(d3.symbolTriangle).size(100);
+
+                        const pageBox = legendPageSvg.append('g')
+                            .attr('id','legend_page')
+                            .attr('transform','translate(15,8)');
+
+                            //定义左侧翻页符号
+                        pageBox.append('path')
+                            .attr('d',sym)
+                            .attr('fill','green')
+                            .attr('transform','rotate(30)')
+                            .style('cursor','pointer')
+                            .on('click',function(){
+                                if(curPage > 1){
+                                    let legendNumLength = 0
+                                    let curLength = 0
+                                    legend.each(function(d,i){
+                                        legendNumLength += d3.select(this).node().getBBox().width + 10
+                                        if(legendNumLength <= 700 - 80){
+                                            curLength = legendNumLength
+                                        }
+                                    })
+                                    transitionX -= curLength
+                                    legendBox.transition()
+                                        .duration(500)
+                                        .attr('transform',`translate(-${transitionX}, 0)`);
+                                    curPage--
+                                    legendText.text(`${curPage}/${totalPage}`)
+                                }
+                            });
+                        //页码
+                        const legendText = pageBox.append('text')
+                            .text(`${curPage}/${totalPage}`)
+                            .attr('fill','red')
+                            .attr('font-size',12)
+                            .attr('transform','translate(10,5)');
+                        //右侧翻页按钮
+                        pageBox.append('path')
+                            .attr('d',sym)
+                            .attr('fill','green')
+                            .attr('transform','translate(40,0) rotate(-30)')
+                            .style('cursor','pointer')
+                            .on('click',function(){
+                                if(curPage < totalPage){
+                                    let legendNumLength = 0
+                                    let curLength = 0
+                                    legend.each(function(d,i){
+                                        legendNumLength += d3.select(this).node().getBBox().width + 10
+                                        if(legendNumLength <= 700 - 80){
+                                            curLength = legendNumLength
+                                        }
+                                    });
+                                    transitionX += curLength
+                                    legendBox.transition()
+                                        .duration(500)
+                                        .attr('transform',`translate(-${transitionX}, 0)`);
+                                    curPage++
+                                    legendText.text(`${curPage}/${totalPage}`)
+                                }
+                            });
+                    }
             }else{
                 //类型是普通图例
                 legendSvg.attr('width',700 - 20);