option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
x: 'right',
y: 'center',
align: 'left',//文字永远在左侧
icon: 'circle',// 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
data: [
{
name: '红码人数',
textStyle: {
fontSize: 12,
color: 'white'
}
},
{
name: '黄码人数',
textStyle: {
fontSize: 12,
color: 'white'
}
},
{
name: '绿码人数',
textStyle: {
fontSize: 12,
color: 'white'
}
}
],
formatter(name) { //文字显示图形数据
var index = 0;
var clientlabels = ['红码人数','黄码人数','绿码人数'];
var clientcounts = [`${data.red}`,`${data.yellow}`,`${data.green}`];
clientlabels.forEach((value,i) => {
if (value === name){
index = i;
}
});
return `${name} ${clientcounts[index]}`;
}
},
color: ['red', 'yellow', 'green'],
series: [
{
name: '',
type: 'pie',
radius: ['35%', '45%'],
center: ['35%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center',
formatter(argument) {
var html;
html = `${data.number}
总人数`;
return html;
},
textStyle: {
fontSize: 15,
color: '#fff'
}
}
},
labelLine: {
show: false
},
data: [
{ value: `${data.red}`, name: '红码人数' },
{ value: `${data.yellow}`, name: '黄码人数' },
{ value: `${data.green}`, name: '绿码人数' }
]
}
]
};