11echarts gauge配置项内容和展示

配置项如下
      var data = 40;
option = {
    backgroundColor: '#040d2e',
    series: [
        {
            name: '外部刻度',
            type: 'gauge',
            radius: '160%',
            center: ['50%', '90%'],
            min: 0, //最小刻度
            max: 200, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 180,
            endAngle: 0,
            axisLine: {
                show: false,
                lineStyle: {
                    color: [[1, 'rgba(0,0,0,0)']],
                },
            }, //仪表盘轴线
            axisLabel: {
                show: true,
                color: '#424859',
                fontSize: 10,
                distance: -24,
            }, //刻度标签。
            axisTick: {
                show: false,
            }, //刻度样式
            splitLine: {
                show: false,
            },
        },
        // 外侧灰色轴线
        {
            type: 'gauge',
            radius: '140%', // 位置
            center: ['50%', '90%'],
            min: 0,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
                show: true,
                lineStyle: {
                    // 轴线样式
                    width: 2, // 宽度
                    color: [[1, 'rgba(229,229,229,0.3)']], // 颜色
                },
            },
            axisTick: {
                // 刻度
                show: false,
            },
            splitLine: {
                // 分割线
                show: false,
            },
            axisLabel: {
                // 刻度标签
                show: false,
            },
            pointer: {
                // 仪表盘指针
                show: false,
            },
            detail: {
                // 仪表盘详情
                show: false,
            },
        },
        // 中间灰色轴线
        {
            type: 'gauge',
            radius: '130%', // 位置
            center: ['50%', '90%'],
            min: 0,
            max: 200,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
                show: true,
                lineStyle: {
                    // 轴线样式
                    width: 20, // 宽度
                    color: [[1, '#515E66']], // 颜色
                },
            },
            axisTick: {
                // 刻度
                show: false,
            },
            splitLine: {
                // 分割线
                show: false,
            },
            axisLabel: {
                // 刻度标签
                show: false,
            },
            pointer: {
                // 仪表盘指针
                show: false,
            },
            detail: {
                // 仪表盘详情
                show: false,
            },
        },
        // 内侧刻度
        {
            type: 'gauge',
            radius: '133%', // 位置
            center: ['50%', '90%'],
            min: 0,
            max: 200,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
                show: false,
                lineStyle: {
                    // 轴线样式
                    width: 20, // 宽度
                    color: [[1, '#515E66']], // 颜色
                },
            },
            axisTick: {
                // 刻度
                show: true,
                splitNumber: 4,
                length: 8,
            },
            splitLine: {
                // 分割线
                show: false,
            },
            axisLabel: {
                // 刻度标签
                show: false,
            },
            pointer: {
                // 仪表盘指针
                show: true,
                length: '30%',
            },
            itemStyle: {
                //仪表盘指针样式
                normal: {
                    color: '#424859',
                },
            },
            detail: {
                // 仪表盘详情
                show: false,
            },
            data: [{ value:data }],
        },
        // 数据
        {
            type: 'gauge',
            radius: '133%', // 位置
            center: ['50%', '90%'],
            min: 0,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
                show: true,
                lineStyle: {
                    // 轴线样式
                    width: 26, // 宽度
                    color: [[data / 200, '#4D62FF']], // 颜色
                },
            },
            pointer: {
                // 仪表盘指针
                show: false,
            },
            axisTick: {
                // 刻度
                show: false,
            },
            splitLine: {
                // 分割线
                show: false,
            },
            axisLabel: {
                // 刻度标签
                show: false,
            },
            detail: {
                // 仪表盘详情
                show: true,
                width: '60%',
                lineHeight: 40,
                borderRadius: 8,
                offsetCenter: [0, '-45%'],
                fontSize: 20,
                fontWeight: 'bolder',
                formatter: '{value}',
                color: '#C3BDD0',
            },
            data: [
                {
                    value: data,
                },
            ],
        },
    ],
};

    
截图如下