實現(xiàn)效果
源于截圖
實現(xiàn)代碼
option = {
backgroundColor: '#fff',
title: {
text: "設(shè)備告警",
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:['危急','嚴(yán)重','一般'],
},
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: '嚴(yán)重',
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)"
}
}
},
]
}
]
};
這里卿洋
愿喜??
