Echarts在线免费图表

 
            var pointData = 88;
option = {
    backgroundColor: '#000',
    series: [
        {
            type: 'gauge',
            radius: '30%',
            z: 1,
            startAngle: 225,
            endAngle: -45,
            splitNumber: 10,
            splitLine: {
                show: false,
            },
            detail: {
                show: true,
                offsetCenter: [0, 10],
                fontSize: 18,
                formatter: (val) => [`{a|${pointData}}`, `{b|分}`].join(''),
                rich: {
                    a: {
                        fontSize: 42,
                        lineHeight: 50,
                        fontFamily: 'Microsoft YaHei',
                        fontWeight: 'bold',
                        color: '#4BEA01',
                    },
                    b: {
                        fontSize: 12,
                        padding: [-15, 0, 0, 0],
                        fontFamily: 'Microsoft YaHei',
                        fontweight: '400',
                        lineHeight: 16,
                        color: '#FFFFFF',
                    },
                },
            },
            // 仪表盘的线，颜色值为一个数组
            axisLine: {
                show: true,
                lineStyle: {
                    width: 20,
                    opacity: 1,
                    color: [
                        [
                            pointData / 100,
                            {
                                x: 0,
                                y: 0,
                                x1: 0,
                                y1: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(255, 0, 0, 0.8)',
                                    },
                                    {
                                        offset: 0.65,
                                        color: 'rgba(255, 252, 0, 1)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(5, 254, 17, 0.9)',
                                    },
                                ],
                            },
                        ],
                        [1, 'rgba(57, 70, 30, 1)'],
                    ],
                },
            },
            // 仪表盘刻度标签
            axisLabel: {
                show: true,
                distance: -45,
                formatter: (val) => {
                    const num = Math.floor(val);
                    return num % 20 === 0 ? num : '';
                },
                textStyle: {
                    color: '#ffffff',
                    fontSize: '10',
                    fontFamily: 'Microsoft YaHei',
                    fontWeight: 400,
                },
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: 'rgba(7, 24, 40, 1)',
                    width: 2,
                },
                length: 20,
            }, //刻度样式
        },
    ],
};