优秀率echarts 饼配置项内容和展示

      let pieData = [
    {
        name: '优秀率',
        value: 80,
    },
    {
        name: '良好率',
        value: 60,
    },
    {
        name: '及格率',
        value: 40,
    },
    {
        name: '不及格率',
        value: 40,
    },
];

var titleArr = [],
    seriesArr = [];

pieData.forEach(function (item, index) {
    titleArr.push({
        text: item.name,
        left: index * 25 + 12.5 + '%',
        top: '60%',
        textAlign: 'center',
        textStyle: {
            fontWeight: 'normal',
            fontSize: '20',
            color: 'white',
            textAlign: 'center',
        },
    });
    seriesArr.push(
        {
            type: 'pie',
            name: '外层细圆环',
            radius: ['26%', '27%'],
            center: [index * 25 + 12.5 + '%', '45%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
                normal: {
                    color: '#6e7175',
                },
            },
            label: {
                show: false,
            },
            data: [100],
        },
        {
            type: 'pie',
            name: '内层层细圆环',
            radius: ['14%', '15%'],
            center: [index * 25 + 12.5 + '%', '45%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
                normal: {
                    color: '#6e7175',
                },
            },
            label: {
                show: false,
            },
            data: [100],
        }
    );
});

seriesArr.push(
    {
        name: pieData[0].name,
        type: 'pie',
        clockWise: false,
        radius: ['18%', '23%'],
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#EE794B',
                    },
                    {
                        offset: 1,
                        color: '#EE794B',
                    },
                ]),
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                },
            },
        },
        hoverAnimation: false,
        center: [0 * 25 + 12.5 + '%', '45%'],
        data: [
            {
                value: pieData[0].value,
                label: {
                    normal: {
                        formatter: function (params) {
                            return params.value+'%';
                        },
                        position: 'center',
                        show: true,
                        textStyle: {
                            fontSize: '25',
                            // fontWeight: 'bold',
                            color: '#1cc7ff',
                        },
                    },
                },
            },
            {
                value: 100 - pieData[0].value,
                name: 'invisible',
                itemStyle: {
                    normal: {
                        color: 'rgba(255,255,255,0.2)',
                    },
                    emphasis: {
                        color: 'rgba(0,0,0,0)',
                    },
                },
            }
        ],
    },
    {
        name: pieData[1].name,
        type: 'pie',
        clockWise: false,
        radius: ['18%', '23%'],
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#65D3F3',
                    },
                    {
                        offset: 1,
                        color: '#65D3F3',
                    },
                ]),
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                },
            },
        },
        hoverAnimation: false,
        center: [1 * 25 + 12.5 + '%', '45%'],
        data: [
            {
                value: pieData[1].value,
                label: {
                    normal: {
                        formatter: function (params) {
                            return params.value+'%';
                        },
                        position: 'center',
                        show: true,
                        textStyle: {
                            fontSize: '25',
                            // fontWeight: 'bold',
                            color: '#1cc7ff',
                        },
                    },
                },
            },
            {
                value: 100 - pieData[1].value,
                name: 'invisible',
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)',
                    },
                    emphasis: {
                        color: 'rgba(0,0,0,0)',
                    },
                },
            },
        ],
    },
    {
        name: pieData[2].name,
        type: 'pie',
        clockWise: false,
        radius: ['18%', '23%'],
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#5BE3A1',
                    },
                    {
                        offset: 1,
                        color: '#5BE3A1',
                    },
                ]),
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                },
            },
        },
        hoverAnimation: false,
        center: [2 * 25 + 12.5 + '%', '45%'],
        data: [
            {
                value: pieData[2].value,
                label: {
                    normal: {
                        formatter: function (params) {
                            return params.value + '%';
                        },
                        position: 'center',
                        show: true,
                        textStyle: {
                            fontSize: '25',
                            // fontWeight: 'bold',
                            color: '#1cc7ff',
                        },
                    },
                },
            },
            {
                value: 100 - pieData[2].value,
                name: 'invisible',
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)',
                    },
                    emphasis: {
                        color: 'rgba(0,0,0,0)',
                    },
                },
            },
        ],
    },
    {
        name: pieData[3].name,
        type: 'pie',
        clockWise: false,
       radius: ['18%', '23%'],
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#2788FF',
                    },
                    {
                        offset: 1,
                        color: '#2788FF',
                    },
                ]),
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                },
            },
        },
        hoverAnimation: false,
        center: [3 * 25 + 12.5 + '%', '45%'],
        data: [
            {
                value: pieData[3].value,
                label: {
                    normal: {
                        formatter: function (params) {
                            return params.value + '%';
                        },
                        position: 'center',
                        show: true,
                        textStyle: {
                            fontSize: '25',
                            // fontWeight: 'bold',
                            color: '#1cc7ff',
                        },
                    },
                },
            },
            {
                value: 100 - pieData[3].value,
                name: 'invisible',
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)',
                    },
                    emphasis: {
                        color: 'rgba(0,0,0,0)',
                    },
                },
            },
        ],
    }
);

option = {
    grid: {
        left: '2%',
        right: '2%',
        bottom: '0%',
        top: '0%',
        containLabel: true,
    },
    backgroundColor: 'black',
    title: titleArr,
    series: seriesArr,
};