先看下效果图,实现引导线处百分比数值左右对称效果
先开始想到对引导线上方文本label用 formatter:{d}% {c}万元 表示,但是呈现的结果
最终分别对百分比、数据名、数据值调整padding实现
option = {
backgroundColor: '#000',
color: ['#FF5C5C','#FFC000','#17B1B9','#08B0F9'],
series: [
{
type: 'pie',
radius: ['30%', '35%'],
labelLine: {
show: true,
length: 15, // 第一段线 长度
length2: 105, // 第二段线 长度
},
label:{
color:'#fff',
fontSize: 8,
padding:[-2,-110,2,-110],
formatter:[
'{d|{d}%}',
'{c|{c}}万元',
'{b|{b}}',
].join('\n'),
rich:{
c:{
fontSize: 19,
color:'#fff',
padding:[4,4,-2,0],
},
b: {
padding:[8,0,0,0],
color:'#fff',
fontSize: 10,
},
d:{
color:'#fff',
fontSize: 10,
padding:[-15,70,15,70],
}
}
},
data: [
{value: 1500, name: '政府'},
{value: 1200, name: '其他'},
{value: 1300, name: '混合'},
{value: 1400, name: '企业'}
]
}
]
};
好记性不如烂笔头,总结和记录工作学习中的点点滴滴,如有不对之处还请指教。