echarts 使用移表盘实现类似类目轴效果，不使用数值刻度

思路：使用多个移表盘叠加

效果图：

代码：

setGaugeChart() {
    this.gaugeChart && this.gaugeChart?.dispose && this.gaugeChart?.dispose()
    this.gaugeChart = echarts.init(this.$refs.gaugeChartRef)
    const grades = ['AAA', 'AA', 'A', 'BBB', 'BB', 'B', 'CCC', 'CC', 'C', 'D']
    const diffAngle = 220 / grades.length / 2 // 计算角度差值，用来使label在两个刻度中间显示
    const curValue = 2 // 当前值，对应grades索引
    const gaugeOption = {
        type: 'gauge',
        center: ['50%', '75%'],
        radius: 128,
        max: grades.length,
        splitNumber: grades.length,
        pointer: {
            show: false
        },
        axisTick: {
            show: false
        }
    }
    // 设置当前值对应的axisLine颜色
    let lineColor = []
    if (curValue === 0) {
        lineColor = [
            [(curValue + 1) / grades.length, '#ECC087'],
            [1, '#EFD1A7']
        ]
    } else if (curValue === grades.length - 1) {
        lineColor = [
            [curValue / grades.length, '#EFD1A7'],
            [(curValue + 1) / grades.length, '#ECC087']
        ]
    } else {
        lineColor = [
            [curValue / grades.length, '#EFD1A7'],
            [(curValue + 1) / grades.length, '#ECC087'],
            [1, '#EFD1A7']
        ]
    }
    const option = {
        series: [
            // 边框底色盘
            {
                ...gaugeOption,
                radius: gaugeOption.radius + 1,
                z: 2,
                startAngle: 200,
                endAngle: -20,
                axisLine: {
                    lineStyle: {
                        width: 10,
                        color: [[1, '#fff']]
                    }
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                }
            },
            // 数据展示盘
            {
                ...gaugeOption,
                z: 3,
                startAngle: 200,
                endAngle: -20,
                axisLine: {
                    lineStyle: {
                        width: 8,
                        color: lineColor
                    }
                },
                splitLine: {
                    distance: -8,
                    length: 8,
                    lineStyle: {
                        color: '#fff',
                        width: 1
                    }
                },
                axisLabel: {
                    show: false
                },
                detail: {
                    valueAnimation: true,
                    offsetCenter: [0, 15],
                    formatter: () => {
                        return `{a|${grades[curValue] || ''}}`
                    },
                    rich: {
                        a: {
                            color: '#DB9130',
                            fontSize: 80,
                            fontWeight: 600
                        }
                    }
                },
                data: [
                    {
                        value: curValue
                    }
                ]
            },
            // 展示label仪表盘
            {
                ...gaugeOption,
                z: 4,
                startAngle: 200 - diffAngle,
                endAngle: -20 - diffAngle,
                axisLine: {
                    lineStyle: {
                        width: 8,
                        color: [[1, 'rgba(236, 192, 135, 0)']]
                    }
                },
                splitLine: {
                    show: false,
                    distance: -8,
                    length: 8,
                    lineStyle: {
                        color: '#fff',
                        width: 1
                    }
                },
                axisLabel: {
                    color: '#ECC087',
                    distance: -10,
                    fontSize: 18,
                    rotate: 'tangential',
                    formatter: value => {
                        if (value === curValue) {
                            return `{b|${grades[value] || ''}}`
                        } else {
                            return `{a|${grades[value] || ''}}`
                        }
                    },
                    rich: {
                        a: {
                            fontSize: 18,
                            color: '#ECC087'
                        },
                        b: {
                            fontSize: 18,
                            color: '#DB9130'
                        }
                    }
                }
            }
        ]
    }
    this.gaugeChart.setOption(option)
}