Design elements✍echarts 饼配置项内容和展示

      var num1 = 50;
var num2 = 60;
var num3 = 70;
option = {
    backgroundColor: '#0f253a',
    title: [{
        text: 'Design elements✍',
        x: '50%',
        y: 30,
        textAlign: 'center',
        textStyle: {
            align: 'center',
            color: '#fff',
            fontSize: 30,
            fontWeight: '100',
        },
    }, {
        text: 'Lorem ipsum',
        left: '49.5%',
        top: '48%',
        textAlign: 'center',
        textStyle: {
            fontSize: '16',
            color: '#fff',
            textAlign: 'center',
            fontWeight: '400',
        },
    }, ],
    series: [{
            type: 'pie',
            radius: ['25%', '32%'],
            center: ['50%', '50%'],
            z: 1,
            startAngle: 0,
            data: [{
                    hoverOffset: 1,
                    value: num1,
                    name: '',
                    itemStyle: {
                        color: '#df572d',
                    },
                    label: {
                        normal: {
                            show: true,
                            formatter: "{r|{c}%}",
                            rich: {
                                r: {
                                    color: 'rgba(255,255,255,1)',
                                    fontWeight: 'bold',
                                    fontSize: 18,
                                },
                            },
                            position: 'inside',
                            color: '#FFF',
                            textShadowBlur: 5,
                            textShadowOffsetX: 1,
                            textShadowOffsetY: 2,
                            textShadowColor: 'rgba(0,0,0,0.3)',
                        },

                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 0
                            }
                        }
                    },
                    hoverAnimation: false,
                },
                {
                    label: {
                        show: false
                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 0
                            }
                        }
                    },
                    value: 100 - num1,
                    hoverAnimation: false,
                    itemStyle: {
                        color: 'rgba(0,0,0,0)',
                    },
                }
            ]
        },
        {
            type: 'pie',
            radius: ['28%', '29%'],
            center: ['50%', '50%'],
            z: 0,
            data: [{
                hoverOffset: 1,
                value: num1,
                name: '',
                itemStyle: {
                    color: '#d8d9d7',
                },
                label: {
                    show: false
                },
                labelLine: {
                    normal: {
                        smooth: true,
                        lineStyle: {
                            width: 0
                        }
                    }
                },
                hoverAnimation: false,
            }, ]
        },
        {
            type: 'pie',
            radius: ['34%', '41%'],
            center: ['50%', '50%'],
            z: 1,
            startAngle: 10,
            data: [{
                    hoverOffset: 1,
                    value: num2,
                    name: '',
                    itemStyle: {
                        color: '#abc240',
                    },
                    label: {
                        normal: {
                            show: true,
                            formatter: "{r|{c}%}",
                            rich: {
                                r: {
                                    color: 'rgba(255,255,255,1)',
                                    fontWeight: 'bold',
                                    fontSize: 18,
                                },
                            },
                            position: 'inside',
                            color: '#FFF',
                            textShadowBlur: 5,
                            textShadowOffsetX: 1,
                            textShadowOffsetY: 2,
                            textShadowColor: 'rgba(0,0,0,0.3)',
                        },

                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 0
                            }
                        }
                    },
                    hoverAnimation: false,
                },
                {
                    label: {
                        show: false
                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 0
                            }
                        }
                    },
                    value: 100 - num2,
                    hoverAnimation: false,
                    itemStyle: {
                        color: 'rgba(0,0,0,0)',
                    },
                }
            ]
        },
        {
            type: 'pie',
            radius: ['37%', '38%'],
            center: ['50%', '50%'],
            z: 0,
            data: [{
                hoverOffset: 1,
                value: num1,
                name: '',
                itemStyle: {
                    color: '#d8d9d7',
                },
                label: {
                    show: false
                },
                labelLine: {
                    normal: {
                        smooth: true,
                        lineStyle: {
                            width: 0
                        }
                    }
                },
                hoverAnimation: false,
            }, ]
        },
        {
            type: 'pie',
            radius: ['43%', '50%'],
            center: ['50%', '50%'],
            z: 1,
            startAngle: 23,
            data: [{
                    hoverOffset: 1,
                    value: num3,
                    name: '',
                    itemStyle: {
                        color: '#50c8ac',
                    },
                    label: {
                        normal: {
                            show: true,
                            formatter: "{r|{c}%}",
                            rich: {
                                r: {
                                    color: 'rgba(255,255,255,1)',
                                    fontWeight: 'bold',
                                    fontSize: 18,
                                },
                            },
                            position: 'inside',
                            color: '#FFF',
                            textShadowBlur: 5,
                            textShadowOffsetX: 1,
                            textShadowOffsetY: 2,
                            textShadowColor: 'rgba(0,0,0,0.3)',
                        },

                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 0
                            }
                        }
                    },
                    hoverAnimation: false,
                },
                {
                    label: {
                        show: false
                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 0
                            }
                        }
                    },
                    value: 100 - num3,
                    hoverAnimation: false,
                    itemStyle: {
                        color: 'rgba(0,0,0,0)',
                    },
                }
            ]
        },
        {
            type: 'pie',
            radius: ['46%', '47%'],
            center: ['50%', '50%'],
            z: 0,
            data: [{
                hoverOffset: 1,
                value: num1,
                name: '',
                itemStyle: {
                    color: '#d8d9d7',
                },
                label: {
                    show: false
                },
                labelLine: {
                    normal: {
                        smooth: true,
                        lineStyle: {
                            width: 0
                        }
                    }
                },
                hoverAnimation: false,
            }, ]
        },
    ]
};