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

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

MySQL数据库中可以通过多种方式新建SQL语句查询,以下是常见的操作方法: ### 使用命令行工具 - **连接数据库**:打开命令行工具,使用`mysql -u 用户名 -p`命令连接到MySQL数据库,输入密码后回车确认。例如:`mysql -u root -p`。 - **选择数据库**:连接成功后,使用`use 数据库名;`语句选择要操作的数据库。例如:`use testdb;`。 - **编写并执行查询语句**:输入SQL查询语句,如`SELECT * FROM 表名;`,然后回车执行。例如:`SELECT * FROM users;` 会查询`users`表中的所有记录。 ```sql -- 连接数据库后选择数据库 use testdb; -- 执行查询操作 SELECT * FROM users; ``` ### 使用图形化管理工具(以Navicat为例) - **连接数据库**:打开Navicat,创建一个新的MySQL连接,输入数据库的主机名、用户名、密码等信息,点击连接测试,测试成功后点击确定。 - **选择数据库**:在左侧的数据库列表中,找到并双击要操作的数据库。 - **新建查询窗口**:右键点击选中的数据库,选择“新建查询”,会弹出一个新的查询窗口。 - **编写并执行查询语句**:在查询窗口中输入SQL查询语句,点击工具栏上的“运行”按钮(绿色三角形图标)执行查询。例如: ```sql SELECT name, age FROM employees WHERE department = 'IT'; ``` ### 使用编程语言(以Python为例) 借助Python的`mysql-connector-python`库可以实现与MySQL数据库的交互并执行查询操作。 ```python import mysql.connector # 建立数据库连接 mydb = mysql.connector.connect( host="localhost", user="root", password="yourpassword", database="testdb" ) # 创建游标对象 mycursor = mydb.cursor() # 编写SQL查询语句 sql = "SELECT * FROM customers" # 执行查询 mycursor.execute(sql) # 获取查询结果 results = mycursor.fetchall() # 输出结果 for row in results: print(row) # 关闭游标和连接 mycursor.close() mydb.close() ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值