刚做项目碰到一个问题,需要对图例文字加入其他数据,以及进行格式化。查了很多文档以及进行多次实验,现在对有需要的同学提供一个参考,觉得有用点个赞,感谢。
代码片段如下:
legend: {
orient: 'vertical',
type: 'scroll',
icon: 'circle',
right: '10%',
top: 26,
itemWidth: 10,
itemGap: 12,
// selectedMode: false,
data: channels,
formatter: name => {
let params1, params2;
// 图例的 69.43%,150832,name是图例文字描述,for循环是格式化
for(let i=0, len=this.ringChartData.length; i<len; i++) {
if(this.ringChartData[i]['渠道名称'] == name) {
params1 = (this.ringChartData[i]['占比']*100).toFixed(2) + '%';
params2 = this.ringChartData[i]['值'];
};
};
let arr = [
'{a|'+ name +'}',
'{b|'+ params1 +'}',
'{c|'+ params2 +'}',
];
return arr.join('');
},
textStyle: {
rich: {
a: {
width: 50,
padding: [0,14,0,0]
},
b: {
align: 'left',
width: 40,
padding: [0,10,0,0]
},
c: {
align: 'left',
},
}
}
},
series: [
{
name: '访问来源',
type: 'pie',
// hoverAnimation: false,
width: '50%', // 饼图占据canvas的宽度
radius: ['50%', '70%'],
color: ['#3c90f7', '#55bfc0', '#5ebe67', '#f4cd49', '#e05667', '#7c4bd8'],
avoidLabelOverlap: false,
stillShowZeroSum: false,
itemStyle: {
borderColor: '#fff',
borderWidth: 1,
borderType: 'solid'
},
labelLine: {
show: false
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '18',
formatter: '{b}\n{c}'
}
},
data: orgvs
}
]