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

接着配置 application.properties，关闭缓存以便调试时能即时看到页面变化：

server.port=8080
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.suffix=.html
spring.thymeleaf.prefix=classpath:/templates/

后端数据层实现

为了演示效果，我们构建一个简单的产品管理模块。实体类定义需规范，注意字段类型和 Getter/Setter 的完整性。

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 and Setter methods omitted for brevity
    public Long getId() { return id; }
    public void setId(Long id) { this.id = id; }
    public String getProductId() { return productId; }
    public void setProductId(String productId) { this.productId = productId; }
    public String getProductName() { return productName; }
    public void setProductName(String productName) { this.productName = productName; }
    public double getPrice() { return price; }
    public void setPrice(double price) { this.price = price; }
    public int getSales() { return sales; }
    public void setSales(int sales) { this.sales = sales; }

    @Override
    public String toString() {
        return "Product{" +
                "id=" + id +
                ", productId='" + productId + '\'' +
                ", productName='" + productName + '\'' +
                ", price=" + price +
                ", sales=" + sales +
                '}';
    }
}

使用内存列表模拟数据库操作，便于快速验证逻辑。Repository 层负责数据的增删改查：

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

@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;
    }

    public Product getProductById(Long id) {
        return products.stream().filter(p -> p.getId().equals(id)).findFirst().orElse(null);
    }

    public void addProduct(Product product) {
        product.setId((long) (products.size() + 1));
        products.add(product);
    }

    public void updateProduct(Product product) {
        Product existing = getProductById(product.getId());
        if (existing != null) {
            existing.setProductId(product.getProductId());
            existing.setProductName(product.getProductName());
            existing.setPrice(product.getPrice());
            existing.setSales(product.getSales());
        }
    }

    public void deleteProduct(Long id) {
        products.removeIf(p -> p.getId().equals(id));
    }
}

Service 层简单透传 Repository 方法，Controller 层负责路由映射和模型数据传递：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
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";
    }

    @GetMapping("/{id}")
    public String getProductById(@PathVariable Long id, Model model) {
        Product product = productService.getProductById(id);
        model.addAttribute("product", product);
        return "product-detail";
    }

    @GetMapping("/add")
    public String addProductForm(Model model) {
        model.addAttribute("product", new Product());
        return "product-form";
    }

    @PostMapping("/add")
    public String addProduct(@ModelAttribute Product product) {
        productService.addProduct(product);
        return "redirect:/api/products/";
    }

    @GetMapping("/edit/{id}")
    public String editProductForm(@PathVariable Long id, Model model) {
        Product product = productService.getProductById(id);
        model.addAttribute("product", product);
        return "product-form";
    }

    @PostMapping("/edit/{id}")
    public String editProduct(@PathVariable Long id, @ModelAttribute Product product) {
        product.setId(id);
        productService.updateProduct(product);
        return "redirect:/api/products/";
    }

    @GetMapping("/delete/{id}")
    public String deleteProduct(@PathVariable Long id) {
        productService.deleteProduct(id);
        return "redirect:/api/products/";
    }
}

前端页面与 ECharts 集成

这是最关键的一步。我们需要在 Thymeleaf 模板中引入 ECharts 库，并将后端传来的数据序列化为 JavaScript 数组。

<!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>
    <a href="/api/products/add">添加产品</a>
    
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>产品 ID</th>
                <th>产品名称</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.productId}"></td>
                <td th:text="${product.productName}"></td>
                <td th:text="${product.price}"></td>
                <td th:text="${product.sales}"></td>
                <td>
                    <a th:href="@{/api/products/edit/{id}(id=${product.id})}">编辑</a>
                    <a th:href="@{/api/products/delete/{id}(id=${product.id})}">删除</a>
                </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 option;
        
        // 准备数据
        var productNames = [];
        var productSales = [];
        
        // 利用 Thymeleaf 将后端数据注入到 JS 变量中
        <th:block th:each="product : ${products}">
            productNames.push('<span th:text="${product.productName}"></span>');
            productSales.push(<span th:text="${product.sales}"></span>);
        </th:block>
        
        option = {
            title: {
                text: '产品销量图表',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                right: 10,
                top: 'center'
            },
            series: [{
                name: '销量',
                type: 'pie',
                radius: [, ],
                : ,
                : {
                    : ,
                    : ,
                    : 
                },
                : {
                    : ,
                    : 
                },
                : {
                    : {
                        : ,
                        : ,
                        : 
                    }
                },
                : {
                    : 
                },
                : [
                    
                ]
            }]
        };
        
        option && myChart.(option);
    </script>
</body>
</html>

启动应用后访问 http://localhost:8080/api/products/，即可看到包含产品列表和饼图的销售仪表盘。点击相关按钮可完成产品的增删改查操作。

实际应用场景

这种模式不仅限于产品展示，在实际业务中非常通用：

• 用户分析：统计不同地区或年龄段的用户分布。
• 订单监控：实时展示每日订单量趋势。
• 销售报表：多维度对比各品类销售额占比。

关键在于根据业务需求选择合适的图表类型（折线图、柱状图、饼图等），并通过 RESTful API 将数据传递给前端渲染。