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

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

ECharts官方文档

DBconn.java

index.jsp

Bar_Servlet.java

websocket 接收信息 nodeJs

[ECharts] There is a chart instance already initialized on the dom. 已存在图表，渲染重复

echarts双X轴(非等分情况)，区县比例堆叠柱状图

Echarts 热力图

echarts自定义封装js【柱状图，折线图，水球，雷达，仪表盘】以上图表的各种问题，几乎都有，没有的评论区留言

在vue项目中echarts父子组件异步传值，解决数据更新，echarts页面不更新问题

echarts用pictorialBar实现3D柱状图

echarts 图表导出到 Word

双Y轴设置零点刻度统一

【可视化开发】echarts点击事件

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	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;
	}
	}

	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();
	}
	}
	}

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

	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);
	}
	}

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

ECharts官方文档

DBconn.java

index.jsp

Bar_Servlet.java

微信扫一扫：分享