option = { series: [{ type: 'gauge', progress: { color:'FF0000', show: true, 18 }, axisLine: { lineStyle: { 18 } }, axisTick: { show: false }, splitLine: { length: 15, lineStyle: { 2, color: '#CCC' } }, axisLabel: { distance: 25, color: '#999', fontSize: 20 }, anchor: { show: true, showAbove: true, size: 25, itemStyle: { borderWidth: 10 } }, title: { show: false }, detail: { valueAnimation: true, fontSize: 80, offsetCenter: [0, '70%'], color:'#FF0000' }, data: [{ value: 70 }] }] }; setInterval(function () { var RanValue=(Math.random() * 100).toFixed(2) - 0; var str="[0.3, '#67e0e3']"; option.series[0].data[0].value = RanValue; if (RanValue>80) { option.series[0].detail.color="#00FF00"; option.series[0].color="#00FF00"; } else if (RanValue>50) { option.series[0].detail.color="#FFFF00"; option.series[0].color="#FFFF00"; }else{ option.series[0].detail.color="#FF0000"; option.series[0].color="#FF0000"; } myChart.setOption(option, true); }, 2000);
echart Gauge配置
option = { series: [{ type: 'gauge', progress: { color:'FF0000', show: true, 18 }, axisLine: { lineStyle: { 18 } }, //最小刻度 axisTick: { show: false }, //大刻度 splitLine: { length: 20, lineStyle: { 2, color: '#CCC' }, show:function(value) { switch(value) { case 90: return true; default:return false; } }, }, //表盘数值 axisLabel: { distance: 25, color: '#999', fontSize: 20, show:false, }, //锚点 anchor: { show: false, showAbove: true, size: 25, itemStyle: { borderWidth: 10 } }, //指针 pointer:{ show:false, }, title: { show: false }, detail: { valueAnimation: true, fontSize: 80, offsetCenter: [0, '7%'],//数值与表盘正中偏移距离 color:'#FF0000' }, //初始数值 data: [{ value: 70 }] }] }; setInterval(function () { var RanValue=(Math.random() * 100).toFixed(2) - 0; var str="[0.3, '#67e0e3']"; option.series[0].data[0].value = RanValue; if (RanValue>80) { option.series[0].detail.color="#00FF00"; option.series[0].color="#00FF00"; } else if (RanValue>50) { option.series[0].detail.color="#FFFF00"; option.series[0].color="#FFFF00"; }else{ option.series[0].detail.color="#FF0000"; option.series[0].color="#FF0000"; } myChart.setOption(option, true); }, 2000);
测试地址:https://echarts.apache.org/examples/zh/editor.html?c=gauge-speed
option = { series: [{ type: 'gauge', progress: { color:'FF0000', show: true, 18 }, axisLine: { lineStyle: { 18 } }, //最小刻度 axisTick: { show: false }, //大刻度/分隔线 splitLine: { length:18, lineStyle: { 4, color:'#FFF' }, distance:-18, show:true }, //表盘数值 axisLabel: { distance: 25, color:'#FFF', fontSize: 40, show:true, formatter: function (value) { switch (value) { case 50: return value; case 80: return value; default: return ''; } }, }, //锚点 anchor: { show: false, showAbove: true, size: 25, itemStyle: { borderWidth: 10 } }, //指针 pointer:{ show:false, }, title: { show: false }, detail: { formatter:'{value}%', valueAnimation: true, fontSize: 80, offsetCenter: [0, '7%'],//数值与表盘正中(锚点)偏移距离 color:'#CCC', }, //初始数值 data: [{ value: 70 }] }] }; setInterval(function () { var RanValue=(Math.random() * 100).toFixed(2) - 0; option.series[0].data[0].value = RanValue; if (RanValue>80) { option.series[0].detail.color="#00FF00"; option.series[0].color="#00FF00"; } else if (RanValue>50) { option.series[0].detail.color="#FFFF00"; option.series[0].color="#FFFF00"; }else{ option.series[0].detail.color="#FF0000"; option.series[0].color="#FF0000"; } myChart.setOption(option, true); }, 2000);
上述代码效果如下:
import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom, 'dark'); var option; option = { series: [{ type: 'gauge', progress: { color:'FF0000', show: true, 18 }, axisLine: { lineStyle: { 18, color: [ [0.5, 'rgba(255,0,0,0.1)'], [0.8, 'rgba(255,255,10,0.1)'], [1, 'rgba(0,255,0,0.1)'] ] } }, //最小刻度 axisTick: { show: false }, //大刻度/分隔线 splitLine: { length:18, lineStyle: { 4, color:'auto' }, distance:-18, show:true }, //表盘数值 axisLabel: { distance: 25, color:'#FFF', fontSize: 40, show:true, formatter: function (value) { switch (value) { case 50: return value; case 80: return value; default: return ''; } }, }, //锚点 anchor: { show: false, showAbove: true, size: 25, itemStyle: { borderWidth: 10 } }, //指针 pointer:{ show:false, }, title: { show: false }, detail: { formatter:'{value}%', valueAnimation: true, fontSize: 80, offsetCenter: [0, '7%'],//数值与表盘正中(锚点)偏移距离 color:'#CCC', }, //初始数值 data: [{ value: 70 }] }] }; setInterval(function () { var RanValue=(Math.random() * 100).toFixed(2) - 0; option.series[0].data[0].value = RanValue; if (RanValue>80) { option.series[0].detail.color="#00FF00"; option.series[0].color="#00FF00"; } else if (RanValue>50) { option.series[0].detail.color="#FFFF00"; option.series[0].color="#FFFF00"; }else{ option.series[0].detail.color="#FF0000"; option.series[0].color="#FF0000"; } myChart.setOption(option, true); }, 2000); option && myChart.setOption(option);
上述代码效果如下: