跳到主要内容Spring Boot 数据可视化与图表集成 | 极客日志Java大前端java
Spring Boot 数据可视化与图表集成
介绍 Spring Boot 与 ECharts 等图表工具的集成方法。涵盖数据可视化定义、常见工具对比，详细演示了从依赖配置、后端实体/Repository/Service/Controller 层搭建到前端 Thymeleaf 页面及 ECharts 图表渲染的完整流程。通过产品销量展示示例，说明了如何在实际开发中实现数据可视化功能，适用于产品信息、用户信息及订单数据的图表展示场景。
蓝绿部署0 浏览 Spring Boot 数据可视化与图表集成
27.1 学习目标与重点提示
学习目标：掌握 Spring Boot 数据可视化与图表集成的核心概念与使用方法，包括数据可视化的定义与特点、图表工具的定义与特点、Spring Boot 与图表工具的集成及实际应用场景。
重点：
- 数据可视化的定义与特点
- 图表工具的定义与特点
- Spring Boot 与图表工具的集成
- Spring Boot 的实际应用场景
27.2 数据可视化与图表工具概述
27.2.1 数据可视化的定义
定义：数据可视化是指将数据通过图表、地图、仪表盘等形式直观地展示出来，帮助用户更好地理解和分析数据。
作用：
- 提高数据的可读性。
- 帮助用户发现数据中的规律。
- 支持快速决策。
常见的数据可视化工具：
- ECharts：百度开源的数据可视化库。
- Highcharts：基于 JavaScript 的数据可视化库。
- D3.js：基于 JavaScript 的数据可视化库。
- Tableau：商业数据可视化工具。
结论：数据可视化通过图表形式直观展示数据，作用是提高可读性、发现规律、支持决策。
27.2.2 图表工具的定义
定义：图表工具是一种用于创建和展示图表的软件工具，用于数据可视化。
作用：
常见的图表工具：同上（ECharts, Highcharts, D3.js, Tableau）。
结论：图表工具用于创建和展示图表，提升可视化效果。
27.3 Spring Boot 与图表工具的集成
27.3.1 集成 ECharts 的步骤
- 创建 Spring Boot 项目。
- 添加所需的依赖。
- 配置 ECharts。
- 创建数据访问层。
- 创建业务层。
- 创建控制器类。
- 创建前端页面。
- 测试应用。
示例代码
pom.xml 依赖配置：
<dependencies>
<dependency>
org.springframework.boot
spring-boot-starter-web
org.springframework.boot
spring-boot-starter-thymeleaf
org.springframework.boot
spring-boot-starter-test
test
微信扫一扫，关注极客日志
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
相关免费在线工具
- Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
- Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
- JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
- JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
<groupId>
</groupId>
<artifactId>
</artifactId>
</dependency>
<dependency>
<groupId>
</groupId>
<artifactId>
</artifactId>
</dependency>
<dependency>
<groupId>
</groupId>
<artifactId>
</artifactId>
<scope>
</scope>
</dependency>
</dependencies>
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/
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;
}
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 接口 ProductRepository.java：
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(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 类 ProductService.java：
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); }
}
控制器类 ProductController.java：
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/";
}
}
<!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 = [];
<th:block th:each="product : ${products}">
productNames.push('[('+ product.productName +')]');
productSales.push('[('+ product.sales +')]');
</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: false,
itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
label: { show: false, position: 'center' },
: { : { : , : , : } },
: { : },
: [
]
}]
};
option && myChart.(option);
</script>
</body>
</html>
应用启动类 EChartsApplication.java：
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class EChartsApplication {
public static void main(String[] args) {
SpringApplication.run(EChartsApplication.class, args);
}
}
结论：集成步骤包括创建项目、添加依赖、配置、分层开发、前端渲染及测试。
27.4 Spring Boot 的实际应用场景
在实际开发中，Spring Boot 数据可视化与图表集成的应用场景广泛，例如：
- 实现产品信息的图表展示。
- 实现用户信息的图表展示。
- 实现订单信息的图表展示。
- 实现销售数据的图表展示。
- 访问
http://localhost:8080/api/products/：返回产品列表页面，包含产品销量图表。
- 点击'添加产品'：跳转到添加产品页面。
- 点击'编辑'：跳转到编辑产品页面。
- 点击'删除'：删除产品。
结论：根据实际问题选择合适的图表工具，可实现多种业务场景的数据可视化。
总结
本章学习了 Spring Boot 数据可视化与图表集成，涵盖数据可视化与图表工具的定义、集成步骤及实际应用场景。重点掌握了数据可视化特点、工具选择、集成流程及应用落地方法。后续章节将学习 Spring Boot 其他组件及微服务相关内容。
emphasis
label
show
true
fontSize
20
fontWeight
'bold'
labelLine
show
false
data
<th:block th:each="product : ${products}">
{value:[(' + product.sales + ')],name:'[('+ product.productName +')']},
</th:block>
setOption
