Echarts在线免费图表

 
            const value = 80;
const name = '考试合格率';
const color = '#00E5F1';
option = {
    backgroundColor: '#0F224C', //背景色
    title: {
        text: `{a|${value}%}{c|\n${name}}`,
        x: 'center',
        y: 'center',
        textStyle: {
            rich: {
                a: {
                    fontSize: 22,
                    color: '#29EEF3',
                },
                c: {
                    fontSize: 24,
                    color: '#00E5F1',
                    padding: [15, 0],
                },
            },
        },
    },
    series: [
        {
            name: 'outside_circle',
            type: 'gauge',
            splitNumber: 80,
            radius: '85%',
            center: ['50%', '50%'],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
                show: false,
                lineStyle: {
                    color: [
                        [0, '#50658d'],
                        [1, '#50658d'],
                    ],
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                length: 3,
                lineStyle: {
                    color: 'auto',
                    width: 2.5,
                },
            },
            axisLabel: {
                show: false,
            },
            detail: {
                show: false,
            },
        },
        {
            name: 'inside_circle',
            type: 'gauge',
            splitNumber: 50,
            radius: '74%',
            center: ['50%', '50%'],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
                show: false,
                lineStyle: {
                    color: [
                        [0, '#50658d'],
                        [1, '#50658d'],
                    ],
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                length: 28,
                lineStyle: {
                    color: 'auto',
                    width: 4,
                },
            },
            axisLabel: {
                show: false,
            },
            detail: {
                show: false,
            },
        },
        {
            name: 'cover_circle',
            type: 'pie',
            radius: ['58%', '72%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
                normal: {
                    show: false,
                    position: 'center',
                },
                emphasis: {
                    show: false,
                },
            },
            labelLine: {
                normal: {
                    show: false,
                },
            },
            data: [
                {
                    value: value,
                    itemStyle: {
                        color: color,
                    },
                },
                {
                    value: 100 - value,
                    itemStyle: {
                        color: 'transparent',
                    },
                },
            ],
        },
    ],
};