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

图标类型： gauge-speed 

需求为：

1. 数值大于80时，仪表盘上显示为绿色

2. 数值大于50时，仪表盘上显示为黄色

3. 其他数值为红色。注：数值范围为0~100.

   即要实现下述效果：

   

源码如下：

option = {

    series: [{

        type: 'gauge',

        progress: {

            color:'FF0000',

            show: true,

            width: 18

        },

        color:{},//可不用，由于已经在定时器中进行了添加

        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;

    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);