开发页面时，涉及到图表，使用的是Echart的2.0，后来升级到了3.0，都很好用。
下面先说正常流程，然后说动态获取List和Map类型的数据
图表中展示数据时，需要传入固定格式的数据，我一般会把后台数据组织成按照","（英文逗号）分隔的字符串，页面js直接使用，
后台代码如下：
StringBuilder x = new StringBuilder();
StringBuilder numY = new StringBuilder();
Iterator<String> it = keys.iterator();
boolean bool = false;//是否添加分隔符的标识，即逗号“,”
while(it.hasNext()){
String key = it.next();
if(bool){
x.append(",");
numY.append(",");
}else{
bool = true;
}
x.append(key);
numY.append(numMap.get(key));
}
PS：keys和numMap就是数据源
页面直接使用js设置，如下：
var xData = $("#xData").val().split(",");
var numYData = $("#numYData").val().split(",");
xAxis : [{type : 'category',data : xData}],
series : [{name:'已执行金额',type:'line',data:amountYData}]
===========================================================
如果页面需要局部刷新图表，那就涉及到了动态获取数据，ajax还是首选的办法，后台把图表中需要的数据封装到List或者Map当中，
页面js使用JSON相关的办法，可以直接读取
List如下：
$.ajax({
url: '/order_statistic/refresh_table/?beginDate=' + beginDate + '&endDate=' + endDate,
type:'get',
success:function(data){
if(data){
var txt = '';
var jsonData = JSON.parse(data); //把后台传来的数据转来JSON格式
for (x in jsonData) { //遍历JSON格式的数组取元素, x代表下标
txt += '<tr><td>' + jsonData[x].name + '</td>'
}
}else{
alert("暂时没有数据");
}
}
});
其中name是每个List元素的一个属性
Map则把success回调内部换成如下：
if(data){
var jsonData = JSON.parse(data); //把后台传来的数据转来JSON格式
$("#xData").val(jsonData.x);
}else{
alert("暂时没有数据");
}
其中的x则是Map其中的一个kay