ECharts官方文档
快速上手 - Handbook - Apache ECharts
使用IDEA新建一个基于Servlet+jsp的Javaweb框架，并引入需要的资源和使用Tomcat服务器运行。
在src文件目录下新建一个DBconn类，用于连接数据库，配置好自己的连接名还有用户名和密码。
DBconn.java
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
//连接数据库类
public class DBconn {
public static Connection getConnection() throws ClassNotFoundException, SQLException {
//1.注册驱动
Class.forName("com.mysql.cj.jdbc.Driver");
//2.通过DirverManager获取数据库连接
String url = "jdbc:mysql://localhost:3306/test?serverTimezone=GMT+8"; //数据库链接
String name = "test"; //数据库用户名
String password ="123456"; //数据库密码
Connection conn = DriverManager.getConnection(url, name, password);
return conn;
}
}
如下，我的数据库名为test表名为view_bar。
新建一个DBtest类，添加主函数进行数据库的连接测试，查看控制台输出结果。
DBtest.java
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class DBtest {
public static void main(String[] args) {
try {
Connection conn = DBconn.getConnection();
//3.通过Connectiond对象获取Statement对象
Statement sttm = conn.createStatement();
//4.执行SQL语句
String sql ="select * from view_bar";
ResultSet rs = sttm.executeQuery(sql);
while (rs.next()){
//获取数据库 列
String name0 = rs.getString("name");
int value0 = rs.getInt("value");
System.out.println(name0+";"+value0);
}
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
}
}
}
控制台出现以下输出结果那就说明数据库连接成功了。
进入ECharts官方文档复制一个图表例子，下面是我复制的一个例子，并写入Ajax方法，并设置间隔时间。
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <script type="text/javascript" src="echarts.min.js"></script>-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
<title>ajax+servlet</title>
</head>
<body>
<div id="bar" style="width:700px; height:500px;"></div>
<script>
function data_async() {
$.ajax({
type: "post",
async: true,
url: "bar_servlet",
dataType:"json",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
success: function (data) {
// console.log(data.value);
var xAxis_data = data.name;
var series_data = data.value;
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('bar'));
// 绘制图表
var option_bar = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: xAxis_data,
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: series_data,
}
]
};
myChart.setOption(option_bar);
},
error: function () {
alert("数据请求失败！");
}
});
}
// 设置时间间隔
setInterval(data_async, 1000);
</script>
</body>
</html>
新建一个Bar_Servlet类，用来和数据库交互数据，这里需要注意的就是ECharts只能识别json的数据类型，所以需要用Java的有关Json库把数据库获取的数据转换为json格式才行。
Bar_Servlet.java
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
@WebServlet("/bar_servlet")
public class Bar_servlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setHeader("Content-type","text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
// 转换数据为json格式
JSONArray jsonarr_name = new JSONArray();
JSONArray jsonarr_value = new JSONArray();
JSONObject jsonObject = new JSONObject();
try {
// 连接数据库
Connection conn = DBconn.getConnection();
//3.通过Connectiond对象获取Statement对象
Statement sttm = conn.createStatement();
//4.执行SQL语句
String sql ="select * from view_bar";
ResultSet rs = sttm.executeQuery(sql);
while (rs.next()){
//获取数据库 列
String name0 = rs.getString("name");
int value0 = rs.getInt("value");
// 控制台打印输出结果
jsonarr_name.add(name0);
jsonarr_value.add(value0);
jsonObject.put("name", jsonarr_name);
jsonObject.put("value", jsonarr_value);
}
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
}
// System.out.println(jsonObject);
//向前台的页面输出结果
PrintWriter out = response.getWriter();
out.println(jsonObject);
out.flush();
out.close();
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
用Tomcat服务器运行一下。
修改一下数据库数据，就会发现图表的图形发生变化，而且还有动画效果。
以上就是Ajax+Servlet实现的ECharts图表的数据实时刷新。
