jsp实现增删改查——（三）用Echarts图表统计学生信息

学生信息CRUD——Echarts显示生活费

目录结构

创建一个js文件夹，将echarts.min.js放到里面。

功能实现

与之前我们写的jsp文件（含有html代码、Java代码）不同的是，实现Echarts对生活费的显示，需要调用echarts.min.js，需要使用javascript即js代码。

js代码的书写

使用标签<script></script>

head内容

<head><title>学生生活费统计</title><script src="../js/echarts.min.js"></script>
</head>

在head部分，需要用<script>标签将我们的echarts.min.js文件引入。

body内容

1.html代码

//html代码
<div id="show" style="width: 800px; height: 600px"></div>

说明：

id：随便取一个就行。
style：必须设置一个长和宽，否则会显示不出来。
div的作用：为之后我们的echarts画出一块显示范围。因此，<div>标签的划定必须在图表的显示之前给出才可以。

2.js代码

<script>//js代码var mychart = echarts.init( document.getElementById("show") );
</script>

说明：

mychart是变量名，自己随便取即可。
echarts.init()方法，进行图表的初始化工作。
echarts.init()方法括号内的参数，即为“在哪个html区域进行初始化”，因此，通过js提供的document.getElementById(“show”)来获取我们刚才划分好的div区域，在此区域上进行init初始化工作。

<script>//js代码var mychart = echarts.init( document.getElementById("show") );//创建图表的配置项和数据var option = {title: {text: '学生生活费统计表'},tooltip:{},legend: {data:['元']},xAxis: {data: <%=xdata%>	// ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '元',type: 'bar',data: <%=ydata%>	//[5, 20, 36, 10, 10, 20]}]   };
</script>

说明：

有哪些参数，各个参数的功能、应该怎样配置，Echarts有对应官方文档，可自行查阅。
对于各个参数的设置，即Key-Value键值对，是要依照文档规定来的，例如Key，它提供了哪些，就是哪些，不能自己编没有的Key出来，也不能将原有的Key作更改。Value也要按规定进行合法的赋值。
var option = {}的内容，实际上采用的是JSON语法。
var option = {}的具体内容，不需要背诵，复制粘贴过来之后会修改即可。
其中参数的含义说明：
title：该图表的标题
tooltip：不知道。
legend：图例。
xAxis：横坐标轴上的数据信息。格式如：["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]。
yAxis：纵坐标轴上的数据信息。
series：
name：把鼠标放在图表的柱、饼上面时，显示的信息。
type：图表类型，柱状图、饼状图……。
data：横轴各数据信息对应在纵轴的数值数据。格式如：[5, 20, 36, 10, 10, 20]。

注意：

1.对于legend中的data，即“图例”；以及series中的name，即鼠标悬停时显示的信息。它们两个的内容必须一致，比如图例上显示的是”元“，那么鼠标悬停也要显示”元“。若不一致，则图例会消失、不显示，只有鼠标悬停时显示的信息。

2.对于xAxis中的data，以及series中的data，无论是["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]，还是[5, 20, 36, 10, 10, 20]，其本质都是String类型的字符串。

也就是说，对于静态传参而言，你传递的是[5, 20, 36, 10, 10, 20]。

那么，如果你想让它动态变化，从数据库拿数据，那你就把数据取出来之后加工成与[5, 20, 36, 10, 10, 20]一模一样的字符串就可以了。即：一个"["、一个"5"、一个","、一个"20"、……、一个"20"、一个"]"。多一个字符、少一个字符都不行。

对于["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]，本质的原理同上，但它的不同之处在于，当你使用String字符串类型来保存这一串字符的时候，由于其中有双引号，而双引号内部不能有双引号，因此，双引号内部的双引号需要加上转义字符，即：

String str1 = "[\"衬衫\",\"羊毛衫\",\"雪纺衫\",\"裤子\",\"高跟鞋\",\"袜子\"]"。

所以，在它进行传参的时候，也要把转义字符带上。

这样看上去比较麻烦，我们其实也有更好的方法。——由于双引号中不能有双引号，因此必须加转义字符。但是，双引号中可以有单引号，我们使用单引号也是一样的效果。即：

String str2 = "['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']"。

3.我们代码当中的<%=xdata%>、<%=ydata%>，其中的xdata、ydata是我们写的Java代码所提供的变量。（下文有）——因此，Java代码也要写在前面才可以。

<script>//js代码var mychart = echarts.init( document.getElementById("show") );//创建图表的配置项和数据var option = {title: {text: '学生生活费统计表'},tooltip:{},legend: {data:['元']},xAxis: {data: <%=xdata%>	// ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '元',type: 'bar',data: <%=ydata%>	//[5, 20, 36, 10, 10, 20]}]   };//将我们写好的option交给echartsmychart.setOption(option);
</script>

最后，使用mychart.setOption(option);将我们编辑好的option设置完成。其中，mychart是init出来的初始化图表对象。

3.Java代码

与jsp中的Java代码一样，用<% %>括起来写。

首先思考，对于“生活费统计图表”而言，我们想要将数据动态地显示到图表内，需要从数据库获取到的数据为：

1）横轴：各个学生的姓名，即表中的sname字段。

2）数值：各个学生的生活费，即表中的money字段。

这个很容易，就与之前我们做的“查询、修改、删除”一样，链接数据库，执行SQL语句……即可。

但问题在于，我获取了sname，我获取了money，之后怎么以正确的格式显示到图表上？

重点：因此，关键之处就在于，怎样能够将数据库中查询到的数据，转换为echarts规定能够接收的赋值形式，即符合接收格式的String字符串，即类似于

"['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']"

[5, 20, 36, 10, 10, 20]

这样的字符串。每个中括号、每个引号、每个逗号，都不能多、也不能少。

因此，要会使用Java的字符串相关操作，如：截取子串函数substring(起始索引, 末尾索引)；利用"+"操作符来拼接字符串……等等。

另外，可以使用System.out.println(str)先打印显示一下看看字符串对不对，确认字符串格式正确了，传给图表，图表就一定能显示出来了。而不要改一次就运行一次然后直接去看图表能不能出的来。

链接数据库

Class.forName("com.mysql.cj.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/mywork", "root", "123456");

执行SQL语句

PreparedStatement pstmt = conn.prepareStatement("select * from student");
ResultSet rs = pstmt.executeQuery();

处理数据

已经获取到rs数据集合，从中遍历，并调整字符串拼接格式即可。

//前中括号先赋值进来
String xdata = "[";
String ydata = "[";//读出每个字段的值的同时，进行格式调整，例如加引号、加逗号等
while(rs.next())
{xdata += "'" + rs.getObject("sname") + "',";	//看清楚是几个单引号、几个逗号。不要乱打空格。ydata += rs.getObject("money") + ",";
}//经过while循环获得的数据有一个问题：最后会多出来1个逗号，我们要把这1个逗号给去掉
//方法：使用“截取子串substring()”函数，把最后一个逗号去掉
//字符串从0开始好说，怎样知道字符串最后一个字符的位置？用str.length()即可。注意下标。
xdata = xdata.substring(0, xdata.length()-1);
ydata = ydata.substring(0, ydata.length()-1);//最后再把后中括号补上
xdata += "]";
ydata += "]";//可以在控制台输出一下字符串看看对不对
//System.out.println(xdata);
//System.out.println(ydata);

关闭链接

rs.close();
pstmt.close();
conn.close();

完整代码

<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %><%--Created by IntelliJ IDEA.User: 11202Date: 2024/4/3Time: 16:38To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>学生生活费统计表</title><script src="../js/echarts.min.js"></script>
</head>
<body><%//Java代码Class.forName("com.mysql.cj.jdbc.Driver");Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/mywork", "root", "123456");PreparedStatement pstmt = conn.prepareStatement("select * from student");ResultSet rs = pstmt.executeQuery();//数据处理成符合要求的字符串String xdata = "[";String ydata = "[";while(rs.next()) {xdata += "'" + rs.getObject("sname") + "',";ydata += rs.getObject("money") + ",";}//把最后多余的一个逗号去除掉，使用substring截取子串来实现xdata = xdata.substring(0, xdata.length()-1);ydata = ydata.substring(0, ydata.length()-1);//把后括号补上xdata += "]";ydata += "]";//关闭链接rs.close();pstmt.close();conn.close();%><!-- html代码 --><div id="show" style="width: 900px; height: 600px"></div><script>//js代码var mychart = echarts.init( document.getElementById("show") );//配置图表的optionvar option = {title: {text: '学生生活费统计表'},tooltip: {},legend: {data: ['元']},xAxis: {data: <%=xdata%>},yAxis: {},series: [{name: '元',type: 'bar',data: <%=ydata%>}]};//将option应用到echartsmychart.setOption(option);</script></body>
</html>