// 数据
total = [
{
name: '土建',
value: 2,
itemStyle: {
normal:{ color: '#37AAFF'}
}
},
{
name: '线路',
value: 2,
itemStyle: {
normal:{ color: '#0BE8D9'}
}
},
{
name: '变电',
value: 2,
itemStyle: {
normal:{ color: '#FFC90D'}
}
}
];
// 配置
option = {
title: {
// 总数样式
text: '总数',
subtext: total.length,
x: 'center',
y: '41%',
// 总数字体
textStyle: {
fontWeight: '600',
fontSize: 30,
color: 'red',
},
// 数量样式
subtextStyle: {
fontSize: 50,
color: 'orange'
},
},
// 鼠标移动到图上时的提示消息
tooltip: {
show: true,
trigger: 'item',
// formatter可以为函数，自定义提示信息
// formatter: "{b}：{c}个<br/>占比：({d}%)"
formatter: function(item) {
return `<p> ` + item.name + ` : 共 ` + item.value + ` 个 </p> <br> <p> 占比 ` + item.rate +` % </p>`
}
},
series: [{
itemStyle: {
normal: {
},
},
type: 'pie',
stillShowZeroSum: true,
radius: ['60%', '65%'],
label: {
normal: {
position: 'inner',
show: false,
textStyle: {
color: '#fff',
fontSize: 12
}
}
},
labelLine: {
normal: {
show: false
}
},
data: total
},
// 内层圆线
{
type: 'pie',
hoverAnimation: false, //鼠标经过的特效
radius: ['55%', '54%'],
center: ['50%', '50%'],
startAngle: 225,
labelLine: {
normal: {
show: false
}
},
label: {
normal: {
position: 'center'
}
},
data: [{
value: 1,
itemStyle: {
normal: {
color: 'rgba(32, 143, 173, 1)'
}
},
},
]
},
]
};