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

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到这里三种都结束了，其实都是一样，写一种应该可以，但是我了笨笨的自己还是多些两个吧！！！