实现效果
源于截图
实现代码
option = {
backgroundColor: '#fff',
title: {
text: "设备告警",
textStyle: {
color: '#000',
fontSize: 32,
fontWeight: 'bold'
},
left: 'center',
top:100,
bottom: '69%',
itemGap: 60,
},
tooltip: {
show: false,
},
color: ['#01dadc', '#23cea7', '#5096e0'],
legend: {
orient: 'vertical',
x: 690,
y:120,
data:['危急','严重','一般'],
},
series: [{
name: '一般',
type: 'pie',
//起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
startAngle: 0,
hoverAnimation: false,
tooltip: {
},
radius: ["30%", "47%"],
center: ['50%', '80%'],
label: {
normal: {
show: false,
position: 'center',
color: '#fff',
formatter: function(params) {
return params.value
},
},
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 300,
itemStyle: {
normal: {
color: "rgba(80,150,224,0)"
}
}
},
{
value: 270,
itemStyle: {
normal: {
color: "rgba(80,150,224,1)"
}
}
},
{
value: 30,
itemStyle: {
normal: {
color: "rgba(80,150,224,0.1)"
}
}
},
]
},
{
name: '严重',
type: 'pie',
startAngle: 0,
radius: ['50%', '67%'],
center: ['50%', '80%'],
legendHoverLink: false,
hoverAnimation: false,
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 300,
itemStyle: {
normal: {
color: "rgba(35,206,167,0)"
}
}
},
{
value: 210,
itemStyle: {
normal: {
color: "rgba(35,206,167,1)"
}
}
},
{
value: 90,
itemStyle: {
normal: {
color: "rgba(35,206,167,0.1)"
}
}
},
]
},
{
name: '危急',
type: 'pie',
startAngle: 0,
hoverAnimation: false,
radius: ["70%", "87%"],
center: ['50%', '80%'],
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '10',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 300,
itemStyle: {
normal: {
color: "rgba(1,218,220,0)"
}
}
},
{
value: 240,
itemStyle: {
normal: {
color: "rgba(1,218,220,1)"
}
}
},
{
value: 60,
itemStyle: {
normal: {
color: "rgba(1,218,220,0.1)"
}
}
},
]
}
]
};
这里卿洋
愿喜❤️