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

      var giftImageUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAB4UlEQVRoge2Z7ZGCMBRFLcEStgRLoARLoAPpYNOBdrB2sHawdAAdSAfawdkfCbMRDQmQF2DHO5M/Du9yz+QbN5u33oojoCSeKuAT2K0VwNYX8LFmAIAbsF8zQKt87QAg1RMJAW7ANiVANsBjB1wCINQiASyv3NcLiwYwfsoDEXcuCABsgXsPgFo0gPHsmw/neOk3YgB9w6iMl34zSw9cIsYXmwO3HgC1dIBTT3hY8iqEfx8gavhYAOid+NsXntgrkAegAn4CWt94t3Un8VkotvLo4RMCKJHwiQBysfDCACUpLveRARr0PpCJBw8AKIAssH0kCzwAIIv4juPIHj3ODsDj7lyb9/labdXkcwNcjV8xsK4wdZXvQTEA9BEDGHcGsrK4VzNhgLPxKkfWt9lOIQ9JALTnJDWyvr3Zub9mSAHwOHlHeaGX6Fav7xESAOhbWeXwHauKV6dZIYDC4TlVzyuZEIDtWaPHcv36NU41ps72KlMDNJhuRw+rIdpafs1cAFXn92toeodfcgCAA3pDG3oeOpq6g/VbMgDfp5Wxet7QhAAyh+dUPWeSADC++45fQ9hJtG1Npz7dRmZ8u72gBtaroDz/AeDk6MJJF3L0un82Xpehfvz971Yan/gfxd6aoF+Wa+m2l3YWQgAAAABJRU5ErkJggg==";
var startColor = ['#FC9315', '#FC5515', '#FC3415', '#FC2415', '#FC1121'];
var middleColor = ['#FDB721', '#FD8E21', '#FD6921', '#FD4A21', '#FD4A21'];
var endColor = ['#54432E', '#855A27', '#864F2A', '#89462C', '#853930'];
var StartData = [{
        value: 100,
        name: ''
    },
    {
        value: 100,
        name: ''
    },
    {
        value: 100,
        name: ''
    },
    {
        value: 100,
        name: ''
    },
    {
        value: 100,
        name: ''
    }
];
var MiddleData = [{
        value: 100,
        name: ''
    },
    {
        value: 100,
        name: ''
    },
    {
        value: 100,
        name: ''
    },
    {
        value: 100,
        name: ''
    },
    {
        value: 100,
        name: ''
    }
];
var EndData = [{
        value: 100,
        name: '停车15分钟',
        itemStyle: {
            color: '#54432E'
        }
    },
    {
        value: 100,
        name: '停车15-60分钟',
        itemStyle: {
            color: '#855A27'
        }
    },
    {
        value: 100,
        name: '停车1-2小时',
        itemStyle: {
            color: '#864F2A'
        }
    },
    {
        value: 100,
        name: '停车2-4小时',
        itemStyle: {
            color: '#89462C'
        }
    },
    {
        value: 100,
        name: '停车4小时以上',
        itemStyle: {
            color: '#853930'
        }
    }
];
StartData.map(function(item, index) {
    item.itemStyle = {
        normal: {
            color: startColor[index]
        }
    }
});
MiddleData.map(function(item, index) {
    item.itemStyle = {
        normal: {
            color: middleColor[index]
        }
    }
});
EndData.map(function(item, index) {
    item.itemStyle = {
        normal: {
            color: endColor[index]
        }
    }
});
option = {
    backgroundColor: '#031845',
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)",

    },
    graphic: {
        elements: [{
            type: 'image',
            style: {
                image: giftImageUrl,
                width: 50,
                height: 50
            },
            left: 'center',
            top: 'center'
        }]
    },
    title: {
        text: '平均停车时长',
        left: 'center',
        top: '55%',
        padding: [24, 0],
        textStyle: {
            color: '#fff',
            fontSize: 20,
            align: 'center'
        }
    },
    series: [{
            name: '平均停车时长',
            type: 'pie',
            radius: ['25%', '35%'],
            label: {
                normal: {
                    position: 'inner'
                }
            },
            labelLine: {
                normal: {
                    show: false
                },

            },
            tooltip: {
                show: false,


            },

            data: StartData
        },
        {
            name: '平均停车时长',
            type: 'pie',
            radius: ['35%', '50%'],
            label: {
                normal: {
                    show: false
                }
            },
            labelLine: {
                normal: {
                    show: false
                },

            },
            tooltip: {
                show: false,


            },

            data: MiddleData
        },
        {
            name: '平均停车时长',
            type: 'pie',
            radius: ['43%', '50%'],
            labelLine: {
                normal: {
                    show: true,
                    length: 20,
                    length2: 20,
                    lineStyle: {
                        width: 2
                    }
                }
            },
            label: {
                normal: {
                    formatter: '{d|{d}%}\n{hr|}\n{b|{b}}',
                    rich: {
                        b: {
                            fontSize: 20,
                            color: '#6164B2',
                            align: 'left',
                            padding: 4
                        },
                        hr: {
                            borderColor: '#12EABE',
                            width: '100%',
                            borderWidth: 2,
                            height: 0
                        },
                        d: {
                            fontSize: 20,
                            color: '#FF9615',
                            align: 'left',
                            padding: 4
                        },
                        c: {
                            fontSize: 20,
                            color: '#fff',
                            align: 'left',
                            padding: 4
                        }
                    }
                }
            },
            data: [{
                    value: 100,
                    name: '停车15分钟',
                    itemStyle: {
                        color: '#54432E'
                    }
                },
                {
                    value: 100,
                    name: '停车15-60分钟',
                    itemStyle: {
                        color: '#855A27'
                    }
                },
                {
                    value: 100,
                    name: '停车1-2小时',
                    itemStyle: {
                        color: '#864F2A'
                    }
                },
                {
                    value: 100,
                    name: '停车2-4小时',
                    itemStyle: {
                        color: '#89462C'
                    }
                },
                {
                    value: 100,
                    name: '停车4小时以上',
                    itemStyle: {
                        color: '#853930'
                    }
                }
            ]
        }
    ]
};