Echarts在线免费图表

 
            // 色值
let color = ['#ffc300', '#00e473', 'red'];
// 图例
let legendData = ['新增', '竣工', '结项', '终止']
let pieData = [90, 80, 100, 120]
// 最大值
let sum = Math.max(...pieData) * 1.3
// 图表option整理
let pieSeries = []
pieData.forEach((v, i) => {
    pieSeries.push({
        type: 'pie',
        clockWise: false,
        hoverAnimation: false,
        radius: [65 - i * 10 + '%', 60 - i * 10 + '%'],
        center: ["50%", "50%"],
        label: {
            show: false
        },
        data: [
            // 值
            {
                value: (v / 130) * 270,
                name: legendData[i],
            },
            // 阴影
            {
                value: 270 - (v / 130) * 270,
                name: legendData[i],
                itemStyle: {
                    opacity: 0.2,
                }
            },
            // 空白
            {
                value: 90,
                name: legendData[i],
                itemStyle: {
                    opacity: 0,
                },
            },
        ]
    });
})

option = {
    backgroundColor: '#013A54',
    color: color,
    grid: {
        top: '0%',
        bottom: '4%',
        left: "0%",
        containLabel: false
    },
    legend: {
        show: true,
        icon: 'circle',
        top: '18%',
        left: '50%',
        data: legendData,
        width: 50,
        padding: [0, 18],
        itemGap: 36,
        formatter: function (name) {
            const inx = legendData.indexOf(name)
            return '{title|' + name + ' }  {value|' + pieData[inx] + '%}';
        },
        textStyle: {
            rich: {
                title: {
                    fontSize: 20,
                    lineHeight: 30,
                    color: 'green',
                },
                value: {
                    fontSize: 18,
                    lineHeight: 20,
                    color: '#fff',
                },
            },
        },
    },
    series: pieSeries
};