嵌套饼图echarts 饼配置项内容和展示

      let placeHolderStyle = { //设置透明伞形
    normal: {
        color: 'transparent',

        label: {
            show: false
        },
        labelLine: {
            show: false
        }
    },

};
let dataPie = [{
        name: '机柜',
        value: 60
    },
    {
        name: '服务器',
        value: 40
    },
    {
        name: '路由器',
        value: 45
    },
    {
        name: '交换机',
        value: 55
    },
    {
        name: 'PDU',
        value: 35
    },
];
let dataColor = [{
        os1: '#4f91f0',
        os2: '#1955a9'
    },
    {
        os1: '#3e79cd',
        os2: '#4be0ff'
    },
    {
        os1: '#36d7e7',
        os2: '#226c96'
    },
    {
        os1: '#22aae0',
        os2: '#5abae0'
    },
    {
        os1: '#41d7cd',
        os2: '#01abff'
    },
];
let legendData = [],
    seriesData = [],
    total = 0,
    radiusValue = 100;
for (var i = 0; i < dataPie.length; i++) {
    total += dataPie[i].value
    legendData.push(dataPie[i].name);
    console.log(radiusValue - 10 * i - 2 + '%', radiusValue - 10 * i + '%')
    seriesData.push({
        type: 'pie',
        clockWise: false, //饼图的扇区是否是顺时针排布
        radius: [radiusValue - 10 * i - 1 + '%', radiusValue - 10 * i + '%'],
        center: ['35%', '50%'],
        label: {
            normal: {
                show: false //隐藏引导线标识
            }
        },
        hoverAnimation: false, //关闭 hover 在扇区上的放大动画效果
        startAngle: 90, //起始角度
        data: [{
                value: dataPie[i].value,
                name: dataPie[i].name,
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: dataColor[i].os1,
                        }, {
                            offset: 1,
                            color: dataColor[i].os2,
                        }]),
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: dataColor[i].os1
                        }, {
                            offset: 1,
                            color: dataColor[i].os2
                        }])
                    }
                }
            },
            { //透明伞形
                value: 100 - dataPie[i].value,
                tooltip: {
                    show: false
                },
                itemStyle: { //设置透明伞形
                    normal: {
                        color: 'transparent', //伞形颜色
                        label: {
                            show: false
                        },

                    },

                }
            },
        ]
    });


}
option = {
    backgroundColor: '#021228',
    title: {
        text: '设备类型',
        x: '28.5%',
        y: 'center',
        textStyle: {
            fontWeight: 'normal',
            fontSize: 12,
            color: "#419ece",
        }
    },
    grid: {
        left: '5px', // 与容器左侧的距离
        right: '5px', // 与容器右侧的距离
        top: '5px', // 与容器顶部的距离
        bottom: '5px', // 与容器底部的距离
    },
    tooltip: {
        trigger: 'item',
        show: true,
        formatter: "{b} : <br/>{d}%",
        backgroundColor: 'rgba(0,0,0,0.7)', // 背景
        padding: [8, 10], //内边距
        extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
    },
    legend: {
        type: 'scroll',
        orient: 'vertical', //竖排
        icon: 'circle', //形状
        right: '50px',
        top: '10px',
        itemGap: 20,
        pageIconColor: "#00f6ff",
        pageTextStyle:{
            color:"#fff"
        },
        textStyle: {
            color: '#419ece', // color: '#fft' 文字颜色随图例颜色
            // align: 'right',
            rich: {
                yellow: {
                    color: '#00b5f3',
                    fontWeight: "bold"

                },
                blue: {
                    color: '#4be1ff',
                    align: 'right',

                },
            }
        },
        formatter: function(name) {

            let target, percent;
            for (let i = 0; i < dataPie.length; i++) {
                if (dataPie[i].name === name) {
                    target = dataPie[i].value;
                    percent = Math.round(((target / total) * 100));
                }
            }
            let arr = [' {blue|' + name + '}', percent + '% ' + ' {yellow|' + target + '}', ];
            return arr

        },
        data: legendData,

    },
    series: seriesData
};