通过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();
				}
			});

五、显示效果图