Spring Boot 集成 ECharts 实现数据可视化实战

application.properties

# 服务器端口
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/

后端数据层构建

为了演示方便，这里使用内存列表模拟数据库操作。实际项目中请替换为 MyBatis 或 JPA。

实体类 Product.java

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 方法
    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;

@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(product -> product.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 existingProduct = getProductById(product.getId());
        if (existingProduct != null) {
            existingProduct.setProductId(product.getProductId());
            existingProduct.setProductName(product.getProductName());
            existingProduct.setPrice(product.getPrice());
            existingProduct.setSales(product.getSales());
        }
    }

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

Service 业务层

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();
    }

    public Product getProductById(Long id) {
        return productRepository.getProductById(id);
    }

    public void addProduct(Product product) {
        productRepository.addProduct(product);
    }

    public void updateProduct(Product product) {
        productRepository.updateProduct(product);
    }

    public void deleteProduct(Long id) {
        productRepository.deleteProduct(id);
    }
}

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/";
    }
}

前端页面与图表渲染

前端使用 Thymeleaf 模板引擎，结合 ECharts 进行数据可视化。注意 JS 代码中的变量需要通过 Thymeleaf 标签注入。

templates/product-list.html

<!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 href="@{/api/products/edit/{id}(id=${product.id})}">编辑</a>
            <a 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 注入后端数据
    <th:block th:each="product : ${products}">
        productNames.push('<span>' + product.productName + '</span>');
        productSales.push(<span>' + 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: ['40%', '70%'],
            avoidLabelOverlap: ,
            : {
                : ,
                : ,
                : 
            },
            : {
                : ,
                : 
            },
            : {
                : {
                    : ,
                    : ,
                    : 
                }
            },
            : {
                : 
            },
            : [
                
            ]
        }]
    };
    
    
    option && myChart.(option);
</script>
</body>
</html>

运行与验证

启动应用后访问 http://localhost:8080/api/products/，你将看到产品列表表格以及下方的动态饼图。点击'添加'、'编辑'或'删除'按钮即可对数据进行 CRUD 操作，图表也会随之实时更新。

这种模式非常适合内部管理系统或数据看板开发，既利用了 Spring Boot 的后端能力，又发挥了 ECharts 强大的前端渲染性能。