ECharts怎么集成Java？

wen python案例 2026-07-22 1

本文目录导读：

ECharts怎么集成Java？

方案一：纯前端 + Java 数据接口（最常用、最推荐）
方案二：JSP/Thymeleaf 模板渲染（不推荐，但仍有项目使用）
方案三：Java 服务端生成图片（适用于报表下载、邮件附件）
复杂方案：服务端渲染（SSR）
常见问题解决

ECharts 本身是一个纯前端的 JavaScript 图表库，它不直接与 Java 后端代码运行在同一个进程中，集成 ECharts 与 Java 的核心思路是：Java 负责提供数据（通过 API），前端（HTML/JavaScript）负责渲染 ECharts 图表。

以下是几种主流的集成方案,从简单到复杂排序：

纯前端 + Java 数据接口（最常用、最推荐）

这是标准的前后端分离模式，Java 作为后端提供 JSON 格式的数据，前端（JSP/Thymeleaf/纯HTML）使用 ECharts 渲染。

Java 后端（Spring Boot 示例）

@RestController
public class ChartDataController {
    @GetMapping("/api/chart-data")
    public Map<String, Object> getChartData() {
        // 1. 从数据库或其他服务获取数据
        List<String> categories = Arrays.asList("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun");
        List<Integer> values = Arrays.asList(120, 200, 150, 80, 70, 110, 130);
        // 2. 构建 ECharts 期望的数据结构（Option）
        Map<String, Object> option = new HashMap<>();
        option.put("xAxis", Map.of("data", categories));
        option.put("series", List.of(Map.of("data", values, "type", "line")));
        return option; // 自动转为 JSON
    }
}

前端（JSP / Thymeleaf / 纯 HTML）

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        // 1. 初始化 ECharts
        var myChart = echarts.init(document.getElementById('main'));
        // 2. 使用 fetch 调用 Java 后端 API
        fetch('/api/chart-data')
            .then(response => response.json())
            .then(data => {
                // 3. 将返回的 JSON 直接作为 option 设置
                myChart.setOption(data);
            })
            .catch(error => console.error('Error:', error));
    </script>
</body>
</html>

优点：前后端完全解耦，数据格式清晰（JSON）,易于维护和扩展。

JSP/Thymeleaf 模板渲染（不推荐，但仍有项目使用）

如果项目是传统的 Java Web 应用（如 Servlet + JSP），可以在后端将数据拼接到 JSP 页面中，由模板引擎渲染成 JavaScript 变量。

Java Servlet 示例

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ... {
    // 模拟数据
    request.setAttribute("xData", "['Mon','Tue','Wed']");
    request.setAttribute("yData", "[120,200,150]");
    request.getRequestDispatcher("/chart.jsp").forward(req, resp);
}

JSP 页面（chart.jsp）

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            xAxis: { data: <%= request.getAttribute("xData") %> },
            series: [{ data: <%= request.getAttribute("yData") %> , type: 'bar' }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

缺点：前后端耦合严重，不利于维护，且容易产生 XSS 安全问题（除非严格转义）。

Java 服务端生成图片（适用于报表下载、邮件附件）

如果你需要在 Java 后端生成 ECharts 图表图片（PNG/JPG），可以使用 PhantomJS 或 Puppeteer（Node） 配合 Java 调用，不过更推荐使用 Apache ECharts 的 Java 服务端渲染库。

使用 `echarts-java` 库

这是一个开源库，可以在 Java 端直接生成 ECharts 图片。

<dependency>
    <groupId>org.icepear.echarts</groupId>
    <artifactId>echarts-java</artifactId>
    <version>1.0.0</version>
</dependency>

Java 代码示例

import org.icepear.echarts.Bar;
import org.icepear.echarts.render.Engine;
import org.icepear.echarts.charts.bar.BarSeries;
public class EChartsGenerator {
    public static void main(String[] args) {
        Bar bar = new Bar()
            .setXAxis(new String[]{"Mon", "Tue", "Wed"})
            .addSeries(new BarSeries().setData(new Integer[]{120, 200, 150}));
        Engine engine = new Engine();
        // 生成 HTML 文件
        engine.render(bar, "bar.html");
        // 或者生成图片（需要 PhantomJS 环境）
        engine.renderImage(bar, "bar.png");
    }
}

适用场景：定时任务生成报表图片、导出为 Word/PDF、发送邮件附件。

复杂方案：服务端渲染（SSR）

如果对首屏加载速度要求极高（如大屏展示），可以使用 ECharts 的 SSR 模式，但这通常需要 Node.js 中间层，Java 将数据发给 Node，Node 渲染成 SVG/Canvas 字符串后再返回给 Java。

场景	推荐方案
Web 应用（前后端分离）	方案一：Java REST API + 前端 Ajax 加载 ECharts
传统 JSP 项目（遗留系统）	方案二（但建议尽快重构为方案一）
后端生成图片（报表导出）	方案三：使用 echarts-java 或 PhantomJS
实时大屏 / 高并发	方案一 + WebSocket（Java 推送实时数据）