Auto commit

上级 867acc1f
<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翻页图例
})
//基础数据
......
......@@ -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]})`
}
})
}
}
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册