引言(痛点切入)
"后端开发者常困于复杂的前端图表?只需 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());