民用户抄表率:96%echarts gauge配置项内容和展示

仪表盘盘

配置项如下
      var axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
    // 颜色过渡
        offset: 0,
        color: '#87F3ED'
    },

    {
        offset: 0.62,
        color: '#A5B8FF'
    },

    {
        offset: 1,
        color: '#cc0000'
    }
]);

var option = {
       backgroundColor: '#013d5a',
    title: {
        x: "38%",
        y: '38%',
        text: '民用户抄表率:96%',
        textStyle: {
            fontWeight: 'normal',
            fontSize: 25,
            color: "#A0C2FC"
        },
    },
    series: [{
            name: '',
            type: 'gauge',
            z: 3,
            min: 0,
            max: 100,
            //圆盘大小
            radius: '80%',
            axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                    width: 21,
                    color: [
                        [1, axislineColor]
                    ],
                }
            },
            // 内刻度
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                //内刻度距离表盘的距离
                distance: 10,
                textStyle: {
                    color: '#ccc',
                    fontSize: 16,
                    fontWeight: 500
                }
            },
            splitLine: { // 分隔线
                show: true,
            },
            detail: {
                show: false,
                textStyle:{
                    fontSize: 20,
                    color: '#fff',
                }
            },
            data: [20]
        },
        {
            // 小刻度
            name: '',
            type: 'gauge',
            z: 2,
            min: 0,
            max: 100,
            radius: '75%',
            axisLine: { // 坐标轴线
                show: false,
                lineStyle: { // 属性lineStyle控制线条样式
                    width: 0,
                    color: [
                        [1, axislineColor]
                    ],
                }
            },
            title: {
                show: false
            },
            detail: {
                show: false
            },
            axisTick: {
                show: true,
                length: 6,
                lineStyle: {
                    width: 3,
                    color: '#979797'
                }
            },
            axisLabel: {
                show: false
            },
            splitLine: { // 分隔线
                show: false
            }
        }
    ]
};
    
截图如下