Echarts（3.x版）官網實例的數據都是靜態的，實際使用中往往會要求從服務器端取數據進行動態顯示，官網教程裡給出的異步數據加載很粗略，下面就以官網最簡單的實例為例子，詳細演示如下過程：1.客戶端通過ajax發送請求；2.服務器端Servlet接收請求；3.生成json數據並返回給客戶端；4.客戶端接收數據後顯示。
1.客戶端通過ajax發送請求
先繪制一個最簡單的Echarts圖表：
（這裡就直接貼上代碼了，直接用的是官網教程裡異步數據加載和更新裡的代碼）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="echarts.min.js"></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="jquery-1.12.3.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" ></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 顯示標題，圖例和空的坐標軸
myChart.setOption({
title: {
text: '異步數據加載示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: []
}]
});
</script>
</body>
</html>
看到了吧，現在option中的xAxis和yAxis裡的data都是空值。待會兒我們會用從服務器取回的數據去”填滿“它。
下面貼上補充了ajax部分的完整前端代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="echarts.min.js"></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="jquery-1.12.3.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" ></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 顯示標題，圖例和空的坐標軸
myChart.setOption({
title: {
text: '異步數據加載示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: []
}]
});
myChart.showLoading(); //數據加載完之前先顯示一段簡單的loading動畫
var names=[]; //類別數組（實際用來盛放X軸坐標值）
var nums=[]; //銷量數組（實際用來盛放Y坐標值）
$.ajax({
type : "post",
async : true, //異步請求（同步請求將會鎖住浏覽器，用戶其他操作必須等待請求完成才可以執行）
url : "TestServlet", //請求發送到TestServlet處
data : {},
dataType : "json", //返回數據形式為json
success : function(result) {
//請求成功時執行該函數內容，result即為服務器返回的json對象
if (result) {
for(var i=0;i<result.length;i++){
names.push(result[i].name); //挨個取出類別並填入類別數組
}
for(var i=0;i<result.length;i++){
nums.push(result[i].num); //挨個取出銷量並填入銷量數組
}
myChart.hideLoading(); //隱藏加載動畫
myChart.setOption({ //加載數據圖表
xAxis: {
data: names
},
series: [{
// 根據名字對應到相應的系列
name: '銷量',
data: nums
}]
});
}
},
error : function(errorMsg) {
//請求失敗時執行該函數
alert("圖表請求數據失敗!");
myChart.hideLoading();
}
})
</script>
</body>
</html>
2.服務器端Servlet接收請求
客戶端的請求url是’TestServlet‘，那我們得先在web.xml配置以下映射：
<servlet>
<servlet-name>TestServlet</servlet-name>
<servlet-class>test.TestServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>TestServlet</servlet-name>
<url-pattern>/TestServlet</url-pattern>
</servlet-mapping>
然後就來著手寫處理客戶端請求的TestServlet啦！
3.生成json數據並返回給客戶端
生成Json數據要用到額外的jar包，這裡我使用的jackson，json-lib 2010年就沒有再更新了… （2016-5-3日更：發現Google出品的Gson也蠻好用的，重點是很小巧，只需引入一個jar就搞定，用法也很簡單）
簡單介紹一下jackson的用法：
①：先去http://mvnrepository.com/下載 jackson-core.jar，jackson-annotations.jar，jackson-databind.jar（都是2.x版本，jackson官網不知為何不提供服務了…這三個jar讓我一陣好找）
②：在項目的項目WEB-INF/lib下引入這三個jar
然後就可以在TestServlet裡使用jackson提供的工具類了。（關於jackson的詳細用法，這裡貼一下官網教程：http://wiki.fasterxml.com/JacksonInFiveMinutes）
TestServlet代碼如下：
package test;
import java.io.IOException;
import java.util.*;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
public class TestServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Product> list = new ArrayList<Product>();
//這裡把“類別名稱”和“銷量”作為兩個屬性封裝在一個Product類裡，每個Product類的對象都可以看作是一個類別（X軸坐標值）與銷量（Y軸坐標值）的集合
list.add(new Product("襯衣", 10));
list.add(new Product("短袖", 20));
list.add(new Product("大衣", 30));
ObjectMapper mapper = new ObjectMapper(); //提供java-json相互轉換功能的類
String json = mapper.writeValueAsString(list); //將list中的對象轉換為Json格式的數組
//System.out.println(json);
//將json數據返回給客戶端
response.setContentType("text/html; charset=utf-8");
response.getWriter().write(json);
}
TestServlet類中用到的自定義的Product類代碼如下：
package test;
public class Product {
private String name; //類別名稱
private int num; //銷量
public Product(String name, int num) {
this.name = name;
this.num = num;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
}
4.客戶端接收數據後顯示
客戶端接受服務器數據並解析後，就可以正常顯示圖表數據了：
