Echarts在线免费图表

 
            var demoData = [{
    name: '',
    value: 48,
}, ];
option = {
    backgroundColor: '#02041B',
    series: [ { 
                    name: '背景圈',
                    type: 'gauge',
                    radius: '50%',
                    startAngle: 220,
                    endAngle: -40,
                    axisLine: { // 坐标轴线
                        roundCap: false,
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: [
                                [
                                    1, '#1B2B37'
                                ],
                            ],
                            width: 20
                        }

                    },
                    splitLine: { //分隔线样式
                        show: false,
                    },
                    axisLabel: { //刻度标签
                        show: false,
                    },
                    pointer: {
                        show: false,
                    },
                    axisTick: { //刻度样式
                        show: false,
                    },
                    detail: {
                        show: false,
                    },
                    zlevel:1,
                },

                {
                    name: '背景圈',
                    type: 'gauge',
                    radius: '40%',
                    startAngle: 220,
                    endAngle: -40,
                    axisLine: { // 坐标轴线
                        roundCap: true,
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: [
                                [
                                    1, '#25AFF4'
                                ],
                            ],
                            width: 2
                        }

                    },
                    splitLine: { //分隔线样式
                        show: false,
                    },
                    axisLabel: { //刻度标签
                        show: false,
                    },
                    pointer: {
                        show: false,
                    },
                    axisTick: { //刻度样式
                        show: false,
                    },
                    detail: {
                        show: false,
                    },
                    zlevel:1,
                },
                // 数据
                {
                    name: '',
                    type: 'gauge',
                    radius: '50%',
                    startAngle: 220,
                    endAngle: -45,
                    zlevel:3,
                    min: 0,
                    max: 100,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 20,
                            color: [
                                [
                                    4 / 100, '#25AFF4'  // 数值变量
                                ],
                                [
                                    1, 'rgba(255,255,255,.0)'
                                ]
                            ]
                        }
                    },
                    axisTick: {
                        show: 0,
                    },
                    splitLine: {
                        show: 0,
                    },
                    axisLabel: {
                        show: 0
                    },
                    pointer: {
                        show: false,
                    },
                    detail: {
                        show: true,
                        offsetCenter: [0, 0],
                        textStyle: {
                            fontSize: 32,
                            color: '#ffffff'
                        },
                        formatter:function(value){
                            return `${value}%`;
                        }
                    },
                    itemStyle: {
                        // color: 'rgba(255, 36, 74,.3)',
                    },
                    data: [{
                        value: 4
                    }]
                },]
};