在使用echart时使用异步方法来填充数据

于 2016-09-10 17:40:01 发布
阅读量3.7k 收藏 3
点赞数 2
CC 4.0 BY-SA版权
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/QH_JAVA/article/details/52495808

echart之前使用过但是忘了怎么使用的，不记得当时时同步实现还是异步实现的，现在用的时候发现使用同步有点麻烦，就使用异步方法来实现了，记录一下：

在项目中使用到了3个图： 折线、环形、柱状图 下面我们一个个来看看数据的填充

这里描述一下整个流程，这样看起来应该理解比较快：

1、在jsp 或html页面定义一个位置来存放生成的图形，就好入下面定义的四个div

2、写js来加载图形，这里的话就是queryData()方法来实现加载

3、在queryData()方法中调用getChartData() 方法来发送ajax请求获取数据在给他赋值。

4、ok就是这样的具体实现细节可以看看下面的代码

注意：我们上面都说方法来实现，那怎么触发方法那哈哈 看这：

           $(function(){
            queryData();
queryData2();
queryData3();
queryData4();
});

是不是就ok了！！！  这个流程就是这样了……


图形展示地方：

 <div  id="in_list">
	 <div id="main" style="width: 430px;height:200px;float:left; margin-top:8px;border: 1px solid #b5b5b6;"></div>
	<div id="main2" style="width: 450px;height:200px;float:left;margin-left:8px;margin-top:8px;border: 1px solid #b5b5b6;"></div>
	<div id="main3" style="width: 430px;height:200px;float:left;margin-top:8px; border: 1px solid #b5b5b6;"></div>
	<div id="main4" style="width: 450px;height:200px;float:left;margin-left:8px;margin-top:8px;border:1px solid #b5b5b6"></div>
</div>


这里就是四个图像展示的地方

一、折线图

1、js部分

<script type="text/javascript">
//定义的四个全局变量，也代表了四个图像
//年龄结构
var myChart ;
//男女比例
 var myChart2;
 //部门柱状图
 var myChart3;
 //星座柱状图
  var myChart4;
function queryData(){
	  myChart = echarts.init(document.getElementById('main'));

     // 指定图表的配置项和数据
    option = {
	title: {
		text: '年龄结构'
	},
	tooltip: {
		trigger: 'axis'
	},
	legend: {
		data:['年龄结构']
	},
	grid: {
		left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true
	},
	toolbox: {
		feature: {
			saveAsImage: {}
		}
	},
	xAxis: {
		type: 'category',
		boundaryGap: false,
		data: ['年龄','20岁以下','30岁','40岁','50岁','60岁','60岁以上']
	},
	yAxis: {
		type: 'value'
		
	},
	series: [
		{
			name:'员工数',
			type:'line',
			stack: '总量',
			itemStyle:{
				normal:{  
                     lineStyle:{  
                         color:'#b5b5b6'  
                     }  
				 }
			},
			data:[]// 注意这里的这个括号是要保留虽然返回的数据带着括号！
		}
	]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myChart.hideLoading();  
        getChartData();//aja后台交互
        
}

function getChartData(){
	var moption1 = myChart.getOption();  
	$.ajax({
		url:'staff_getInfo.do',
		type:'POST',
		success:function(data){
                        // 将返回的数据赋值给变量
			moption1.series[0].data = data.series;
			myChart.hideLoading();  
                        // 设置将这个变量设置为图像的值。
			myChart.setOption(moption1);
		}
	});
}

你也看到了data:[] 这里的数据就是我们要从后台获取的值，注意[] 括号不能丢，如果丢了js报错。

这里的data:[] 就是我们要从后台获取的数据。 而getChartData() 方法就是发送ajax请求获取值，赋值的一个函数。


2、后台java代码： 

public void getInfo(){
       //组装数据
		JSONArray jsonA= new JSONArray();
		int age=0;
		int  age20=0;
		int age30=0;
		int age40=0;
		int age50=0;
		int age60=0;
		// json格式向前台传递
		JSONObject json= new JSONObject();
		jsonA.add(age);
		jsonA.add(age20);
		jsonA.add(age30);
		jsonA.add(age40);
		jsonA.add(age50);
		jsonA.add(age60);
		
		json.put("series", jsonA);
		out.print(json.toString());
		
	}

ok这样ajax返回的数据使用 
moption1.series[0].data = data.series; 给指定的变量赋值。

myChart.setOption(moption1);  将这个变量赋值给myChart这个变量，也就是折线图。

二、环形图：

1、js，这里使用到的myChart2 在上面的代码中已经定义为全局变量

 // 环形图
     function queryData2(){
    	 var i=0;
    	 var colors=['#393939','#f5b031','#fad797','#59ccf7','#c3b4df'];
    	 myChart2 = echarts.init(document.getElementById('main2'));
    		option2 = {
    	    tooltip : {
    	        trigger: 'item',
    	        formatter: "{a} <br/>{b} : {c} ({d}%)"
    	    },
    	    legend: {
    	        orient : 'vertical',
    	        x : 'left',
    	        data:['女','男']
    	    },
    	    toolbox: {
    	        show : true,
    	        feature : {
    			
    	            saveAsImage : {show: true}
    	        }
    	    },
    	    calculable : true,
    	    series : [
    	        {
    	            name:'性别结构',
    	            type:'pie',
    	            radius : ['30%', '70%'],
    	            itemStyle : {
    	                normal : {
    	                	color:function(){
    	                		return colors[i++]; 
    	                		},
    	                    label : {
    	                        show : false
    	                    },
    	                    labelLine : {
    	                        show : false
    	                    }
    	                },
    	                emphasis : {
    	                    label : {
    	                        show : true,
    	                        position : 'center',
    	                        textStyle : {
    	                            fontSize : '30',
    	                            fontWeight : 'bold'
    	                        }
    	                    }
    	                }
    	            },
    	            data:[]
    	        }
    	    ]
    	};
    	  myChart2.setOption(option2);
    	  myChart2.hideLoading();  
          getChartData2();//aja后台交互
     }
     
     //环形图获取数据ajax方法
     function getChartData2(){
    		var moption2 = myChart2.getOption();  
    		$.ajax({
    			url:'staff_getSexInfo.do',
    			type:'POST',
    			success:function(data){
    				moption2.series[0].data = data.data;
    				myChart2.hideLoading();  
    				myChart2.setOption(moption2);
    			}
    		});
    	}
这里的data:[] 就是我们要从后台获取的数据。 而getChartData2() 方法就是发送ajax请求获取值赋值的一个函数


2、后台java代码：

public void getSexInfo(){
       // 具体数据在按业务获取
		int gir=1;
		int boy=0;
		
		JSONObject jsong= new JSONObject();
		jsong.put("value", gir);
		jsong.put("name", "女");
		
		JSONObject jsonm= new JSONObject();
		jsonm.put("value", boy);
		jsonm.put("name", "男");
		
		JSONArray array= new JSONArray();
		array.add(jsonm);
		array.add(jsong);
		
		JSONObject json= new JSONObject();
		json.put("data", array);
		out.print(json.toString());
		
	}


三、柱状图

1、js代码

// 部门柱状图
       function queryData3(){
    	   myChart3 = echarts.init(document.getElementById('main3'));
    	   option3 = {
    	     title : {
    	         text: '部门人员比例',
    	         subtext: '部门人数'
    	     },
    	     tooltip : {
    	         trigger: 'axis'
    	     },
    	    
    	     toolbox: {
    	         show : true,
    	         feature : {
    	             mark : {show: true},
    	             saveAsImage : {show: true}
    	         }
    	     },
    	     calculable : true,
    	     xAxis : [
    	         {
    	             type : 'category',
    	             data : []
    	         }
    	     ],
    	     yAxis : [
    	         {
    	             type : 'value'
    	         }
    	     ],
    	     series : [
    	         {
    	             name:'部门人数',
    	             type:'bar',
    	             data:[],
    	             //颜色
    	             itemStyle:{
    	                 normal:{
    	                   color:'#f5b031',
    	                   }
    	            },
    	             markPoint : {
    	                 data : [
    	                     {type : 'max', name: '最大值'},
    	                     {type : 'min', name: '最小值'}
    	                 ]
    	             },
    	             markLine : {
    	                 data : [
    	                     {type : 'average', name: '平均值'}
    	                 ]
    	             }
    	         }
    	     ]
    	 };
    	   myChart3.setOption(option3);  
    	   myChart3.hideLoading();  
           getChartData3();//aja后台交互
  }
     //部门柱状图
     function getChartData3(){
    		var moption3 = myChart3.getOption();  
    		$.ajax({
    			url:'staff_getDepartInfo.do',
    			type:'POST',
    			success:function(data){
    				moption3.xAxis[0].data=data.data;
    				moption3.series[0].data = data.value;
    				myChart3.hideLoading();  
    				myChart3.setOption(moption3);
    			}
    		});
    	}
这个柱状图和之前的两个不一样，因为这里的x轴 y轴都没有数据所以都需要我们从后台传递过来，也就是xAxis 中的data:[] 和series 中的data[] 这两个数。

同样 getChartData3()方法就是用来发送ajax请求获取数据，赋值的过程。

2、后台java代码

public void getDepartInfo(){
		
		//部门,x轴数据
		JSONArray jsonArray= new JSONArray();
		jsonArray.add("a部门");
		jsonArray.add("b部门");
		jsonArray.add("c部门");
		jsonArray.add("d部门");
		//各个部门人数 y轴数据
		JSONArray jsonArr= new JSONArray();
		jsonArr.add(15);
		jsonArr.add(20);
		jsonArr.add(25);
		jsonArr.add(15);
		JSONObject json= new JSONObject();
		json.put("data", jsonArray);
		json.put("value", jsonArr);
		out.print(json.toString());
	}

ok到这里三种都结束了，其实都是一样，写一种应该可以，但是我了笨笨的自己还是多些两个吧！！！



评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值