使用ajax异步请求渲染echarts饼图

使用ajax异步请求渲染echarts饼图

一、echarts是什么？

1、 Echarts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11），Chrome，Firefox，Safari等。

2、底层依赖轻量级Canva+库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

3、ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

二、使用步骤

1.引入js

代码如下（示例）：

<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>

2.创建一个表格

代码如下（示例）：

<div class="x-body">
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="main" style="width: 60%; height: 300px;"></div>
	</div>

3.使用js

代码如下（示例）：

<script type="text/javascript">
		var chartDom = document.getElementById('main');
		var myChart = echarts.init(chartDom);
		var option;

		myChart.setOption({

			title : {
				text : '大学资源使用情况',
				left : 'center'
			},
			tooltip : {
				trigger : 'item'
			},
			legend : {
				orient : 'vertical',
				left : 'left',
			},
			series : [ {
				name : '访问来源',
				type : 'pie',
				radius : '50%',
				data : [],
				emphasis : {
					itemStyle : {
						shadowBlur : 10,
						shadowOffsetX : 0,
						shadowColor : 'rgba(0, 0, 0, 0.5)'
					}
				}
			} ]

		});

		$.post('getNum', function(res) {
			if (res.data.length==1){
				myChart.setOption({
					series : [ {
						data : [ {
							value : res.data[0].peopleNum,
							name : '阅览室一'
						}],
					} ]
				})
			}
			if (res.data.length==2){
				myChart.setOption({
					series : [ {
						data : [ {
							value : res.data[0].peopleNum,
							name : '阅览室一'
						}, {
							value : res.data[1].peopleNum,
							name : '阅览室二'
						} ],
					} ]
				})
			}
			if (res.data.length==3){
				myChart.setOption({
					series : [ {
						data : [ {
							value : res.data[0].peopleNum,
							name : '阅览室一'
						}, {
							value : res.data[1].peopleNum,
							name : '阅览室二'
						}, {
							value : res.data[2].peopleNum,
							name : '阅览室三'
						} ],
					} ]
				})
			}
				
		}, 'json');
	</script>

使用res.data.length判断的原因是，本人不知道改怎么循环，怎么判断条数。
饼图的块数少的情况下可以这个笨方法

4.controller返回数据

	@RequestMapping("getNum")
	public Object getNum() {
		List<Statistics> list = logService.getNum();
		return new Result(0, "列表", list, list.size());
	}

---

总结

提示：本人正在学习中，，此正当笔记使用，有大神可以教教我别方法判断条数┗|｀O′|┛ 嗷~~