Echart异步加载数据--前后端数据交换全过程(第二部分:前台部分)

上一篇后台的数据已经传到前台后:

这部分和大多数文章应该差距不大,只是处理数据的方式大同小异

在自己的页面加入资源文件

<script type="text/javascript" src="../../js/echarts.min.js"></script>
<script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>

不多BB直接上刺刀.这个地方有一个坑,我一直以为后台将数据已经转化为JSON格式的数据,但是在到达前端的时候,data里面的值已经不是后台传过来的数据,而是两个对象.这时候我们依然要通过遍历来接受data中两个数组中的数据.(关键点)

$(function(){
	var myChart = echarts.init(document.getElementById('main'));
	//显示标题，图例和空的坐标轴
	myChart.setOption({
	 title: {
	     text: '异步数据加载示例'
	 },
	 tooltip: {},
	 legend: {
	     data:['销量']
	 },
	 xAxis: {
	     data: []
	 },
	 yAxis: {},
	 series: [{
	     name: '销量',
	     type: 'bar',
	     data: []
	 }]
	});
	
	$.post("${pageContext.request.contextPath }/analysis_findSourceCount.action","",function(data){
		var values=[];
		var names=[];
		$.each(data,function(i,obj){
			values=obj.value;
			names=obj.name;
		});
		myChart.hideLoading();    //隐藏加载动画
        myChart.setOption({
            xAxis: {
                data: names
            },
            series: [{
                // 根据名字对应到相应的系列
                name: '销量',
                data: values
            }]
        });
	},"json"); 
});

显示的内容为: