使用echarts 5.0绘制特殊样式的仪表盘

先看实现效果：

option = {
    series: [
        {
        type: 'gauge',
        radius:'85%',
        startAngle: 225,
        endAngle: -45,
        axisLine: {
            lineStyle: {
                width: 1,
                color: [
                    [1, '#000']
                ]
            }
        },

       
        axisTick: {
            show:false
        },
        splitLine: {
           show:false
        },
        axisLabel: {
            show:false
        },
    },
    {
        type: 'gauge',
        radius:'80%',
        startAngle: 270*(1-0)-45,
        endAngle: 270*(1-0.3)-44,
        axisLine: {
            lineStyle: {
                width: 1,
                color: [
                    [1, '#FF6E76']
                ]
            }
        },
        
        axisTick: {
            show:false
        },
        splitLine: {
           show:false
        },
        axisLabel: {
            show:false
        },
    },{
        type: 'gauge',
        radius:'80%',
        startAngle: 270*(1-0.3)-45,
        endAngle: 270*(1-0.6)-44,
        axisLine: {
            lineStyle: {
                width: 4,
                color: [
                    [1, '#FDDD60']
                ]
            }
        },
        
        axisTick: {
            show:false
        },
        splitLine: {
           show:false
        },
        axisLabel: {
            show:false
        },
    },{
        type: 'gauge',
        radius:'80%',
        startAngle: 270*(1-0.6)-45,
        endAngle: 270*(1-0.9)-44,
        axisLine: {
            lineStyle: {
                width: 8,
                color: [
                    [1, '#58D9F9']
                ]
            }
        },
        
        axisTick: {
            show:false
        },
        splitLine: {
           show:false
        },
        axisLabel: {
            show:false
        },
    },
    {
        type: 'gauge',
        radius:'80%',
        startAngle: 270*(1-0.9)-45,
        endAngle: -45,
        axisLine: {
            lineStyle: {
                width: 12,
                color: [
                    [1, '#7CFFB2']
                ]
            }
        },
        
        axisTick: {
            show:false
        },
        splitLine: {
           show:false
        },
        axisLabel: {
            show:false
        },
    },{
        type: 'gauge',
        startAngle: 225,
        endAngle: -45,
        radius:'65%',
        min: 0,
        max: 1,
        axisLine: {
            lineStyle: {
                width: 0,
                color: [
                    [0.3, '#FF6E76'],
                    [0.6, '#FDDD60'],
                    [0.9, '#58D9F9'],
                    [1, '#7CFFB2']
                ]
            }
        },
        pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '12%',
            width: 20,
            offsetCenter: [0, '-125%'],
            itemStyle: {
                color: 'auto'
            }
        },
        axisTick: {
            show:false
        },
        splitLine: {
           show:false
        },
        axisLabel: {
            color: '#464646',
            fontSize: 12,
            distance: -35,
            formatter: function (value) {
                console.log(value)
                if (value === 0.9) {
                    return 90;
                }
                else if (value === 0.6) {
                    return 60;
                }
                else if (value === 0.3) {
                    return 30;
                }
                else if (value === 0) {
                    return 0;
                } else if (value === 1) {
                    return 100;
                }
            }
        },
        title: {
            offsetCenter: [0, '30'],
            fontSize: 12
        },
        detail: {
            fontSize: 40,
            offsetCenter: [0, '0%'],
            valueAnimation: true,
            formatter: function (value) {
                return Math.round(value * 100) + '分';
            },
            color: 'auto'
        },
        data: [{
            value: 0.70,
            name: '成绩评定'
        }]
    }]
};