Echarts 饼图，legend样式美化
最后样式图：
实现代码：
var myChart = echarts.init(document.getElementById('container'));
let option = {
/*{b}: {c} ({d}%*/
legend: {
orient: 'vertical',
icon: "circle",
itemWidth: 5,
right: 20,
top: 70,
formatter: (name) => {
let data = this.data;
let total = 0;
let target;
for (let i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name === name) {
target = data[i].value;
}
}
let arr = [
'{a|' + name + '}{b|' + target + '}{c|' + ((target / total) * 100).toFixed(2) + '%}'
];
return arr.join('\n')
},
textStyle: {
rich: {
a: {
verticalAlign: 'right',
fontSize: 12,
align: 'left',
// padding:[0,28,0,0],
width: 70
},
b: {
fontSize: 12,
align: 'left',
// padding:[0,28,0,0],
width: 50
},
c: {
fontSize: 12,
align: 'left',
width: 50
}
}
},
},
// color:this.getRandomColor,
series: [
{
center: ['25%', '50%'],
name: '访问来源',
type: 'pie',
radius: ['50%', '60%'],
avoidLabelOverlap: true,
hoverOffset: 0,
hoverAnimation: false,
silent: true,
/*label: {
normal: {
show: false,
position: 'center'
}*/
label: {
show: true,
position: 'center',
textStyle: {
fontSize: '20',
fontFamily: '黑体',
fontWeight: 'bold',
rich: {
d: {
fontSize: 35,
color: '#696969',
},
e: {
fontSize: 17,
color: '#696969',
lineHeight: 25,
}
}
},
formatter: (params) => {
let data = this.data;
let number = 0;
data.forEach((data) => {
number += data.value;
});
return [
'{d|' + number + '}\n' +
'{e|影像数量}'
]
}
// emphasis: {
// show: true,
// textStyle: {
// fontSize: '30',
// fontWeight: 'bold'
// }
// }
},
labelLine: {
normal: {
show: false
}
},
data: this.data
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}富文本标签
https://echarts.baidu.com/option.html#legend.textStyle.rich