Echart gauge-speed根据数值改变显示颜色
图标类型： gauge-speed
需求为：
数值大于80时，仪表盘上显示为绿色
数值大于50时，仪表盘上显示为黄色
其他数值为红色。注：数值范围为0~100.
即要实现下述效果：
源码如下：
option = {
series: [{
type: 'gauge',
progress: {
color:'FF0000',
show: true,
width: 18
},
color:{},//可不用，由于已经在定时器中进行了添加
axisLine: {
lineStyle: {
width: 18
}
},
axisTick: {
show: false
},
splitLine: {
length: 15,
lineStyle: {
width: 2,
color: '#CCC'
}
},
axisLabel: {
distance: 25,
color: '#999',
fontSize: 20
},
anchor: {
show: true,
showAbove: true,
size: 25,
itemStyle: {
borderWidth: 10
}
},
title: {
show: false
},
detail: {
valueAnimation: true,
fontSize: 80,
offsetCenter: [0, '70%'],
color:'#FF0000'
},
data: [{
value: 70
}]
}]
};
setInterval(function () {//定时器
var RanValue=(Math.random() * 100).toFixed(2) - 0;
option.series[0].data[0].value = RanValue;//添加随机数用于动态显示
if (RanValue>80) {
option.series[0].detail.color="#00FF00";
option.series[0].color="#00FF00";
}
else if (RanValue>50) {
option.series[0].detail.color="#FFFF00";
option.series[0].color="#FFFF00";
}else{
option.series[0].detail.color="#FF0000";
option.series[0].color="#FF0000";
}
myChart.setOption(option, true);
}, 2000);