ajax+servlet實現資料視覺化
一.建立服務端
servlet的程式如下：
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>();
list.add(new Product("小米", 15000));
list.add(new Product("蘋果", 20000));
list.add(new Product("華為", 30000));
list.add(new Product("oppo", 12000));
list.add(new Product("三星", 16000));
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);
}
}
客戶端（jquery+echart）：
<!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.common.min.js"></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="jquery-3.2.1.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 : "http://localhost:8080/TestPro/TestServlet", //注意URL的設定
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>
//注：以上js中的echart .js和jquery.js需要自己下載，它們的官網有檔案。
最後效果圖如下：
