双环echarts gauge配置项内容和展示

配置项如下
      option = {
    // backgroundColor: '#02203d',
    title: {
        text: 'sql注入统计',
        x: 'center',
        // y: 'top',
        show: false,
        bottom: '20px',
        textStyle: {
            color: '#fff',
        },
    },
    series: [
        {
            name: '内环',
            type: 'gauge',
            radius: '75%',
            clockwise: false,
            startAngle: '90',
            endAngle: '-269.9999',
            splitNumber: '100',
            detail: {
                offsetCenter: [0, 0],
                formatter: `{fline|32}{tline|次}`,
                color: '#7BCEF6',
                rich: {
                    fline: {
                        padding: [0, 8],
                        fontSize: 24,
                        color: '#7BCEF6',
                    },
                    tline: {
                        fontSize: 12,
                        color: '#7BCEF6',
                    },
                },
            },
            pointer: {
                show: true,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: [
                        [0, '#7ED0F6'],
                        [
                            36 / 100,
                            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#7ED0F6',
                                },
                                {
                                    offset: 0.3,
                                    color: '#7ED0F6',
                                },
                                {
                                    offset: 1,
                                    color: '#173c5e',
                                },
                            ]),
                        ],
                        [1, '#173c5e'],
                    ],
                    width: 50,
                    shadowColor: 'rgba(33, 174, 234, 0)',
                    shadowBlur: 0,
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                length: 50,
                lineStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 255, 255, 0)',
                    shadowOffsetY: '0',
                    color: '#020f18',
                    width: 3,
                },
            },
            axisLabel: {
                show: false,
            },
        },
        {
            name: '外环',
            type: 'pie',
            radius: ['79%', '81%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
                normal: {
                    shadowBlur: 60,
                    shadowColor: 'rgba(0, 118, 239,1)',
                    color: '#7ED0F6',
                },
            },
            label: {
                show: false,
            },
            data: [100],
        },
        {
            name: '内环',
            type: 'pie',
            radius: ['55%', '57%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
                normal: {
                    shadowBlur: 0,
                    shadowColor: 'rgba(0, 118, 239,0.5)',
                    color: '#7ED0F6',
                },
            },
            label: {
                show: false,
            },
            data: [100],
        },
    ],
};

    
截图如下