Echarts（3.x版）官網實例的數據都是靜態的，實際使用中往往會要求從伺服器端取數據進行動態顯示，官網教程里給出的非同步數據載入很粗略，下麵就以官網最簡單的實例為例子，詳細演示如下過程：1.客戶端通過ajax發送請求；2.伺服器端Servlet接收請求；3.生成json數據並返回給客戶端；4.客戶 ...
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" style="width: 600px;height:400px;"></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" style="width: 600px;height:400px;"></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年就沒有再更新了…
簡單介紹一下jackson的用法：
①：先去http://mvnrepository.com/下載 jackson-core.jar，jackson-annotations.jar，jackson-databind.jar（都是2.x版本，jackson官網不知為何不提供服務了…這三個jar讓我一陣好找）
②：在項目的 Properties —> Build Path下引入這三個jar，註意還要在 Properties —> Deployment Assembly（Add —> Archives From File System）下引入這三個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.客戶端接收數據後顯示
客戶端接受伺服器數據並解析後，就可以正常顯示圖表了：
