使用Servlet与ECharts 5 实现动态数据可视化
基于Java Servlet 与 ECharts 5 的前端数据图表实现
本文介绍如何通过 Java Servlet 作为后端服务，为前端 ECharts 5 可视化库提供动态数据支持。整个流程采用标准的前后端分离架构，利用 jQuery 发起异步请求，实现图表数据的实时加载。
核心思路
传统 ECharts 示例常将数据直接写在 HTML 页面内，不利于维护和扩展。本例通过创建一个可被访问的 Servlet 接口，由前端通过 AJAX 请求获取结构化数据，从而实现真正的动态图表渲染。
技术栈
- 前端：HTML5、JavaScript、jQuery 3.2、ECharts 5
- 后端：Java 11、Tomcat 10、Jakarta Servlet 5.0
- 数据格式：JSON（使用 Fastjson 序列化）
前端页面代码（echarts5.html）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>动态数据图表示例</title>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<h3>月度销售与营收分析</h3>
<div id="chart-container" style="width: 700px; height: 450px; margin: auto;"></div>
<script>
const chartElement = document.getElementById('chart-container');
const chartInstance = echarts.init(chartElement);
// 请求后端接口获取数据
$.getJSON('/api/data/get').done(function(data) {
const months = data.months;
const sales = data.sales;
const revenue = data.revenue;
const option = {
title: { text: '月度销售与营收趋势' },
tooltip: { trigger: 'axis' },
legend: { data: ['销量', '营收'] },
toolbox: {
show: true,
feature: {
dataZoom: { yAxisIndex: 'none' },
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: months
},
yAxis: { type: 'value' },
series: [
{
name: '销量',
type: 'bar',
data: sales
},
{
name: '营收',
type: 'line',
data: revenue
}
]
};
chartInstance.setOption(option);
}).fail(function() {
alert('数据加载失败，请检查服务器状态');
});
</script>
</body>
</html>
后端 Servlet 实现（DataFetchServlet.java）
@WebServlet("/api/data/get")
public class DataFetchServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 模拟业务数据
String[] months = {"1月", "2月", "3月", "4月", "5月", "6月"};
Integer[] sales = {120, 180, 90, 210, 150, 190};
Double[] revenue = {12000.0, 18000.0, 9000.0, 21000.0, 15000.0, 19000.0};
// 封装为 Map 并转为 JSON
Map<String, Object> result = new HashMap<>();
result.put("months", months);
result.put("sales", sales);
result.put("revenue", revenue);
// 设置响应头为 JSON 格式
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write(JSON.toJSONString(result));
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
关键点说明
- 前端使用
$.getJSON()向/api/data/get发起 GET 请求，自动解析返回的 JSON 数据。 - 后端通过
response.getWriter().write()输出标准 JSON 响应，确保客户端能正确解析。 - 使用 Fastjson 库将 Java 对象序列化为 JSON 字符串，避免手动拼接字符串带来的错误风险。
- 建议在实际项目中加入异常处理和日志记录，提升稳定性。
部署与运行
- 创建一个 Dynamic Web Project 项目。
- 将 ECharts 资源文件放入
WebContent/js/目录。 - 添加 Fastjson 依赖到
lib文件夹或 Maven 配置中。 - 将 Servlet 类编译并部署至 Tomcat 10 运行环境。
- 启动服务器后访问
http://localhost:8080/your-app/echarts5.html查看效果。
