Spring Boot + ECharts 极简整合指南：从零实现动态数据可视化大屏

引言（痛点切入）

"后端开发者常困于复杂的前端图表？只需 3 步，用 Spring Boot + ECharts 解锁专业级数据可视化！"

一、为什么选择 ECharts？

百度开源的顶级可视化库，GitHub 74k+ Stars
拖拽生成图表 + 响应式设计
支持 SVG 渲染（解决 Canvas 内存泄漏问题）
官方提供 Apache ECharts 在线构建器

二、Spring Boot 整合实战（含完整代码）

步骤 1：环境搭建

XML 复制代码

<!-- pom.xml -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId> <!-- 模板引擎 -->
</dependency>

步骤 2：后端数据接口

java 复制代码

// ChartController.java
@RestController
public class ChartController {

    @GetMapping("/api/sales-data")
    public Map<String, Object> getSalesData() {
        // 模拟数据库查询（实际替换为MyBatis/JP查询）
        return Map.of(
            "categories", List.of("Q1", "Q2", "Q3", "Q4"),
            "values", List.of(120, 200, 150, 180)
        );
    }
}

步骤 3：前端集成 ECharts

html 复制代码

<!-- resources/templates/dashboard.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <script th:src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 800px; height: 500px;"></div>

    <script>
        // 异步获取数据
        fetch('/api/sales-data')
            .then(res => res.json())
            .then(data => {
                const chart = echarts.init(document.getElementById('chart'));
                const option = {
                    title: { text: '年度销售趋势' },
                    tooltip: {},
                    xAxis: { data: data.categories },
                    yAxis: {},
                    series: [{
                        name: '销售额',
                        type: 'bar',
                        data: data.values
                    }]
                };
                chart.setOption(option);
            });
    </script>
</body>
</html>

三、高级技巧：动态实时更新

javascript 复制代码

// WebSocket 实时推送（Spring Boot 集成）
@MessageMapping("/chart-update")
@SendTo("/topic/real-time")
public Map<String, Object> pushData() {
    return realTimeDataService.getLatestData(); // 从Redis/消息队列获取
}

javascript 复制代码

// 前端监听更新
const socket = new SockJS('/ws');
const client = Stomp.over(socket);
client.connect({}, () => {
    client.subscribe('/topic/real-time', msg => {
        chart.setOption(JSON.parse(msg.body)); // 动态刷新图表
    });
});

四、性能优化方案

按需加载

javascript 复制代码

// 仅引入柱状图+折线图（体积减少70%）
import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
echarts.use([BarChart, LineChart]);

图表懒加载

javascript 复制代码

// Intersection Observer API 监听滚动
const observer = new IntersectionObserver(entries => {
  if(entries[0].isIntersecting) {
     initChart(); // 进入视口才渲染
     observer.disconnect();
  }
});
observer.observe(document.getElementById('chart'));

服务端渲染（SSR）

使用 ECharts GL 生成 SVG 输出到后端

五、最佳实践案例

销售大屏效果 （配图说明）
https://example.com/echarts-demo.png
特征：

使用 dataset 管理数据源
通过 dataZoom 实现时间轴缩放
主题切换：echarts.registerTheme('dark', {...}

六、避坑指南

内存泄漏 ：调用 chart.dispose() 销毁实例
跨域问题 ：添加 @CrossOrigin 注解
自适应失效：

javascript 复制代码

window.addEventListener('resize', () => chart.resize());