mysql 动态查询语句_通过MYSQL查询语句动态的显示图表

通过MYSQL查询语句动态的显示图表

一、在官网上下载对应的组件，四者均可，并倒入到项目的JS包下

二、写MYSQL语句并查询的数量num和名称name

SELECT 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"));

}

四、在前端的页面中显示出来即可。

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();

}

});

五、显示效果图