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

本文介绍如何使用MySQL查询语句动态获取数据,并利用ECharts在前端展示为图表。具体步骤包括:下载并导入ECharts组件,编写SQL查询语句获取数据,使用敏捷框架在Controller层处理数据,最后在前端页面调用ECharts API显示图表。

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

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

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

五、显示效果图
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值