echarts渲染仪表盘的时候,需要让仪表盘的指针颜色根据数值区间动态变化。
drawEcharts() {
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(this.$refs.echarts)
var color;
if (this.heduanSum >= 90 && this.heduanSum <= 100) {
color = '#00b4ff'; // RHI 在 90 到 100 之间
} else if (this.heduanSum >= 75 && this.heduanSum < 90) {
color = '#95c751'; // RHI 在 75 到 90 之间
} else if (this.heduanSum >= 60 && this.heduanSum < 75) {
color = '#fffa04'; // RHI 在 60 到 75 之间
} else if (this.heduanSum >= 40 && this.heduanSum < 60) {
color = '#ffa400'; // RHI 在 40 到 60 之间
} else if (this.heduanSum < 40) {
color = '#ff0101'; // RHI 小于 40
}
var option = {
series: [
{
name: '内层数据刻度',
type: 'gauge',
radius: '120%',
min: 0,
max: 100,
startAngle: 220, //开始刻度的角度
endAngle: -40, //结束刻度的角度
splitNumber: 5,
center: ['50%', '58%'],
axisLine: {
lineStyle: {
width: 0,
color: [
[20, "rgba(0, 132, 255, 1.00)"],
[40, "rgba(21, 253, 250, 1.00)"],
[60, "rgba(47, 233, 146, 1.00)"],
[80, "rgba(222, 116, 30, 1.00)"],
[100, "rgba(218, 57, 95, 1.00)"],
],
}
},
splitLine: {
length: 0,
lineStyle: {
width: 0,
color: '#ffffff'
}
},
axisTick: {
lineStyle: {
width: 0,
color: '#ffffff'
}
},
axisLabel: {
color: 'rgb(0,191,255)',
distance: 10,
fontSize: 10,
show: false
},
detail: {
show: false,
formatter: "{value}%",
offsetCenter: ['0', '50%'],
fontSize: 16,
color: color
},
itemStyle: {
normal: {
color: color
}
},
pointer: {
width: 3,
length: '90%',
itemStyle: {
color: color // 设置指针颜色为 #3ce6fd
}
},
data: [{
value: this.heduanSum
}],
silent: false
},
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},