echarts实现环状渐变图

最近后台又设计了新的ui，我这个后端工程师又开始写前端页面了。。。
话不多说，上效果图，上代码，注意echarts版本会影响细微的表现效果

    //  初始化统计图表
    var xunjian = echarts.init(document.getElementById('xunjian_echart'));
    var baogao = echarts.init(document.getElementById('baogao_echart'));
    var lvxin = echarts.init(document.getElementById('lvxin_echart'));
    //设置数据
    option_xunjian = {
        backgroundColor: 'white',
        padding: 15,
        title: {
            text: '巡检信息',
            x: 'left',
            y: 'top',
            itemGap: 10,
            backgroundColor: 'white',
            // 主标题文本样式设置
            textStyle: {
                fontSize: 16,
                fontWeight: 'normal',
                color: '#333333'
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'horizontal',
            y: 'bottom',
            data: ['正常', '超时', '报警',],
        },
        series: [
            {
                name: '状态',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {
                        value: 330, name: '正常', itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#2D38FF'},
                                    {offset: 1, color: '#969BFB'}
                                ],
                                globalCoord: true // 缺省为 false
                            }
                        },
                    },
                    {
                        value: 310, name: '超时', itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#FFC700'},
                                    {offset: 1, color: '#FFE13C'}
                                ],
                                globalCoord: true // 缺省为 false
                            }
                        }
                    },
                    {
                        value: 234, name: '报警', itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#FF4200'},
                                    {offset: 1, color: '#FE8257'}
                                ],
                                globalCoord: true // 缺省为 false
                            }
                        }
                    },
                ]
            }
        ]
    };
    option_baogao = {
        backgroundColor: 'white',
        title: {
            text: '报告信息',
            x: 'left',
            y: 'top',
            itemGap: 10,
            backgroundColor: 'white',
            // 主标题文本样式设置
            textStyle: {
                fontSize: 16,
                fontWeight: 'normal',
                color: '#333333'
            },
        },
        tooltip: {
            trigger: 'item',
            show: true,
            confine: true,
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'horizontal',
            y: 'bottom',
            data: ['正常', '超时', '报警',],
        },
        series: [
            {
                name: '状态',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    color: 'rgba(255, 255, 255, 0.3)',
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                data: [
                    {
                        value: 630, name: '正常', itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#2D38FF'},
                                    {offset: 1, color: '#969BFB'}
                                ],
                                globalCoord: true // 缺省为 false
                            }
                        },
                    },
                    {
                        value: 310, name: '超时', itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#FFC700'},
                                    {offset: 1, color: '#FFE13C'}
                                ],
                                globalCoord: true // 缺省为 false
                            }
                        }
                    },
                    {
                        value: 234, name: '报警', itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#FF4200'},
                                    {offset: 1, color: '#FE8257'}
                                ],
                                globalCoord: true // 缺省为 false
                            }
                        }
                    },
                ]
            }
        ]
    };
    option_lvxin = {
        backgroundColor: 'white',
        title: {
            text: '滤芯信息',
            x: 'left',
            y: 'top',
            itemGap: 10,
            backgroundColor: 'white',
            // 主标题文本样式设置
            textStyle: {
                fontSize: 16,
                fontWeight: 'normal',
                color: '#333333'
            },
        },
        tooltip: {
            trigger: 'item',

            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'horizontal',
            y: 'bottom',
            data: ['正常', '超时', '报警',],
        },
        series: [
            {
                name: '来源',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {
                        value: 580, name: '正常', itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#2D38FF'},
                                    {offset: 1, color: '#969BFB'}
                                ],
                                globalCoord: true // 缺省为 false
                            }
                        },
                    },
                    {
                        value: 310, name: '超时', itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#FFC700'},
                                    {offset: 1, color: '#FFE13C'}
                                ],
                                globalCoord: true // 缺省为 false
                            }
                        }
                    },
                    {
                        value: 234, name: '报警', itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#FF4200'},
                                    {offset: 1, color: '#FE8257'}
                                ],
                                globalCoord: true // 缺省为 false
                            }
                        }
                    },
                ]
            }
        ]
    };
    //实例化
    xunjian.setOption(option_xunjian);
    baogao.setOption(option_baogao);
    lvxin.setOption(option_lvxin);