echarts饼状图的创建

echarts创建饼状图

第一步，使用echarts对div进行初始化。

var hydrangeaClick = echarts.init(document.getElementById('hydrangeaClick'));

第二步，设置标题，图例

hydrangeaClick.setOption({
			title:{
				text:'点击抛绣球次数'//标题
			},
			tooltip:{trigger:'item',
					 formatter:'{a}<br/>{b}:{c}({d}%)'},//鼠标放在一个扇区上的数据浮框显示方式
			legend:{ x : 'center',//图例-水平方向(或x轴方向)水平,其他参数:left,right
        			 y : 'bottom',//图例-垂直方向(或y轴方向)水平,其他参数:middle,up
					 data:['版本A','版本B']},//图例数据
			series:[{
					name:'点击抛绣球次数',
					type:'pie',
					radius:['55%','70%'],//饼状图内圈大小，外圈大小
					avoidLabelOverlap: true,
					label:{
						normal: {show: false,
                    			position: 'center' },
               			emphasis: {
                    		show: true,//中间显示鼠标选中时的图例
                    			textStyle: {
                        		fontSize: '30',
                        		fontWeight: 'bold'}
                		}
					},
					labelLine:{
						normal:{
							show:false
						}
					},
					data:[]
				}]
		});

第三步，数据异步加载

	$.get('abhydrangeaClick?startDate=${startDate}&endDate=${endDate}').done(function(data){
			var obj = JSON.parse(data);
			hydrangeaClick.setOption({
				series:[{
						type:'pie',
						name:'点击抛绣球次数',//要和第二步中的series中的name一致，否则无法显示。
						data:[{
							name:obj[0].label,
							value:obj[0].data
						},{
							name:obj[1].label,
							value:obj[1].data
						}]
						
					}]
			});
		});

$.get('url',function(data){
		});

最后效果