echarts 环形饼图

容器

<div id='pm' styel="width:240px;height:270px;"></div>

js

/**
 * 
 * pm2.5
 * obj:颜色对象
 */
result = 11;
function pm(result,obj) {
	//var myChart = echarts.init(document.getElementById('pm'));
	var myChart = echarts.getInstanceByDom(document.getElementById('pm'));
	if(!myChart){
		myChart = echarts.init(document.getElementById('pm'));
	}
	var zhishu="";
	var zhishucolor='#32CD32';//圆圈颜色
	var zhishucolor=obj.line;//圆圈颜色
	//var backgroundColor='#21272A';//背景颜色
	var backgroundColor=obj.bg;//背景颜色
	//var title_color='yellow';//大标题字体颜色
	var title_color=obj.title;//大标题字体颜色
	var ss=0;
	if(result=='0'){
		ss =0;
	}else{
		ss=(result/300)*10;
	}
	//var ss=(result/300)*10;
	var result1= 0;
	if(result!=null){
		if(result>300){
			result1 = 300;
			ss=10;
		}else{
			result1 = result;
		}
	}
	if(result1<=35){
		zhishu ="优";
		zhishucolor='#018CC5';//圆圈颜色
	}else if(result1<=75){
		zhishu ="良";
		zhishucolor='#74A141';
	}else if(result1<=115){
		zhishu="轻度污染";
		zhishucolor='#F09837';
	}else if(result1<=150){
		zhishu="中度污染";
		zhishucolor='#F09837';
	}else if(result1<=250){
		zhishu="重度污染";
		zhishucolor='#F34B01';
	}else{
		zhishu="严重污染";
		zhishucolor='#AA0201';
	}
	
	placeHolderStyle = {
		    normal: {
		        label: {
		            show: false,
		            position: "center"
		        },
		        labelLine: {
		            show: false
		        },
		        color: "#2b426e",
		        borderColor: "#2b426e",
		        borderWidth: 0,
		    },
		    emphasis: {
		        color: "#2b426e",
		        borderColor: "#2b426e",
		        borderWidth: 0
		    }
		};
	option = {
		    backgroundColor: backgroundColor,
		    series: [{
		        name: '值',
		        type: 'pie',
		        clockWise: true, //顺时加载
		        hoverAnimation: false, //鼠标移入变大
		        avoidLabelOverlap: false,
	/*	        animationDuration: function (idx) {//初始动画的时长
				    // 越往后的数据延迟越大
				    return idx * 5000;
				},*/
		        radius: [60, 71],//圆环粗细 （宽度）
		        startAngle:270, // 饼图起始角度（起始生长位置）
		        label:{
		        	normal:{
		        		show:false
		        	},
		        	label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
		        },
		        itemStyle: {
		            normal: {
		                label: {
		                    show: true,
		                    position: 'outside',
		                    
		                },

		                borderWidth: 3,
		                shadowBlur: 40,
		                /*borderColor: zhishucolor,//被color渐变替换*/
		                color: new echarts.graphic.LinearGradient(//环形颜色渐变
								  0, 0, 1, 0,
								  [{
								    offset: 0,
								    color: '#498bf9'
								  },
								  {
								    offset: 1,
								    color: '#52d9fd'
								  }]
								),
		                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
		            }
		        },
		        data: [{
		            value: ss,
		            name: '70%'
		        }, {
		            value: 10-ss,
		            name: '30%',
		            itemStyle: placeHolderStyle
		        }]
		    }, {
		        name: '白',
		        type: 'pie',
		        clockWise: true,
		        hoverAnimation: false,
		        radius: [100, 100],
		        label: {
		            normal: {
		                position: 'center'
		            }
		        },
		        data: [{
		            value: 1,
		            label: {
		                normal: {
		                    formatter: 'PM2.5',
		                    textStyle: {
		                        color: '#8f8f8f',//中间上方字体颜色
		                        fontSize: 20////中间上方字体大小
		                    }
		                }
		            }
		        }, {
		            tooltip: {
		                show: false
		            },
		            label: {
		                normal: {
		                    formatter: '\n'+result+'',
		                    textStyle: {
		                        color: '#55f4ff',//中间字体颜色
		                        fontSize: 25//中间字体大小
		                    }
		                }
		            }
		        },{
		            tooltip: {
		                show: false
		            },
		            label: {
		                normal: {
		                    formatter: zhishu,
		                    textStyle: {
		                        color: '#8f8f8f',//中间最下放字体颜色
		                        fontSize: 20//中间 最下放字体大小
		                    }
		                }
		            }
		        }]
		    }]
		};

	myChart.setOption(option);
	return myChart;

}