echarts饼图动态加载数据

echarts饼图动态加载数据

1. 前台页面展示
   注意点：准备一个有大小设置的div，引用js，ajax加载数据。

<div id="container10" style="width: 100%;height: 90%">
          
        </div>
<script type='text/javascript' src="<%=basePath%>/static/js/jquery-1.11.0.min.js"></script>
<script type='text/javascript' src="<%=basePath%>static/echarts/js/echarts-all.js"></script>
<script type="text/javascript">
		$(function(){
			init();
		});
		
		function init(){
			$.ajax({
				type : "POST",			
				url : "<%=basePath%>user/optiondate",		
				contentType: "application/x-www-form-urlencoded; charset=utf-8", 		
				success : function(date) {		
					//console.log(date);	
					var data1=eval("("+date+")");//转换为json对象
						//console.log(date);	
					var dom10 = document.getElementById("container10");
					var myChart10 = echarts.init(dom10);	
					var servicedata=[];
		            for(var i=0;i<data1.name.length;i++){
		                 var obj=new Object();
		                 obj.name=data1.name[i]; 
		                 obj.value=data1.data[i];
		                 servicedata[i]=obj;
		             }
					option10 = {
					    title: {
					        left: 'center',
					    },
					    tooltip: {
					        trigger: 'item',
					        formatter: '{a} <br/>{b} : {c} ({d}%)',
					    },
					    series: [
					        {
					            name: '统计',
					            type: 'pie',
					            radius: '55%',
					            center: ['50%', '50%'],
// 					            data: [
// 					                {value: 335, name: '直接访问'},
// 					                {value: 310, name: '邮件营销'},
// 					                {value: 234, name: '联盟广告'},
// 					                {value: 135, name: '视频广告'},
// 					                {value: 1548, name: '搜索引擎'}
// 					            ],
					            data:servicedata,
					            emphasis: {
					                itemStyle: {
					                    shadowBlur: 10,
					                    shadowOffsetX: 0,
					                    shadowColor: 'rgba(0, 0, 0, 0.5)',
					                }
					            }
					        }
					    ]
					};
					myChart10.setOption(option10, true);
				}
			});
		}
		</script>

2. 后台数据处理

	import com.google.gson.Gson;
	@RequestMapping(value="/optiondate",produces = "text/plain;charset=utf-8")
	@ResponseBody
	public String optiondate(Model model) {
		Map<String, Object> map = new HashMap<String, Object>();
		List<String> name= new ArrayList<String>();
		List<String> data= new ArrayList<String>();
		//根据自己的业务去获取数据
		List<OptionDate> opdatelist =   ghnlService.getOptionDate();
		for (int i = 0; i < opdatelist.size(); i++) {
			name.add((String)opdatelist.get(i).getStatue());
			data.add((String)opdatelist.get(i).getNum());
		}
        map.put("name", name);
        map.put("data", data);       
        Gson gson=new Gson();
        String mapJson=gson.toJson(map);
		return mapJson;
	}

3,。效果