let pieColors1 = ['rgba(255, 244, 92, 1)', 'rgba(0, 132, 255, 1)', 'rgba(0, 212, 135, 1)']
let pieColors2 = ['rgba(255, 244, 92, 0.5)', 'rgba(0, 132, 255, 0.5)', 'rgba(0, 212, 135, 0.5)']
let obj = {
data: [
{ value: 1048, name: '通讯线路异常' },
{ value: 735, name: '网络异常' },
{ value: 580, name: '数据超标' },
],
total: 1048 + 735 + 580,
}
option = {
backgroundColor: 'rgba(0,0,0,0.5)',
// color: pieColors,
title: {
text: "{title|预警类别}",
textStyle: {
rich: {
title: {
fontSize: 16,
fontWeight: 400,
color: '#fff',
// align: 'center',
// verticalAlign: 'middle'
}
},
},
x: "center",
y: "center",
},
series: [
{
name: 'pie1',
z: 20,
type: 'pie',
radius: ['36%', '56%'],
avoidLabelOverlap: false,
label: {
formatter: params => {
// console.log(params)
return `{num|${Math.round(params.value * 100 / obj.total)}%}\n{text|${params.name}}`
},
alignTo: 'labelLine',
rich: {
num: {
fontSize: 18,
align: 'left',
padding: [0, 0, 10, 0]
},
text: {
fontSize: 14,
align: 'left',
},
}
},
labelLine: {
length: 32,
length2: 80,
lineStyle: {
width: 1
}
},
itemStyle: {
color: function (colors) {
return pieColors1[colors.dataIndex];
}
},
data: obj.data.map((item, index) => {
return {
label: {
color: pieColors1[index],
},
...item
}
})
},
{
name: 'pie2',
type: 'pie',
radius: ['55%', '66%'],
avoidLabelOverlap: false,
label: {
formatter: params => {
// console.log(params)
return ``
},
},
labelLine: {
show: false,
},
itemStyle: {
color: function (colors) {
return pieColors2[colors.dataIndex];
}
},
data: obj.data
},
]
};