空气指数:优echarts 饼配置项内容和展示

使用饼状图绘制环形渐变效果，达到类似于空气质量限值区间的效果

      option = {
    backgroundColor:'#eee',
    title: [{
        text: '空气指数:优',
        x: 'center',
        top: '55%',
        textStyle: {
            color: 'green',
            fontSize: 16,
            fontWeight: '100',
        }
    }, {
        text: '25',
        x: 'center',
        top: '45%',
        textStyle: {
            fontSize: '60',
            color: 'green',
            fontFamily: 'DINAlternate-Bold, DINAlternate',
            foontWeight: '600',
        },
    }],
    series: [
        {
            type: 'pie',
            showBackground: true,
            radius: ['48%', '52%'],
            hoverAnimation: false,
            data: [
                {
                    value:90,
                    itemStyle: {
                        color:{
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'red' // 0% 处的颜色
                            }, {
                                offset: 0.5, color: '#AE0238' // 100% 处的颜色
                            }, {
                                offset: 1, color: '#7B042E' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    },
                    label:{
                        show:false,
                    }
                },
                {
                    value:20,
                    itemStyle: {
                        color:{
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0, color: '#04FF00' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#7B042E' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    },
                    label:{
                        show:false,
                    }
                },
                {
                    value:90,
                    itemStyle: {
                        color:{
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'red' // 0% 处的颜色
                            }, {
                                offset: 0.4, color: '#FFE200' // 100% 处的颜色
                            }, {
                                offset: 0.7, color: '#FFE200' // 100% 处的颜色
                            }, {
                                offset: 1, color: '#04FF00' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    },
                    label:{
                        show:false,
                    }
                },
            ],
        },
    ],

};