echarts配置渐变仪表盘

var resultoption = {
// grid: {
// top: ‘5%’,
// left: ‘5%’,
// right: ‘5%’,
// bottom: ‘5%’
// },
series: [
{
type: ‘gauge’,
center: [‘50%’, ‘55%’],
radius: ‘90%’,
startAngle: 220,
endAngle: -40,
// startAngle: 200,
// endAngle: -20,
min: 0,
max: 100,
axisLine: {
show: true,
lineStyle: {
width: 3,
color: [
[
resultValue / 100, new echarts.graphic.LinearGradient(
0, 0, 1, 0, [{
offset: 0,
color: ‘rgba(22, 148, 255, 0.1)’,
},
{
offset: 1,
color: ‘rgba(22, 148, 255, 1)’,
}
]
)
],
[
1, ‘rgba(255,255,255, 0)’
]
]
}
},
axisTick: {
show: 0,
},
splitLine: {
show: 0,
},
axisLabel: {
show: 0
},
pointer: {
show: 0,
},
detail: {
show: 0
},
data: [{
value: 60,
}]
},
// 外围刻度
{
type: ‘gauge’,
center: [‘50%’, ‘55%’],
radius: ‘85%’, // 1行3个
min: 0,
max: 100,
// startAngle: 200,
// endAngle: -20,
startAngle: 220,
endAngle: -40,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [
[
resultValue / 100, new echarts.graphic.LinearGradient(
0, 0, 1, 0, [{
offset: 0,
color: ‘#32abff’,
},
{
offset: 1,
color: ‘#32abff’,
}
]
)
],
[
1, ‘#32abff’
]
],
fontSize: 20,
width: 2,
opacity: 1, //刻度背景宽度
}
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
pointer: {
show: false
},
axisTick: {
show: false
},
detail: {
show: 0
}
},
// 外围刻度
{
type: ‘gauge’,
center: [‘50%’, ‘55%’],
radius: ‘85%’, // 1行3个
splitNumber: 10,
min: 0,
max: 100,
startAngle: 220,
endAngle: -40,
axisTick: {
show: true,
lineStyle: {
color: ‘rgba(0, 142, 255, 0.4)’,
width: 1
},
length: 8
}, //刻度样式
axisLine: {
show: true,
lineStyle: {
width: 50,
color: [
[
resultValue / 100, new echarts.graphic.LinearGradient(
0, 0, 1, 0, [{
offset: 0,
color: ‘rgba(0, 132, 255, 0.09)’,
},
{
offset: 1,
color: ‘rgba(0, 132, 255, .4)’,
}
]
)
],
[
1, ‘rgba(255,255,255, 0)’
]
]
}
},
splitLine: {
show: true,
length: 10,
lineStyle: {
color: ‘rgba(0, 142, 255, 0.4)’
}
}, //分隔线样式
axisLabel: {
show: true,
distance: 2,
textStyle: {
color: ‘rgba(29, 109, 178, 0.8)’,
fontSize: ‘12’,
fontWeight: ‘bold’
}
},
pointer: {
show: 0
},
detail: {
show: 0
}
}, {
type: ‘gauge’,
center: [‘50%’, ‘55%’],
radius: ‘65%’, // 1行3个
splitNumber: 10,
min: 0,
max: 100,
startAngle: 220,
endAngle: -40,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [
[
resultValue / 100, new echarts.graphic.LinearGradient(
0, 0, 1, 0, [{
offset: 0,
color: ‘rgba(66, 180, 255, 0.09)’,
},
{
offset: 1,
color: ‘rgba(66, 180, 255, 1)’,
}
]
)
],
[
1, ‘rgba(66, 180, 255, 0.5)’
]
],
fontSize: 20,
width: 2,
opacity: 1, //刻度背景宽度
}
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
pointer: {
show: false
},
axisTick: {
show: false
},
detail: {
show: 0
}
},
// 内侧指针、数值显示
{
name: “”,
center: [‘50%’, ‘50%’],
type: ‘gauge’,
radius: ‘74%’, // 1行3个
splitNumber: 10,
min: 0,
max: 100,
startAngle: 220,
endAngle: -40,
axisLine: {
show: true,
lineStyle: {
width: 50,
color: [
[
resultValue / 100, new echarts.graphic.LinearGradient(
0, 0, 1, 0, [{
offset: 0,
color: ‘rgba(0, 199, 187, 0)’,
},
{
offset: 1,
color: ‘rgba(0, 199, 187, 0)’,
}
]
)
],
[
1, ‘rgba(255,255,255, 0)’
]
]
}
},
axisTick: {
show: 0,
},
splitLine: {
show: 0,
},
axisLabel: {
show: 0
},
pointer: {
show: true,
length: ‘102%’,
width: 5,
color: ‘#9bd6ff’
},
title: {
show: false,
offsetCenter: [0, ‘65%’],
color: ‘rgba(0, 199, 187, 1)’,
fontSize: 20,
/* backgroundColor: “#D8d8d8”,/
borderRadius: 21,
padding: 5
},
detail: {
show: false,
offsetCenter: [0, 0],
textStyle: {
fontSize: 25,
color: ‘rgba(0, 199, 187, 1)’
},
formatter: [
‘{value}’ + (’%’ || ‘’),
/ ‘{name|’ + “稳定” + ‘}’*/
].join(’\n’),
rich: {
name: {
fontSize: 20,
lineHeight: 10,
color: ‘rgba(0, 199, 187, 1)’,
padding: [30, 0, 0, 0]
}
}
},
itemStyle: {
normal: {
color: ‘#9bd6ff’,
}
},
data: [{
value: resultValue,
name: “”
}]
}
]
}
//调用
sdVolt(val) {
var _this = this;
_this.LOADRATE = val.LOADRATE; resultoption.series.forEach(function(item, index) {
item.axisLine.lineStyle.color[0][0] = _this.LOADRATE / 100
if(index == 4) {
item.data[0].value = _this.LOADRATE
}
})
_this.echartsInit(“ganuTb”, resultoption)
},
//公共echarts生成块
echartsInit: function(id, option) {
var myEcts = this.$echarts.init(document.getElementById(id));
setTimeout(() => {
myEcts.hideLoading();
myEcts.setOption(option, true);
}, 500);
window.addEventListener(“resize”, function() {
myEcts.resize();
});
},

生成的仪表盘就是这个颜色 里面的圆圈和下面的光圈是背景图