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;
}
}
到这里就实现了单图表的动态数据绑定。
