直接上图片，单纯显示数据，有个问题，无法显示指针百分比数，所以自己判断并赋了max值
//代码不全，只显示赋值部分
this.resultOption.series[1].data[0].value = val;
this.resultOption.series[1].data[0].name = '用电量\nkWh';
myChart.setOption(this.resultOption);
if(val<100){
this.resultOption.series[1].max = 100
}
if(val>100){
this.resultOption.series[1].max = 1000
}
if(val>1000){
this.resultOption.series[1].max = 10000
}
//仪表盘全部配置代码
resultOption:{
series: [
// 外层
{
type: 'gauge',
center: [
'50%',
'50%'
],
radius: '92%', // 1行3个
min: 0,
max: 100,
startAngle: 270,
endAngle: -90,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 2,
color: [
[ 1, '#0ac9d3' ],
],
}
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
},
//（中间有背景颜色那块，刻度，数字 指针）
{
type: 'gauge',
center: [
'50%',
'50%'
],
radius: '80%', // 1行3个
splitNumber: 10,
min: 0,
max: 100,
startAngle: 220,
endAngle: -40,
//刻度样式
axisLine: {
show: true,
roundCap: true,
lineStyle: {
width: 20,
color: [
[
1,
new echarts.graphic.LinearGradient(
0, 0, 1, 0, [
{
offset: 0,
color: 'rgba(0, 205, 214, 1)',
},
{
offset: 0.5,
color: 'rgba(33, 215, 176, 1)',
},
{
offset: 1,
color:'rgba(0, 218, 143,1)',
}
]
)
],
]
}
},
axisLabel: {
show: false,
// distance: 20,
// textStyle: {
// color:'#fff',
// fontSize: '10',
// }
},
axisTick: {
distance:-20,
lineStyle: {
color:'#fff',
width: 1
},
length: 6,
},
splitLine: {
length: 10,
distance:-20,
lineStyle: {
color:'#fff',
width: 2
}
},
pointer: {
show: true,
length: '102%',
width: 5,
},
itemStyle:{
color: '#c3e5fc',
opacity: .6,
},
data: [{
value: 0,
name: '总能耗\nKWh',
title: {
offsetCenter: ['0%', '22%'],
fontSize: 12,
color:'#eee'
},
detail: {
offsetCenter: ['0%', '-18%'],
fontSize: 22,
color:'#eee'
}
}]
},
//（中间的线）
{
type: 'gauge',
center: [
'50%',
'50%'
],
radius: '81%',
startAngle: -90,
endAngle: 270,
axisLine: {
show: true,
lineStyle: {
width: 2,
color: [
[
1,
new echarts.graphic.LinearGradient(
0, 0, 1, 0, [
{
offset: 0,
color: 'rgba(96, 224, 230,.9)',
},
{
offset: 0.5,
color: 'rgba(96, 224, 230, 1)',
},
{
offset: 1,
color:'rgb(36, 140, 172,.7)',
}
]
)
],
]
}
},
splitLine: {
show: false,
},
//刻度数字
axisLabel: {
show: false,
},
//分隔线样式
axisTick: {
show: false
},
},
//二层白色线
{
type: 'gauge',
center: [
'50%',
'50%'
],
radius: '86%',
startAngle: 270,
endAngle: -90,
axisLine: {
show: true,
lineStyle: {
width: 3,
color: [
[
1,
new echarts.graphic.LinearGradient(
0, 0, 1, 0, [
{
offset: 0,
color:'rgba(61, 93, 115,.7)',
},
{
offset: 0.5,
color: 'rgba(177,211,233,0.8)',
},
{
offset: 1,
color:'rgba(61, 93, 115,.7)',
}
]
)
],
]
}
},
splitLine: {
show: false,
},
//刻度数字
axisLabel: {
show: false,
},
//分隔线样式
axisTick: {
show: false
},
},
//中间的线
{
type: 'gauge',
center: [
'50%',
'50%'
],
radius: '60%', // 1行3个
splitNumber: 10,
startAngle: -90,
endAngle: 270,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [
[
1,
new echarts.graphic.LinearGradient(
0, 0, 1, 0, [
{
offset: 0,
color: 'rgba(96, 224, 230, 1)',
},
{
offset: 0,
color: 'rgba(96, 224, 230, 1)',
},
{
offset: 1,
color:'rgb(36, 140, 172,.7)',
}
]
)
],
],
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%',
'50%'
],
radius: '50%', // 1行3个
splitNumber: 10,
startAngle: -90,
endAngle: 270,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式、
color: [
[
1,
new echarts.graphic.LinearGradient(
0, 0, 1, 0, [
{
offset: 0,
color: 'rgba(96, 224, 230,.9)',
},
{
offset: 0.5,
color: 'rgba(96, 224, 230, 1)',
},
{
offset: 1,
color:'rgb(36, 140, 172,.7)',
}
]
)
],
],
width: 2,//刻度背景宽度
shadowBlur: 16,
}
},
textStyle:{
shadowBlur: 19,
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
pointer: {
show: false
},
axisTick: {
show: false
},
detail: {
show: 0
}
},
]
},
