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

配置项如下
      var dataArr = [{
    value: 78,
    name: '失败率'
}];

option = {
    backgroundColor: '#0E1327',
    tooltip: {
        formatter: "{a} <br/>{b} : {c}%"
    },

    series: [{
            type: 'gauge',
            radius: '70%',
            startAngle: '215',
            endAngle: '-35',
            pointer: {
                show: false
            },
            detail: {
                formatter: function(value) {
                    var num = Math.round(value);
                },
            },
            data: dataArr,
            title: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: [
                        [1, '#073B64']
                    ],
                    width: 25,
                    // shadowBlur: 15,
                    // shadowColor: '#B0C4DE',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    opacity: 1
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false,
                length: 25,
                lineStyle: {
                    color: '#00377a',
                    width: 2,
                    type: 'solid',
                },
            },
            axisLabel: {
                show: false
            },
            animationDuration: 4000,
        },
        {
            type: 'gauge',
            radius: '70%',
            startAngle: '215',
            endAngle: 215 - dataArr[0].value / 100 * 250,
            pointer: {
                show: false
            },
            detail: {
                formatter: function(value) {},
            },
            data: dataArr,
            title: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: [
                        [1, '#19A5FF']
                    ],
                    width: 25,
                    // shadowBlur: 15,
                    // shadowColor: '#B0C4DE',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    opacity: 1
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false,
                length: 25,
                lineStyle: {
                    color: '#00377a',
                    width: 2,
                    type: 'solid',
                },
            },
            axisLabel: {
                show: false
            },
            animationDuration: 4000,
        },
        {
            name: '灰色内圈', //刻度背景
            type: 'gauge',
            z: 2,
            radius: '63%',
            startAngle: '215',
            endAngle: '-35',
            //center: ["50%", "75%"], //整体的位置设置
            axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                    color: [
                        [1, '#018DFF']
                    ],
                    fontSize: 20,
                    width: 2,
                    opacity: 1, //刻度背景宽度
                }
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            pointer: {
                show: false
            },
            axisTick: {
                show: false
            },
            detail: {
                show: 0
            }
        },
        {
            name: "白色圈刻度",
            type: "gauge",
            radius: "83%",
            startAngle: 215,//度起始
            endAngle: -35,//刻度结束
            min: 0,
            max: 100,
            splitNumber: 10,
            z: 4,
            axisTick: {
                show: false
            },
            splitLine: {
                length: 0, //刻度节点线长度
                lineStyle: {
                    width: 2,
                    color: '#018DFF'
                } //刻度节点线
            },
            axisLabel: {
                color: 'rgba(255,255,255,8)',
                fontSize: 24,
            }, //刻度节点文字颜色
            pointer: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    opacity: 0
                }
            },
            detail: {
                show: false
            },
            data: [{
                value: 0,
                name: ""
            }]
        },
    ]
};
    
截图如下