Echart gauge-speed 根据数值改变显示颜色

option = {
    series: [{
        type: 'gauge',
        progress: {
            color:'FF0000',
            show: true,
            width: 18
        },
       
        axisLine: {
            lineStyle: {
                width: 18
            
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            length: 15,
            lineStyle: {
                width: 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,
            width: 18
        },
        
        axisLine: {
            lineStyle: {
                width: 18
             
            }
        },
        //最小刻度
        axisTick: {
            show: false
        },
        
        //大刻度
        splitLine: {
            length: 20,
            lineStyle: {
                width: 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,
            width: 18
        },
        
        axisLine: {
            lineStyle: {
                width: 18
             
            }
        },
        //最小刻度
        axisTick: {
            show: false
        },
        
        //大刻度/分隔线
        splitLine: {
            length:18,
            
            lineStyle: {
                width: 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,
            width: 18
        },
        
        axisLine: {
            lineStyle: {
                width: 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: {
                width: 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);

上述代码效果如下：