echarts 仪表盘 渐变填充
看了很多资料有的用两个表重叠有的各种改颜色。有的版本号低。话不多说看下面:
版本 “echarts”: “^5.4.3”,
效果
var chartDom = document.getElementById('echarts_cpu');
var myChart = echarts.init(chartDom);
var option;
const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: 'rgba(255,136,136,1)',
},
{
offset: 1,
color: 'rgba(217,35,36,1)',
},
]);
option = {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
center: ['50%', '100%'],
radius: '160%',
min: 0,
max: 1,
splitNumber: 8,
// 填充部分显示
progress: {
show: true,
width: 18,
},
itemStyle: {
// 填充颜色
color: color,
},
axisLine: {
lineStyle: {
width: 18,
// 背景色
color: [[1, '#999']],
}
},
pointer: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
length: 10,
distance: 0,
lineStyle: {
//刻度色
color: color,
width: 4,
}
},
axisLabel: {
color: '#464646',
fontSize: 20,
distance: -50,
rotate: 'tangential',
formatter: function (value) {
}
},
title: {
offsetCenter: [0, '-10%'],
fontSize: 20
},
detail: {
fontSize: 24,
offsetCenter: [0, '-40%'],
valueAnimation: true,
formatter: function (value) {
return Math.round(value * 100) + '%';
},
color: 'red'
},
data: [
{
value: 0.7,
name: '平均占用'
}
]
},
]
};
option && myChart.setOption(option);