Echars饼图入门

function gridShowInfo(values){

	var myChart = echarts.init(document.getElementById('gridChars'));
	// 显示标题，图例和空的坐标轴
	myChart.setOption({
//		title : {
//			text : '栅格详情',
//			subtext : '',
//			x : 'center'
//		},
		tooltip : {
			trigger : 'item',
			formatter : "{a} <br/>{b} : {c} ({d}%)"
		},
		legend : {
            orient : 'vertical',
            right:'0',
			bottom:'10px',
			data : [] 
		},
	
		toolbox : {
			show : true,
			feature : {
				mark : {
					show : true
				},
				/*dataView : {
					show : true,
					readOnly : false
				},*/
//				magicType : {
//					show : true,
//					type : [ 'pie', 'funnel' ],
//					option : {
//						funnel : {
//							x : '25%',
//							width : '50%',
//							funnelAlign : 'left',
//							max : 1548
//						}
//					}
//				},
				restore : {
//					show : true
//				},
//				saveAsImage : {
//					show : true
//				}
			}
		
		},
		series : [ {
			name : '占比',
			type : 'pie',
			radius : ['40%','75%'],
			center : [ '30%', '54%' ],
			data : [],
			 itemStyle : {
	                normal : {
	                    label : {
	                        show : false   //隐藏标示文字
	                    },
	                    labelLine : {
	                        show : false   //隐藏标示线
	                    }
	                }
	            },

		} ]
	});
	myChart.showLoading(); 
	
	
	
	

//	$.each(data.items, function(k, v) {       //遍历返回的JSON数据   
//		names.push(v.name); 
//		values.push({
//			name : v.name,
//			value : v.num
//		});
//	});
	myChart.hideLoading(); //隐藏加载动画
	myChart.setOption({ //加载数据图表                
		legend : { 
			data : [{'name':'[-75,0)','icon':'circle','font':'10px'},{'name':'[-85,-75)','icon':'circle','font':'10px'},{'name':'[-95,-85)','icon':'circle','font':'10px'},{'name':'[-105,-95)','icon':'circle','font':'10px'},{'name':'[-124,-105)','icon':'circle','font':'10px'},{'name':'[-∞,-124)','icon':'circle','font':'10px'},]
		},
		series : [ {
//		data : [{"name":'[-75,0)',"value":1},{"name":"[-85,-75)","value":2},{"name":'[-95,-85)',"value":3}, {"name":'[-105,-95)',"value":1},{"name":"[-124,-105)","value":2},{"name":'[-∞,-124)',"value":3}],
			data :values,
			color: ['#00FF00','#97F5FF','#0000ff', '#ffff00','#ff0000','#000000']
		} ]
	});

	
}

解析：1.首先定义一个MyChars作为父节点

           2.tooltip 是控制弹出，比如鼠标划入时，显示的内容

      

         3.series 是主要控制体  radius 是控制圆的位置及是否同心圆，前一个是同心圆的大小，后一个是本圆的大小

         4.center 是控制圆的位置，上下