Echarts饼状图生成内外圈且高度不一致效果

var myChart = echarts.init(document.getElementById("echartsDemo"));
            let colorsInner = ["#5987BF", "#5ABC9B", "#F6C253"];
            let outerColorList = [
                ["#3264A4", "#5987BF", "#4272AF", "#3264A4"],
                ["#4ac99f", "#85c4ae", "#3d725f"],
                ["#F6C253", "#ba9850", "#8d6c27"]
            ];
            let allColors = [];

            function getSelectLabel() {
                return {
                    normal: {
                        show: true,
                        position: "inside",
                        offset: 20
                    }
                };
            }

            function generateData(selectedName) {
                let innerList = [
                    {
                        value: 77,
                        name: "肿瘤性病变"
                    },
                    {
                        value: 5,
                        name: "肺炎"
                    },
                    {
                        value: 18,
                        name: "肺结核"
                    }
                ];
                selectedName = selectedName || innerList[0].name;
                let outerList = [
                    [
                        { value: 93.2, name: "恶性" },
                        { value: 6.8, name: "良性" }
                    ],
                    [
                        { value: 30, name: "肺炎1" },
                        { value: 60, name: "肺炎2" },
                        { value: 40, name: "肺炎3" },
                        { value: 30, name: "肺炎4" }
                    ],
                    vm.echartspie
                ];
                let findIndex = -1;
                let innerData = innerList.map((item, index) => {
                    if (item.name === selectedName) {
                        item.label = getSelectLabel();
                        findIndex = index;
                        item.value = 15;
                    } else {
                        item.value = 10;
                    }
                    item.index = index;
                    item.icon = "▅";
                    return item;
                });
                if (findIndex < 0) {
                    findIndex = 0;
                    innerList[0].label = getSelectLabel();
                }

                let templateData = {
                    value: 10,
                    name: "null",
                    label: {
                        show: false
                    },
                    itemStyle: {
                        color: "transparent"
                    }
                };
                let outerData = [];
                for (let i = 0; i < 3; i++) {
                    if (i === findIndex) {
                        outerData = outerData.concat(outerList[findIndex]);
                    } else {
                        outerList[findIndex].forEach(() => {
                            outerData.push(templateData);
                        });
                    }
                }
                let dataList = innerList
                    .concat(outerData)
                    .filter(item => item.name !== "null")
                    .map((item, index) => {
                        item.color = allColors[index];
                        item.index = index;
                        return item;
                    });
                let outerColor = outerColorList[findIndex];
                allColors = colorsInner.concat(outerColor);
                setChartData(innerData, outerData, dataList, outerColor);
            }

            function getRichColorStyle(legendList) {
                let lastColor = allColors.slice(-1)[0];
                let richColorStyle = {};
                let colorLength = allColors.length;
                legendList.forEach((item, index) => {
                    richColorStyle["flag_" + index] = { color: index < colorLength ? allColors[index] : lastColor };
                });
                richColorStyle.text = { color: "#C2CCD3" };
                return richColorStyle;
            }

            function setChartData(innerData, outerData, dataList, outerColor) {
                myChart.setOption({
                    legend: {
                        icon: "none",
                        orient: "vertical",
                        top: "30",
                        itemWidth: 40,
                        itemHeight: 20,
                        padding: 0,
                        color: allColors,
                        left: "1%",
                        formatter: function(name) {
                            let obj = dataList.find(item => item.name === name);
                            return "{flag_" + obj.index + "|" + (obj.icon || "*") + "} {text|" + name + "}";
                        },
                        textStyle: {
                            rich: getRichColorStyle(dataList)
                        },
                        itemStyle: {
                            normal: {
                                color: "#C2CCD3"
                            }
                        },
                        data: dataList.map(item => item.name)
                    },
                    series: [
                        {
                            type: "pie",
                            radius: [20, 45],
                            hoverAnimation: false,
                            // 设为这种类型后，图的高度由value值来决定
                            roseType: "area",
                            color: colorsInner,
                            center: ["55%", "50%"],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    position: "outside",
                                    shadowColor: "#fff",
                                    formatter: "{d}% \n {b} "
                                },
                                emphasis: {
                                    position: "inner",
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)"
                                }
                            },
                            data: innerData
                        },
                        {
                            type: "pie",
                            radius: [55, 130],
                            center: ["55%", "50%"],
                            hoverAnimation: false,
                            color: outerColor,
                            roseType: "area",
                            label: {
                                position: "inner",
                                formatter: "{d}% \n {b} "
                            },
                            avoidLabelOverlap: false,
                            data: outerData
                        }
                    ]
                });
            }

            myChart.on("click", function(params) {
                if (params.componentType === "series") {
                    generateData(params.data.name);
                }
            });

效果类似下图：