Ajax+Servlet实现ECharts的数据实时刷新，没错就是你要的那种效果！

本文链接：https://blog.csdn.net/m0_60495479/article/details/129993269

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%2B8";  //数据库链接
        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服务器运行一下。