先看效果图:
参数配置option:
option = {
title: {
text: '98%',
textStyle: {
color: '#f97060',
fontSize: 24
},
subtext: '通讯合格率',
subtextStyle: {
color: '#84b4be',
fontSize: 16
},
x: 'center',
y: '230'
},
tooltip: {
formatter: "{a} <br/>{b} : {c}%"
},
series: [{
type: 'gauge',
center: ['50%', '50%'],
radius: '38%',
startAngle: 180,
endAngle: 0,
axisLine: {
show: true,
lineStyle: {
width: 1,
color: [
[1, '#84b4be']
]
}
},
axisLabel: {
show: false,
},
axisTick: {
show: 0,
},
splitLine: {
show: 0,
},
pointer: {
show: 0,
},
detail: {
show: 0
},
}, //里面的细圆圈
{
min: 0,
max: 100,
startAngle: 180,
endAngle: 0,
name: '通讯合格率',
type: 'gauge',
detail: {
show: false
},
axisLine: {
lineStyle: {
width: 100,
color: [
[98/100,'#328ad1'],
[1, '#08368b']
]
}
},
pointer: {
show: false,
},
itemStyle: {
color: '#bbb'
},
axisTick: {
show: false
},
splitLine: {
show: false
},
splitNumber: 1,
axisLabel: {
formatter: function(value, index) {
return "\n\n" + value
},
show: true,
textStyle: {
color: '#84b4be',
fontSize: '20',
}
},
data: [{
value: 98
}]
} //外面的大圆圈和0,100两个刻度
]
};
最大值:100,最小值:0,当前值:98
其余的参数(标题位置,颜色)可以根据自己项目需求调整,总之原理就是2个轮盘图拼的。