REALLOW超酷仪表盘echarts gauge配置项内容和展示

利用多层不同仪表堆叠成的仪表盘效果

      option = {
    backgroundColor: '#25499F',
    title: {
        text: 'REALLOW超酷仪表盘'
    },

    tooltip: {
        formatter: "{b} : {c}%"
    },
    toolbox: {
        feature: {

            saveAsImage: {}
        }
    },
    series: [
        {
            name: '黑色外圈细',
            type: 'gauge',
            radius: '97%',
            startAngle: 250,
            endAngle: -70,
            axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                    color: [
                        [0.2, '#000'],
                        [0.8, '#000'],
                        [1, '#000']
                    ],
                    width: 4,
                    shadowColor: '#0d4b81', //默认透明
                    shadowOffsetX: 0,
                    shadowOffsetY: -3,
                    shadowBlur: 20,
                    opacity: 1,
                }

            },
            splitLine: { //分隔线样式
                show: false,
            },
            axisLabel: { //刻度标签
                show: false,
            },
            axisTick: { //刻度样式
                show: false,
            },
            data: [{
                value: '',
                name: ''
            }]
        }, 
        {
            name: '蓝色外圈粗1',
            type: 'gauge',
            radius: '99%',
            startAngle: -65,
            endAngle: -115,
            splitNumber: 4,
            axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                    color: [
                        [1, '#00fffc']
                    ],
                    width: 10,


                    opacity: 1,
                }

            },
            splitLine: { //分隔线样式
                show: false,
            },
            axisLabel: { //刻度标签
                show: false,
            },
            axisTick: { //刻度样式
                show: false,
            },
            data: [{
                value: '',
                name: ''
            }]
        }, {
            name: '蓝色外圈粗2',
            type: 'gauge',
            radius: '99%',
            startAngle: -155,
            endAngle: 155,
            splitNumber: 4,
            axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                    color: [
                        [1, '#00fffc']
                    ],
                    width: 10,


                    opacity: 1,
                }

            },
            splitLine: { //分隔线样式
                show: false,
            },
            axisLabel: { //刻度标签
                show: false,
            },
            axisTick: { //刻度样式
                show: false,
            },
            data: [{
                value: '',
                name: ''
            }]
        }, {
            name: '蓝色外圈粗3',
            type: 'gauge',
            radius: '99%',
            startAngle: 25,
            endAngle: -25,
            splitNumber: 4,
            axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                    color: [
                        [1, '#00fffc']
                    ],
                    width: 10,


                    opacity: 1,
                }

            },
            splitLine: { //分隔线样式
                show: false,
            },
            axisLabel: { //刻度标签
                show: false,
            },
            axisTick: { //刻度样式
                show: false,
            },
            data: [{
                value: '',
                name: ''
            }]
        }, {
            name: '蓝色外圈粗4',
            type: 'gauge',
            radius: '99%',
            startAngle: 115,
            endAngle: 65,
            splitNumber: 4,
            axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                    color: [
                        [1, '#00fffc']
                    ],
                    width: 10,


                    opacity: 1,
                }

            },
            splitLine: { //分隔线样式
                show: false,
            },
            axisLabel: { //刻度标签
                show: false,
            },
            axisTick: { //刻度样式
                show: false,
            },
            data: [{
                value: '',
                name: ''
            }]
        }, {
            name: '内圈小',
            type: 'gauge',
            radius: '70%',
            startAngle: 359.9,
            endAngle: 0,
            splitNumber: 4,
            axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                    color: [
                        [1, '#31ada9']
                    ],
                    width: '100%',
                    shadowColor: 'red', //默认透明
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 40,
                    opacity: 1,
                }

            },
            splitLine: { //分隔线样式
                show: false,
            },
            axisLabel: { //刻度标签
                show: false,
            },
            axisTick: { //刻度样式
                show: false,
            },
            data: [{
                value: '',
                name: ''
            }]
        }, {
            name: '内圈',
            type: 'gauge',
            radius: '65%',
            startAngle: 245,
            endAngle: -65,
            splitNumber: 4,
           
            axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                    color: [
                        [1, '#000']
                    ],
                    width: '100%',
                    shadowColor: '#31ada9', //默认透明
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    opacity: 1,
                }

            },
            splitLine: { //分隔线样式
                show: false,
            },
            axisLabel: { //刻度标签
                show: false,
            },
            axisTick: { //刻度样式
                show: false,
            },
            pointer: { //仪表盘指针。
                length: '1%',
                width: 0,
            },
            detail: {
                offsetCenter: [0, -20],
                formatter: function(value) {
                    return value + '%';
                },
                textStyle: {
                    color: '#FFF',


                },
            },
            data: [{
                value: '78.5',
                name: ''
            }]
        },

    ]
};