通过MYSQL查询语句动态的显示图表
通过MYSQL查询语句动态的显示图表
一、在官网上下载对应的组件,四者均可,并倒入到项目的JS包下
二、写MYSQL语句并查询的数量num和名称nameSELECT s.peopleNums,r.name from statistics as s,readrooms as r where s.ReadRoomID = r.ID GROUP BY s.ReadRoomID
三、在Controller层写后台代码这里我们使用的事敏捷框架开发。
public void getEcharts(){
renderJson(Db.find("SELECT s.peopleNums,r.name from statistics as s,readrooms as r where s.ReadRoomID = r.ID GROUP BY s.ReadRoomID"));
}
四、在前端的页面中显示出来即可。
<div id="main" style="width: 400px;height:400px;"></div>
var myChart = echarts.init(document.getElementById("main"));//这里 是要显示的位置
myChart.setOption({
title : {
text : "数据加载图标"
},
tooltip : {},
legend : {
data : [ "条数" ]
},
xAxis : {
data : []
},
yAxis : {},
series : [ {
name : "条数",
type : "bar",
data : []
} ]
});
myChart.showLoading();
var names = [];
var nums = [];
var CardNO = $("#CardNO").val();
alert(CardNO);
$.ajax({
type : "post",
async : true,
url : globalData.pre + "readRooms/getEchartsStudent", //请求发送到TestServlet处
data : {
CardNO : CardNO
},
dataType : "json",
success : function(result) {
if (result) {
for ( var i = 0; i < result.length; i++) {
names.push(result[i].Name);//X轴要显示的名称数据库中查询出来的
}
for ( var i = 0; i < result.length; i++) {
nums.push(result[i].num);//Y轴要显示的名称
}
myChart.hideLoading();
myChart.setOption({
xAxis : {
data : names
},
series : [ {
name : "条数",
data : nums
} ]
});
}
},
error : function(errorMsg) {
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
五、显示效果图