自定义变色仪表盘echarts gauge配置项内容和展示

配置项如下
      option = {
    tooltip: {},
    grid: {
        left: '0%',
        right: '0%',
        bottom: '0%',
        top: '0%',
        containLabel: true,
        borderWidth: '0'
    },
    series: [{
        name: '业务指标',
        type: 'gauge',
        splitNumber: 13, // 分割段数,默认为5
        z: 8,
        min: 0,
        max: 130,
        axisLine: { // 坐标轴线
            lineStyle: { // 属性lineStyle控制线条样式
                color: [
                    [1.1, '#11ffbd'],
                    [0.462, '#19affb'],
                    [0.692, '#ff8008'],
                    [0.923, '#ff0000'],
                    ['1', '#ca002a']
                ],
                width: 0
            }
        },
        axisTick: { // 坐标轴小标记
            splitNumber: 5, // 每份split细分多少段
            length: 10, // 属性length控制线长
            lineStyle: { // 属性lineStyle控制线条样式
                color: 'auto',
                width: 2,
            }
        },
        axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
            formatter: function(v) {
                switch (v + '') {
                    case '0':
                        return '0%';
                    case '30':
                        return '30%';
                    case '60':
                        return '60%';
                    case '90':
                        return '90%';
                    case '120':
                        return '120%';
                    case '130':
                        return '严重超标';

                }
            },
            textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                color: 'auto'
            }
        },
        splitLine: { // 分隔线
            show: true, // 默认显示,属性show控制显示与否
            length: 20, // 属性length控制线长
            lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
                color: 'auto',
                width: 2,
            }
        },
        pointer: {
            width: 10
        },
        title: {
            show: true,
            offsetCenter: [0, '-40%'], // x, y,单位px
            textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                fontWeight: 'bolder'
            }
        },
        detail: { //'{value}%'
            formatter: function(value) {

                var zhuangtai = " ";

                if (value <= 30) {
                    zhuangtai = "达标";
                } else if (value > 30 && value <= 60) {
                    zhuangtai = "良好";
                } else if (value > 60 && value <= 90) {
                    zhuangtai = "一般";
                } else if (value > 90 && value <= 120) {
                    zhuangtai = "超标";
                } else if (value > 120) {
                    zhuangtai = "严重超标";
                }

                // alert(zhuangtai)

                value = zhuangtai + '\n' + value + "%";
                return value;
            },
            textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                color: 'auto',
                fontWeight: 'bolder',
                lineHeight: 25,
                fontSize: 16,
            }
        },
        //  达标、良好、一般、超标、严重超标
        data: [{
            value: 65
        }]
    }]
};
    
截图如下