EChart 單圖表動態數據綁定
在Web項目中通過頁面提交Ajax異步請求，提交數據到後臺，並返回Json數據到前臺動態加載頁面圖表數據
效果圖
Jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String user_id = request.getParameter("user_id");
String user_code = request.getParameter("user_code");
%>
<html>
<head>
<title>Echart 動態數據綁定</title>
</head>
<body>
<!--div圖表容器 -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<!--引入EChart.js JQuery.min.js -->
<script src="${pageContext.request.contextPath }/lib/echarts/echarts.min.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/jquery.min.js"></script>
<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 : "commonAction.do?funid=cs_chart&eventcode=showChart&user_id="+'<user_id>',//根據自己的url更改跳轉處理路徑
data : {},
dataType : "json", //返回數據形式爲json
success : function(result) {
console.log(result.data);//打印並檢查看返回數據格式是否正確
var results = result.data ;
//請求成功時執行該函數內容
if (result) {
//遍歷數據
for(var i=0;i<results.length;i++){
names.push(results[i].name); //挨個取出類別並填入類別數組
nums.push(results[i].num); //挨個取出銷量並填入銷量數組
}
myChart.hideLoading(); //隱藏加載動畫
myChart.setOption({ //加載數據圖表
xAxis: {
data: names
},
series: [{
// 根據名字對應到相應的系列
name: '銷量',
data: nums
}]
});
}
},
error : function(errorMsg) {
//請求失敗時執行該函數
alert("Request Is Error !");
myChart.hideLoading();
}
})
</script>
</html>
瀏覽器F12調式發現從後臺返回的數據
Java
/**
* 從數據庫中查詢表數據，以Json串返回
* */
public class ChartTestBo extends BusinessObject {
//圖表數據測試
public String updateChart(){
String sql = "select * from chart_info";
DaoParam daoParam = _dao.createParam(sql);
List<Map<String,String>> list = _dao.query(daoParam);
JSONArray jsonArray = JSONArray.fromObject(list);
System.out.println(jsonArray.toString());
this.setReturnData(jsonArray.toString());
return _returnSuccess;
}
}
到這裏就實現了單圖表的動態數據綁定。
