问题:
小程序中使用饼图,在分布均匀的情况下label内容不会被遮挡(如图一);如果存在几个小数据分布在一侧的话会出现个别label超出上边界被遮挡(如图二);需要调整使label文字不被遮挡,调整后的(如图三)。
解决方案:
- 推荐修改 startAngle 的起始角度值,让图表重新摆放 label 的位置。
- 通过修改echarts饼图角度起始角度位置和生长方向
minAngle: 15,//最小角度 startAngle:270, //起始角度
代码:
import * as echarts from '../../../ec-canvas/echarts';
var optionAnalysis1 = {
animationDuration: 100,
color: ['#eb6c10', '#cf2306', '#ebd970', '#b1c75b', '#54874e', '#ab4838'],
tooltip: {
trigger: 'item',
formatter: '{b}: {c}天({d}%)',
},
series: [{
type: 'pie',
minAngle: 15,//最小角度
startAngle:270, //起始角度
radius: '60%',
center: ['50%', '50%'],
labelLine:{
normal:{
length: 5
}
},
label: {
formatter: '{b}\n{c}天\n{d}%',
fontSize: 10
},
itemStyle: {
opacity: 0.7
},
data: []
}]
}
参考文章:
饼图label超出边界,label被遮挡,但是labelLine还在
echarts饼图角度起始角度位置和生长方向