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

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%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" %>



  
  
  
  
  


  

  

新建一个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图表的数据实时刷新。