魔幻系列圆环图echarts 饼配置项内容和展示

      option = {
    backgroundColor:'#1a019b',
    title: {
        text: '魔幻系列圆环图',
        textStyle: {
            color: '#fff',
            fontSize: 35,
            align: 'center'
        },
        x: 'center',
        y: '1%',
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
        show:false,
        orient: 'horizontal',
        x: 'center',
        itemWidth: 20,
        itemHeight: 20,
        align: 'left',
        data: ['第一批', '第二批', '第三批', '第四批'],
        textStyle: {
            color: 'blue'
        }
    },
    series: [{
            animation: false,
            type: 'pie',
            radius: ['42%', '51%'],
            data: [1],
            color: ["gray"],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0
                },

            },
        },
        {
            name: '访问来源',
            type: 'pie',
            radius: ['38%', '75%'],
            label: {
                normal: {
                    // formatter: '{c}',
                    position:'inside',
                        formatter:(params)=>{
                            return (params.dataIndex % 2) ? '' : params.name + '\n' + params.value+'%'
                        },
                    padding: [0, -80],
                    height: 60,
                    fontSize: 20,
                    rich: {
                        c: {
                            lineHeight: 50,
                        },
                    }
                },
            },
            data: [{
                    value: 48,
                    name: '第一批'
                },
                {
                    value: .5,
                    name: 'border'
                },
                {
                    value: 7,
                    name: '第二批'
                },
                {
                    value: .5,
                    name: 'border'
                },
                {
                    value: 48,
                    name: '第三批'
                },
                {
                    value: .5,
                    name: 'border'
                },
                {
                    value: 35,
                    name: '第四批'
                },
                {
                    value: .5,
                    name: 'border'
                },
            ],
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList = ['#55c2d9', '#d56ff0', '#aa81f0', '#74a2e3'];
                        return (params.dataIndex % 2) ? 'rgba(0,0,0,0)' : colorList[params.dataIndex / 2];
                    },
                    label: {
                        show: true,
                    },
                    labelLine: {
                        show: false,
                        length: 80,
                        length2: 120,
                    },


                },
            }
        },
        {
            animation: false,
            type: 'pie',
            radius: ['36%', '38%'],
            data: [{
                    value: 48,
                    name: '第一批'
                },
                {
                    value: .5,
                    name: 'border'
                },
                {
                    value: 7,
                    name: '第二批'
                },
                {
                    value: .5,
                    name: 'border'
                },
                {
                    value: 48,
                    name: '第三批'
                },
                {
                    value: .5,
                    name: 'border'
                },
                {
                    value: 35,
                    name: '第四批'
                },
                {
                    value: .5,
                    name: 'border'
                },
            ],
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList = ['#55c2d9', '#d56ff0', '#aa81f0', '#74a2e3'];
                        return (params.dataIndex % 2) ? 'rgba(0,0,0,0.5)' : "rgba(0,0,0,0.5)";
                    },
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                },
            },
        },
        {
            animation: false,
            type: 'pie',
            radius: ['38%', '40%'],
            data: [{
                    value: 48,
                    name: '第一批'
                },
                {
                    value: .5,
                    name: 'border'
                },
                {
                    value: 7,
                    name: '第二批'
                },
                {
                    value: .5,
                    name: 'border'
                },
                {
                    value: 48,
                    name: '第三批'
                },
                {
                    value:.5,
                    name: 'border'
                },
                {
                    value: 35,
                    name: '第四批'
                },
                {
                    value: .5,
                    name: 'border'
                },
            ],
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList = ['#55c2d9', '#d56ff0', '#aa81f0', '#74a2e3'];
                        return (params.dataIndex % 2) ? 'rgba(0,0,0,0.5)' : "rgba(0,0,0,0.5)";
                    },
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                },

            },
        },
    ]
};