Echarts在线免费图表

 
            //显示数据
const showData = 80;
// 显示名称
const showName = '本年'

//总数据
const max = 100;
//分割线宽度
const width = showData === 0 ? 0 : 4;
//指定数值在圆弧中所占角度
const scaleAn = 270 / max;
//圆弧起始位置的角度
let startAngle = 225 - showData * scaleAn;
if (max - showData == (max / 100) * 25) {
    startAngle = 225 - max * scaleAn;
}
//分割比例
const scaleSp = 150 / max;
//分割线的分割数值
const splitNum = showData * scaleSp;
var option = {
    backgroundColor: '#fff',
    tooltip: {
        trigger: 'item',
    },
    series: [
        {
            name: '',
            type: 'gauge',
            radius: '80%',
            center: ['50%', '50%'],
            startAngle: startAngle,
            endAngle: 225,
            splitNumber: splitNum,
            hoverAnimation: false,
            axisTick: {
                show: false,
            },
            splitLine: {
                length: 32,
                distance: 38,
                lineStyle: {
                    width: width,
                    color: '#8D54E9',
                },
            },
            axisLabel: {
                show: false,
            },
            pointer: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    opacity: 0,
                },
            },
            detail: {
                formatter: '{score|{value}%}',
                // 中心的偏移位置  水平 垂直  相对于仪表盘半径的百分比。
                offsetCenter: [0, '-20%'],
                rich: {
                    score: {
                        color: 'green',
                        fontFamily: '微软雅黑',
                        fontSize: 26,
                    },
                },
            },
            title: {
                // 中心的偏移位置  水平 垂直  相对于仪表盘半径的百分比。
                offsetCenter: [0, '0%'],
                color: 'red',
                textStyle: {
                    fontSize: 30,
                },
            },
            data: [
                {
                    value: showData,
                    name: showName,
                },
            ],
        },
        {
            name: '',
            type: 'pie',
            radius: ['60%', '68%'],
            center: ['50%', '50%'],
            silent: true,
            clockwise: true,
            startAngle: 225,
            z: 0,
            zlevel: 0,
            label: {
                normal: {
                    position: 'center',
                },
            },
            data: [
                {
                    value: 75,
                    name: '',
                    itemStyle: {
                        color: 'blue',
                    },
                },
                {
                    name: '',
                    value: 25,
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        normal: {
                            color: 'transparent',
                        },
                    },
                },
            ],
        },
    ],
};