Spring Boot 数据可视化与图表集成实战 | 极客日志

Javajava

Spring Boot 数据可视化与图表集成实战

Spring Boot 结合 ECharts 实现数据可视化。通过配置 Maven 依赖、构建后端 Controller 接口及 Thymeleaf 模板，将产品销量等数据转化为图表展示。涵盖项目搭建、实体类设计、数据层编写及前端页面渲染，适用于报表、监控等多种业务场景。重点在于后端数据准备与前端脚本的正确对接。

PhpPioneer发布于 2026/3/23更新于 2026/4/273 浏览

Spring Boot 数据可视化与图表集成实战

Spring Boot 数据可视化与图表集成

数据可视化示意图

核心概念

在 Java 开发中，数据可视化是提升系统交互体验的关键。简单来说，就是把枯燥的数据通过图表、地图或仪表盘直观呈现，帮助用户快速发现规律并辅助决策。

常用的图表工具包括 ECharts（百度开源）、Highcharts、D3.js 以及商业化的 Tableau 等。对于 Spring Boot 项目而言，ECharts 因其轻量且功能强大，往往是首选方案。它不仅能实现图表的创建与展示，还能显著提升数据的可读性。

集成实战：Spring Boot + ECharts

将图表嵌入 Spring Boot 应用，通常涉及后端接口准备和前端页面渲染两部分。下面我们以产品销量统计为例，梳理整个流程。

1. 项目依赖配置

首先确保项目中引入了 Web 和 Thymeleaf 支持，这是构建动态页面的基础。

pom.xml

<dependencies>
    <!-- Web 依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- Thymeleaf 模板引擎 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <!-- 测试依赖 -->
    <dependency>
        <groupId>org.springframework.boot</>
        spring-boot-starter-test
        test

# 服务器端口
server.port=8080
# Thymeleaf 配置
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.suffix=.html
spring.thymeleaf.prefix=classpath:/templates/

public class Product {
    private Long id;
    private String productId;
    private String productName;
    private double price;
    private int sales;

    public Product() {}

    public Product(Long id, String productId, String productName, double price, int sales) {
        this.id = id;
        this.productId = productId;
        this.productName = productName;
        this.price = price;
        this.sales = sales;
    }

    // Getter 和 Setter 方法省略，实际开发中建议使用 Lombok 简化
    public Long getId() { return id; }
    public void setId(Long id) { this.id = id; }
    public String getProductName() { return productName; }
    public void setProductName(String productName) { this.productName = productName; }
    public int getSales() { return sales; }
    public void setSales(int sales) { this.sales = sales; }
}

import org.springframework.stereotype.Repository;
import java.util.ArrayList;
import java.util.List;

@Repository
public class ProductRepository {
    private List<Product> products = new ArrayList<>();

    public ProductRepository() {
        products.add(new Product(1L, "P001", "手机", 1000.0, 100));
        products.add(new Product(2L, "P002", "电脑", 5000.0, 50));
        products.add(new Product(3L, "P003", "电视", 3000.0, 80));
        products.add(new Product(4L, "P004", "手表", 500.0, 200));
        products.add(new Product(5L, "P005", "耳机", 300.0, 150));
    }

    public List<Product> getAllProducts() {
        return products;
    }
}

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;

@Service
public class ProductService {
    @Autowired
    private ProductRepository productRepository;

    public List<Product> getAllProducts() {
        return productRepository.getAllProducts();
    }
}

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.List;

@Controller
@RequestMapping("/api/products")
public class ProductController {
    @Autowired
    private ProductService productService;

    @GetMapping("/")
    public String getAllProducts(Model model) {
        List<Product> products = productService.getAllProducts();
        model.addAttribute("products", products);
        return "product-list";
    }
}

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>产品列表</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
    <h1>产品列表</h1>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>产品名称</th>
                <th>价格</th>
                <th>销量</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="product : ${products}">
                <td th:text="${product.id}"></td>
                <td th:text="${product.productName}"></td>
                <td th:text="${product.price}"></td>
                <td th:text="${product.sales}"></td>
            </tr>
        </tbody>
    </table>

    <h2>产品销量图表</h2>
    <div id="salesChart" style="width: 800px;height: 400px;"></div>

    <script>
        var chartDom = document.getElementById('salesChart');
        var myChart = echarts.init(chartDom);
        
        // 从后端获取的数据准备
        var productNames = [];
        var productSales = [];
        <th:block th:each="product : ${products}">
            productNames.push('<span th:text="${product.productName}"></span>');
            productSales.push(<span th:text="${product.sales}"></span>);
        </th:block>

        var option = {
            title: { text: '产品销量图表', left: 'center' },
            tooltip: { trigger: 'item' },
            legend: { orient: 'vertical', right: 10, top: 'center' },
            series: [{
                name: '销量',
                type: 'pie',
                radius: ['40%', '70%'],
                data: [
                    
                        {value: , name:''},
                    
                ]
            }]
        };
        myChart.(option);
    </script>
</body>
</html>