效果圖:
image.png
option ={
backgroundColor:'rgb(4,31,62)',
title: {
text: '{a|' + 30 + '}{c|%}',
x: 'center',
y: 'center',
textStyle: {
rich: {
a: {
fontSize: 10,
color: '#11BBD5'
},
c: {
fontSize: 10,
color: '#11BBD5',
}
}
}
},
legend: {
show: false,
},
series: [
{
type: 'pie',
name: '外圓環(huán)',
radius: ['61%', '63%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
color: 'rgba(17, 187, 213, 1)',
},
},
label: {
show: false,
},
data: [100],
},
{
name: '',
type: 'pie',
radius: ['58%', '45%'],
silent: true,
clockwise: true,
startAngle: 90,
z: 0,
zlevel: 0,
label: {
normal: {
position: "center",
}
},
data: [{
value: 30,
name: "",
itemStyle: {
normal: {
color: 'red',
}
}
},
{
value:70,
name: "",
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: 'transparent'
}
}
}
]
},
{
name: '儀表圖',
type: 'gauge',
radius: '58%',
center: ['50%', '50%'],
startAngle: 0,
endAngle: 359.9,
splitNumber: 40,
hoverAnimation: true,
axisTick: {
show: false,
},
splitLine: {
length: 10,
lineStyle: {
width: 1,
color: 'rgba(17, 187, 213, 1)',
},
},
axisLabel: {
show: false,
},
pointer: {
show: false,
},
axisLine: {
lineStyle: {
opacity: 0,
},
},
detail: {
show: false,
},
data: [
{
value: 0,
name: '',
},
],
},
{
type: 'pie',
name: '內(nèi)環(huán)',
radius: ['40%', '42%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
color: '#11BBD5',
},
},
label: {
show: false,
},
data: [100],
},
]
}