比例饼图echarts 饼配置项内容和展示

      function _pie() {
    let dataArr = [];
    for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
            dataArr.push({
                name: (i + 1).toString(),
                value: 25,
                itemStyle: {
                    normal: {
                        color: 'rgba(24,144,255,0.3)',
                        borderWidth: 0,
                        borderColor: 'rgba(0,0,0,0)',
                    },
                },
            });
        } else {
            dataArr.push({
                name: (i + 1).toString(),
                value: 20,
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)',
                        borderWidth: 0,
                        borderColor: 'rgba(0,0,0,0)',
                    },
                },
            });
        }
    }
    return dataArr;
}
var colorList = [
    {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
            {
                offset: 0,
                color: '#69c0ff', // 0% 处的颜色
            },
            {
                offset: 1,
                color: '#1890ff', // 100% 处的颜色
            },
        ],
    },
    {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
            {
                offset: 0,
                color: '#fff566', // 0% 处的颜色
            },
            {
                offset: 1,
                color: '#fadb14', // 100% 处的颜色
            },
        ],
    },
    {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
            {
                offset: 0,
                color: '#fff566', // 0% 处的颜色
            },
            {
                offset: 1,
                color: '#fadb14', // 100% 处的颜色
            },
        ],
    },
    {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
            {
                offset: 0,
                color: '#ff85c0', // 0% 处的颜色
            },
            {
                offset: 1,
                color: '#eb2f96', // 100% 处的颜色
            },
        ],
    },
    {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
            {
                offset: 0,
                color: '#b7eb8f', // 0% 处的颜色
            },
            {
                offset: 1,
                color: '#73d13d', // 100% 处的颜色
            },
        ],
    },
    {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
            {
                offset: 0,
                color: '#fff566', // 0% 处的颜色
            },
            {
                offset: 1,
                color: '#fadb14', // 100% 处的颜色
            },
        ],
    },
];
option = {
    backgroundColor: '#000',
    legend: {
        orient: 'vertical',
        top: 'center',
        right: '5%',
        data: ['rose1', 'rose2'],
        textStyle: {
            color: '#fff',
            fontSize: 16,
        },
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    series: [
        {
            type: 'pie',
            zlevel: 1,
            silent: true,
            radius: ['59%', '60%'],
            label: {
                normal: {
                    show: false,
                },
            },
            labelLine: {
                normal: {
                    show: false,
                },
            },
            data: _pie(),
        },
        {
            type: 'pie',
            zlevel: 2,
            silent: true,
            radius: ['44%', '45%'],
            label: {
                normal: {
                    show: false,
                },
            },
            labelLine: {
                normal: {
                    show: false,
                },
            },
            data: _pie(),
        },
        {
            type: 'pie',
            zlevel: 3,
            silent: true,
            radius: ['29%', '30%'],
            label: {
                normal: {
                    show: false,
                },
            },
            labelLine: {
                normal: {
                    show: false,
                },
            },
            data: _pie(),
        },
        {
            type: 'pie',
            zlevel: 4,
            silent: true,
            radius: ['14%', '15%'],
            label: {
                normal: {
                    show: false,
                },
            },
            labelLine: {
                normal: {
                    show: false,
                },
            },
            data: _pie(),
        },
        {
            type: 'gauge',
            zlevel: 5,
            splitNumber: 90,
            radius: '69%',
            center: ['50%', '50%'],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            splitLine: {
                show: true,
                length: 20,
                lineStyle: {
                    width: 4,
                    color: 'rgba(24,144,255,0.5)',
                },
            },
            pointer: {
                show: 0,
            },
            detail: {
                show: 0,
            },
        },
        {
            type: 'pie',
            zlevel: 6,
            silent: true,
            radius: ['72%', '73%'],
            color: 'rgba(24,144,255,0.3)',
            hoverAnimation: false,
            label: {
                normal: {
                    show: false,
                },
            },
            data: [1, 0, 0, 0],
        },
        {
            type: 'pie',
            zlevel: 7,
            silent: true,
            radius: ['77%', '80%'],
            hoverAnimation: false,
            color: [
                {
                    type: 'linear',
                    colorStops: [
                        {
                            offset: 0,
                        color: 'rgba(24,144,255,0.5)',
                        },
                        {
                            offset: 1,
                        
                        color: 'rgba(24,144,255,0.5)',
                        },
                    ],
                    global: false,
                },
                {
                    type: 'linear',
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(6,15,56,0)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(18,52,133,1)',
                        },
                    ],
                    global: false,
                },
                {
                    type: 'linear',
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(6,15,56,0)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(18,52,133,1)',
                        },
                    ],
                    global: false,
                },
            ],
            label: {
                normal: {
                    show: false,
                },
            },
            labelLine: {
                normal: {
                    show: false,
                },
            },
            data: [1, 1, 1],
        },
        {
            name: '公变、专变比例',
            type: 'pie',
            radius: ['30%', '80%'],
            center: ['50%', '50%'],
            roseType: 'radius',
            zlevel: 9,
            label: {
                show: false,
            },
            labelLine: {
                show: false,
            },
            data: [
                {
                    value: 613,
                    name: '公变',
                    itemStyle: {
                        color: 'rgba(24,144,255,0.7)',
                        borderColor: 'rgba(50,123,250,1)',
                        borderWidth: 3,
                    },
                },
                {
                    value: 387,
                    name: '专变',
                    itemStyle: {
                        color: 'rgba(92,219,211,0.7)',
                        borderColor: 'rgba(54,207,201,1)',
                        borderWidth: 3,
                    },
                },
            ],
        },
    ],
};