echars 饼图使用
阅读原文时间:2023年07月13日阅读:2

option = {

tooltip: {

trigger: 'item',

formatter: '{a} 
{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}\r\n\r\n总人数`;

return html;

},

textStyle: {

fontSize: 15,

color: '#fff'

}

}

},

labelLine: {

show: false

},

data: [

{ value: `${data.red}`, name: '红码人数' },

{ value: `${data.yellow}`, name: '黄码人数' },

{ value: `${data.green}`, name: '绿码人数' }

]

}

]

};

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器