Echarts在线免费图表

 
            // 色值
var color = ['red', 'green', 'blue']
// lable
let legendData = ['疑似停工', '加快施工', '正常施工']
let pieData = [20, 50, 60]
// 总和
var sumNum = eval(pieData.join("+"))
// 前
var seriesData1 = []
// 后
var seriesData2 = []
pieData.forEach((v, inx) => {
    // 前
    var qvalue = 0
    if (inx > 0) {
        for (var j = 0; j < inx; j++) {
            qvalue += pieData[j]
        }
    }
    // 后
    var hvalue = sumNum - v - qvalue
    if (inx > 2) {
        hvalue = 0
    }
    seriesData1.push(qvalue)
    seriesData2.push(hvalue)
})
// 图表option整理
let pieSeries = [
    {
        type: 'pie',
        radius: ['92%', '94%'],
        top: "center",
        startAngle: 90,
        center: ['50%', '50%'],
        legendHoverLink: false,
        hoverAnimation: false,
        itemStyle: {
            opacity: 0.15
        },
        label: {
            show: false,
            position: 'center'
        },
        labelLine: {
            show: false
        },
        data: [{ value: 100 }]
    }
]
pieData.forEach((v, i) => {
    pieSeries.push({
        type: 'pie',
        hoverAnimation: false,
        radius: [95 - i * 10 + '%', 91 - i * 10 + '%'],
        startAngle: 90,
        center: ['50%', '50%'],
        top: "center",
        data: [
            // 前
            {
                value: (seriesData1[i] / sumNum) * 100,
                label: {
                    show: false
                },
                itemStyle: {
                    opacity: 0,
                }
            },
            // 值
            {
                value: (v / sumNum) * 100,
                labelLine: {
                    show: true,
                    length: 100,
                    lineStyle: {
                        type: 'dashed',
                        color: '#999999'
                    }
                },
                label: {
                    color: color[i],
                    formatter: function (param) {
                        return v
                    },
                },
                itemStyle: {
                    normal: {
                        color: color[i],
                        borderWidth: 1,
                        // shadowBlur: 10,
                        borderRadius: 5,
                        borderColor: color[i],
                        shadowColor: color[i]
                    }
                }
            },
            // 后
            {
                value: (seriesData2[i] / sumNum) * 100,
                label: {
                    show: false
                },
                itemStyle: {
                    opacity: 0,
                },
            },
        ]
    });
    pieSeries.push({
        type: 'pie',
        radius: [95 - i * 10 + '%', '0%'],
        top: "center",
        startAngle: 90,
        center: ['50%', '50%'],
        legendHoverLink: false,
        hoverAnimation: false,
        itemStyle: {
            opacity: 0.15
        },
        label: {
            show: false,
            position: 'center'
        },
        labelLine: {
            show: false
        },
        data: [
            // 前
            {
                value: (seriesData1[i] / sumNum) * 100,
                label: {
                    show: false
                },
                itemStyle: {
                    opacity: 0,
                }
            },
            // 值
            {
                value: (v / sumNum) * 100,
                label: {
                    show: false
                },
                itemStyle: {
                    normal: {
                        color: color[i % 3],
                    },

                }
            },
            // 后
            {
                value: (seriesData2[i] / sumNum) * 100,
                label: {
                    show: false
                },
                itemStyle: {
                    opacity: 0,
                },
            },
        ]
    });
})

option = {
    // backgroundColor: '#013A54',
    color: color,
    grid: {
        top: '0%',
        bottom: '0%',
        left: "0%",
        containLabel: false
    },
    series: pieSeries
};