学生信息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交给echarts
mychart.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: 11202
Date: 2024/4/3
Time: 16:38
To 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") );
//配置图表的option
var option = {
title: {
text: '学生生活费统计表'
},
tooltip: {},
legend: {
data: ['元']
},
xAxis: {
data: <%=xdata%>
},
yAxis: {},
series: [{
name: '元',
type: 'bar',
data: <%=ydata%>
}]
};
//将option应用到echarts
mychart.setOption(option);
</script>
</body>
</html>
