三个进度条echarts 饼配置项内容和展示

      var num1 = 75;
var num2 = 80;
var num3 = 55;
option = {
    backgroundColor: '#393265',
    title: [{
        text: '16%',
        left: '15%',
        top: '47%',
        textAlign: 'center',
        textStyle: {
            fontSize: '50',
            fontWeight: '100',
            color: '#fff',
            textAlign: 'center',
        },
    }, {
        text: '7%',
        left: '49.5%',
        top: '47%',
        textAlign: 'center',
        textStyle: {
            fontSize: '50',
            fontWeight: '100',
            color: '#fff',
            textAlign: 'center',
        },
    }, {
        text: '31%',
        left: '79.5%',
        top: '47%',
        textAlign: 'center',
        textStyle: {
            fontSize: '50',
            fontWeight: '100',
            color: '#fff',
            textAlign: 'center',
        },
    }, ],
    series: [{
            type: 'pie',
            radius: ['30%', '33%'],
            center: ['15%', '50%'],
            data: [{
                    hoverOffset: 1,
                    value: num1,
                    name: '',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
                                offset: 0,
                                color: '#ef29b1'
                            }, {
                                offset: 1,
                                color: '#fd7225'
                            }])
                        }
                    },
                    label: {
                        show: false
                    },
                    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(251, 200, 79, 0)',
                    },
                }
            ]
        },
        {
            type: 'pie',
            radius: ['45%', '50%'],
            center: ['50%', '50%'],
            data: [{
                    hoverOffset: 1,
                    value: num2,
                    name: '',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
                                offset: 0,
                                color: '#ef29b1'
                            }, {
                                offset: 1,
                                color: '#fd7225'
                            }])
                        }
                    },
                    label: {
                        show: false
                    },
                    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(232, 85, 63, 0)',
                    },
                }
            ]
        },

        {
            type: 'pie',
            radius: ['30%', '33%'],
            center: ['85%', '50%'],
            data: [{
                    hoverOffset: 1,
                    value: num3,
                    name: '',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
                                offset: 0,
                                color: '#ef29b1'
                            }, {
                                offset: 1,
                                color: '#fd7225'
                            }])
                        }
                    },
                    label: {
                        show: false
                    },
                    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(89, 180, 157, 0)',
                    },
                }
            ]
        },
        //里面嵌套的园
        {
            type: 'pie',
            hoverAnimation: false,
            radius: ['29%', '28.6%'],
            center: ['15%', '50%'],
            startAngle: 16, //起始角度
            tooltip: {
                show: false
            },
            label: {
                normal: {
                    show: false
                }
            },
            data: [{
                    value: 20,
                    name: "",
                    itemStyle: {
                        normal: {
                            color: "#2CB7D7",
                            borderColor: "#2CB7D7",
                        }
                    }
                },
                {
                    value: 30,
                    itemStyle: {
                        normal: {
                            color: 'transparent',
                            borderColor: 'transparent',

                        }
                    }
                },
                {
                    value: 20,
                    name: "",
                    itemStyle: {
                        normal: {
                            color: "#2CB7D7",
                            borderColor: "#2CB7D7",
                        }
                    }
                },
                {
                    value: 30,
                    itemStyle: {
                        normal: {
                            color: 'transparent',
                            borderColor: 'transparent',

                        }
                    }
                },
                {
                    value: 20,
                    name: "",
                    itemStyle: {
                        normal: {
                            color: "#2CB7D7",
                            borderColor: "#2CB7D7",
                        }
                    }
                },
                {
                    value: 30,
                    itemStyle: {
                        normal: {
                            color: 'transparent',
                            borderColor: 'transparent',

                        }
                    }
                },
                {
                    value: 20,
                    name: "",
                    itemStyle: {
                        normal: {
                            color: "#2CB7D7",
                            borderColor: "#2CB7D7",
                        }
                    }
                },
                {
                    value: 30,
                    itemStyle: {
                        normal: {
                            color: 'transparent',
                            borderColor: 'transparent',

                        }
                    }
                }
            ]
        },
        {
            type: 'pie',
            hoverAnimation: false,
            radius: ['44%', '43.6%'],
            center: ['50%', '50%'],
            startAngle: 16, //起始角度
            tooltip: {
                show: false
            },
            label: {
                normal: {
                    show: false
                }
            },
            data: [{
                    value: 20,
                    name: "",
                    itemStyle: {
                        normal: {
                            color: "#2CB7D7",
                            borderColor: "#2CB7D7",
                        }
                    }
                },
                {
                    value: 30,
                    itemStyle: {
                        normal: {
                            color: 'transparent',
                            borderColor: 'transparent',

                        }
                    }
                },
                {
                    value: 20,
                    name: "",
                    itemStyle: {
                        normal: {
                            color: "#2CB7D7",
                            borderColor: "#2CB7D7",
                        }
                    }
                },
                {
                    value: 30,
                    itemStyle: {
                        normal: {
                            color: 'transparent',
                            borderColor: 'transparent',

                        }
                    }
                },
                {
                    value: 20,
                    name: "",
                    itemStyle: {
                        normal: {
                            color: "#2CB7D7",
                            borderColor: "#2CB7D7",
                        }
                    }
                },
                {
                    value: 30,
                    itemStyle: {
                        normal: {
                            color: 'transparent',
                            borderColor: 'transparent',

                        }
                    }
                },
                {
                    value: 20,
                    name: "",
                    itemStyle: {
                        normal: {
                            color: "#2CB7D7",
                            borderColor: "#2CB7D7",
                        }
                    }
                },
                {
                    value: 30,
                    itemStyle: {
                        normal: {
                            color: 'transparent',
                            borderColor: 'transparent',

                        }
                    }
                }
            ]
        },
        {
            type: 'pie',
            hoverAnimation: false,
            radius: ['29%', '28.6%'],
            center: ['85%', '50%'],
            startAngle: 16, //起始角度
            tooltip: {
                show: false
            },
            label: {
                normal: {
                    show: false
                }
            },
            data: [{
                    value: 20,
                    name: "",
                    itemStyle: {
                        normal: {
                            color: "#2CB7D7",
                            borderColor: "#2CB7D7",
                        }
                    }
                },
                {
                    value: 30,
                    itemStyle: {
                        normal: {
                            color: 'transparent',
                            borderColor: 'transparent',

                        }
                    }
                },
                {
                    value: 20,
                    name: "",
                    itemStyle: {
                        normal: {
                            color: "#2CB7D7",
                            borderColor: "#2CB7D7",
                        }
                    }
                },
                {
                    value: 30,
                    itemStyle: {
                        normal: {
                            color: 'transparent',
                            borderColor: 'transparent',

                        }
                    }
                },
                {
                    value: 20,
                    name: "",
                    itemStyle: {
                        normal: {
                            color: "#2CB7D7",
                            borderColor: "#2CB7D7",
                        }
                    }
                },
                {
                    value: 30,
                    itemStyle: {
                        normal: {
                            color: 'transparent',
                            borderColor: 'transparent',

                        }
                    }
                },
                {
                    value: 20,
                    name: "",
                    itemStyle: {
                        normal: {
                            color: "#2CB7D7",
                            borderColor: "#2CB7D7",
                        }
                    }
                },
                {
                    value: 30,
                    itemStyle: {
                        normal: {
                            color: 'transparent',
                            borderColor: 'transparent',

                        }
                    }
                }
            ]
        }
    ]
};