使用color: 'auto'
来实现文字和指针颜色一致。
getecharts4: function () {
window.addEventListener('resize', this.getecharts4)
var chartDom = document.getElementById('main4');
var myChart = echarts.init(chartDom);
var option = {
series: [{
type: 'gauge',
startAngle: 180,
radius: '110%',
endAngle: 0,
center: ['50%', '75%'],
min: 0,
max: 100,
splitNumber: 5,
axisLine: {
lineStyle: {
width: 3,
color: [
[0.25, '#20dd0c'],
[0.5, '#ffe535'],
[0.75, '#f85801'],
[1, '#ee2e38']
]
}
},
pointer: {
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
length: '50%',
width: 5,
offsetCenter: [0, '-20%'],
itemStyle: {
color: 'auto'
}
},
splitLine: {
show: false,
length: 20,
lineStyle: {
color: 'auto',
width: 0
}
},
axisLabel: {
color: '#fff',
fontSize: 12,
distance: -50,
},
title: {
offsetCenter: [0, '30%'],
fontSize: 12,
color: '#55bcd5',
},
detail: {
fontSize: 12,
color: 'auto',
valueAnimation: true,
offsetCenter: [0, 0],
textStyle: {
padding: [0, 0, 0, 0],
fontSize: 14,
fontWeight: '500'
},
formatter: function (value) {
if (value <= 25) {
return '正常';
} else if (value <= 50) {
return '注意';
} else if (value <= 75) {
return '异常';
} else if (value <= 100) {
return '严重';
}
}
},
data: [{
value: 70,
fontSize: 10,
name: '成绩评定'
}]
}]
};
myChart.clear()
myChart.resize()
option && myChart.setOption(option);
},