Spring Boot 數(shù)據(jù)可視化與圖表集成問題解析

更新時(shí)間：2026年03月21日 10:39:19 作者：星辰徐哥

本章我們學(xué)習(xí)了Spring Boot數(shù)據(jù)可視化與圖表集成,包括數(shù)據(jù)可視化的定義與特點(diǎn)、圖表工具的定義與特點(diǎn)、Spring Boot與圖表工具的集成、Spring Boot的實(shí)際應(yīng)用場景,學(xué)會(huì)了在實(shí)際開發(fā)中處理數(shù)據(jù)可視化與圖表集成問題,感興趣的朋友跟隨小編一起看看吧

Spring Boot 數(shù)據(jù)可視化與圖表集成

27.1 學(xué)習(xí)目標(biāo)與重點(diǎn)提示

學(xué)習(xí)目標(biāo)：掌握Spring Boot數(shù)據(jù)可視化與圖表集成的核心概念與使用方法，包括數(shù)據(jù)可視化的定義與特點(diǎn)、圖表工具的定義與特點(diǎn)、Spring Boot與圖表工具的集成、Spring Boot的實(shí)際應(yīng)用場景，學(xué)會(huì)在實(shí)際開發(fā)中處理數(shù)據(jù)可視化與圖表集成問題。
重點(diǎn)：數(shù)據(jù)可視化的定義與特點(diǎn)、圖表工具的定義與特點(diǎn)、Spring Boot與圖表工具的集成、Spring Boot的實(shí)際應(yīng)用場景。

27.2 數(shù)據(jù)可視化與圖表工具概述

數(shù)據(jù)可視化與圖表工具是Java開發(fā)中的重要組件。

27.2.1 數(shù)據(jù)可視化的定義

定義：數(shù)據(jù)可視化是指將數(shù)據(jù)通過圖表、地圖、儀表盤等形式直觀地展示出來，幫助用戶更好地理解和分析數(shù)據(jù)。
作用：

提高數(shù)據(jù)的可讀性。
幫助用戶發(fā)現(xiàn)數(shù)據(jù)中的規(guī)律。
支持快速?zèng)Q策。

常見的數(shù)據(jù)可視化工具：

ECharts：ECharts是百度開源的一個(gè)數(shù)據(jù)可視化庫。
Highcharts：Highcharts是一個(gè)基于JavaScript的數(shù)據(jù)可視化庫。
D3.js：D3.js是一個(gè)基于JavaScript的數(shù)據(jù)可視化庫。
Tableau：Tableau是一個(gè)商業(yè)數(shù)據(jù)可視化工具。

? 結(jié)論：數(shù)據(jù)可視化是指將數(shù)據(jù)通過圖表、地圖、儀表盤等形式直觀地展示出來，作用是提高數(shù)據(jù)的可讀性、幫助用戶發(fā)現(xiàn)數(shù)據(jù)中的規(guī)律、支持快速?zèng)Q策。

27.2.2 圖表工具的定義

定義：圖表工具是一種用于創(chuàng)建和展示圖表的軟件工具，用于數(shù)據(jù)可視化。
作用：

實(shí)現(xiàn)圖表的創(chuàng)建。
實(shí)現(xiàn)圖表的展示。
提高數(shù)據(jù)的可視化效果。

常見的圖表工具：

ECharts：ECharts是百度開源的一個(gè)數(shù)據(jù)可視化庫。
Highcharts：Highcharts是一個(gè)基于JavaScript的數(shù)據(jù)可視化庫。
D3.js：D3.js是一個(gè)基于JavaScript的數(shù)據(jù)可視化庫。
Tableau：Tableau是一個(gè)商業(yè)數(shù)據(jù)可視化工具。

? 結(jié)論：圖表工具是一種用于創(chuàng)建和展示圖表的軟件工具，作用是實(shí)現(xiàn)圖表的創(chuàng)建、展示、提高數(shù)據(jù)的可視化效果。

27.3 Spring Boot與圖表工具的集成

Spring Boot與圖表工具的集成是Java開發(fā)中的重要內(nèi)容。

27.3.1 集成ECharts的步驟

定義：集成ECharts的步驟是指使用Spring Boot與ECharts集成的方法。
步驟：

創(chuàng)建Spring Boot項(xiàng)目。
添加所需的依賴。
配置ECharts。
創(chuàng)建數(shù)據(jù)訪問層。
創(chuàng)建業(yè)務(wù)層。
創(chuàng)建控制器類。
創(chuàng)建前端頁面。
測試應(yīng)用。

示例：
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</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

application.properties文件中的配置：

# 服務(wù)器端口
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/

實(shí)體類：

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;
import java.util.stream.Collectors;
@Repository
public class ProductRepository {
    private List<Product> products = new ArrayList<>();
    public ProductRepository() {
        products.add(new Product(1L, "P001", "手機(jī)", 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", "耳機(jī)", 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);
    }
}

控制器類：

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

前端頁面（product-list.html）：

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>產(chǎn)品列表</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
    <h1>產(chǎn)品列表</h1>
    <a href="/api/products/add" rel="external nofollow" >添加產(chǎn)品</a>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>產(chǎn)品ID</th>
                <th>產(chǎn)品名稱</th>
                <th>價(jià)格</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})}" rel="external nofollow" >編輯</a>
                    <a th:href="@{/api/products/delete/{id}(id=${product.id})}" rel="external nofollow" >刪除</a>
                </td>
            </tr>
        </tbody>
    </table>
    <h2>產(chǎn)品銷量圖表</h2>
    <div id="salesChart" style="width: 800px; height: 400px;"></div>
    <script>
        // 初始化圖表
        var chartDom = document.getElementById('salesChart');
        var myChart = echarts.init(chartDom);
        var option;
        // 準(zhǔn)備數(shù)據(jù)
        var productNames = [];
        var productSales = [];
        <th:block th:each="product : ${products}">
            productNames.push('[(' + product.productName + ')]');
            productSales.push('[(' + product.sales + ')]');
        </th:block>
        // 配置圖表
        option = {
            title: {
                text: '產(chǎn)品銷量圖表',
                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'
                    },
                    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>
                    ]
                }
            ]
        };
        // 渲染圖表
        option && myChart.setOption(option);
    </script>
</body>
</html>

應(yīng)用啟動(dòng)類：

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

測試類：

import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.boot.test.web.client.TestRestTemplate;
import org.springframework.boot.web.server.LocalServerPort;
import static org.assertj.core.api.Assertions.assertThat;
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)
class EChartsApplicationTests {
    @LocalServerPort
    private int port;
    @Autowired
    private TestRestTemplate restTemplate;
    @Test
    void contextLoads() {
    }
    @Test
    void testGetAllProducts() {
        String response = restTemplate.getForObject("http://localhost:" + port + "/api/products/", String.class);
        assertThat(response).contains("產(chǎn)品列表");
    }
}

? 結(jié)論：集成ECharts的步驟包括創(chuàng)建Spring Boot項(xiàng)目、添加所需的依賴、配置ECharts、創(chuàng)建數(shù)據(jù)訪問層、創(chuàng)建業(yè)務(wù)層、創(chuàng)建控制器類、創(chuàng)建前端頁面、測試應(yīng)用。

27.4 Spring Boot的實(shí)際應(yīng)用場景

在實(shí)際開發(fā)中，Spring Boot數(shù)據(jù)可視化與圖表集成的應(yīng)用場景非常廣泛，如：

實(shí)現(xiàn)產(chǎn)品信息的圖表展示。
實(shí)現(xiàn)用戶信息的圖表展示。
實(shí)現(xiàn)訂單信息的圖表展示。
實(shí)現(xiàn)銷售數(shù)據(jù)的圖表展示。

示例：

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")
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/";
    }
}
@Service
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);
    }
}
@Repository
class ProductRepository {
    private List<Product> products = new ArrayList<>();
    public ProductRepository() {
        products.add(new Product(1L, "P001", "手機(jī)", 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", "耳機(jī)", 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));
    }
}
@SpringBootApplication
public class EChartsApplication {
    public static void main(String[] args) {
        SpringApplication.run(EChartsApplication.class, args);
    }
}
// 測試類
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)
class EChartsApplicationTests {
    @LocalServerPort
    private int port;
    @Autowired
    private TestRestTemplate restTemplate;
    @Test
    void contextLoads() {
    }
    @Test
    void testGetAllProducts() {
        String response = restTemplate.getForObject("http://localhost:" + port + "/api/products/", String.class);
        assertThat(response).contains("產(chǎn)品列表");
    }
}

輸出結(jié)果：

訪問http://localhost:8080/api/products/：返回產(chǎn)品列表頁面，包含產(chǎn)品銷量圖表。
點(diǎn)擊“添加產(chǎn)品”：跳轉(zhuǎn)到添加產(chǎn)品頁面。
點(diǎn)擊“編輯”：跳轉(zhuǎn)到編輯產(chǎn)品頁面。
點(diǎn)擊“刪除”：刪除產(chǎn)品。

? 結(jié)論：在實(shí)際開發(fā)中，Spring Boot數(shù)據(jù)可視化與圖表集成的應(yīng)用場景非常廣泛，需要根據(jù)實(shí)際問題選擇合適的圖表工具。

總結(jié)

本章我們學(xué)習(xí)了Spring Boot數(shù)據(jù)可視化與圖表集成，包括數(shù)據(jù)可視化的定義與特點(diǎn)、圖表工具的定義與特點(diǎn)、Spring Boot與圖表工具的集成、Spring Boot的實(shí)際應(yīng)用場景，學(xué)會(huì)了在實(shí)際開發(fā)中處理數(shù)據(jù)可視化與圖表集成問題。其中，數(shù)據(jù)可視化的定義與特點(diǎn)、圖表工具的定義與特點(diǎn)、Spring Boot與圖表工具的集成、Spring Boot的實(shí)際應(yīng)用場景是本章的重點(diǎn)內(nèi)容。從下一章開始，我們將學(xué)習(xí)Spring Boot的其他組件、微服務(wù)等內(nèi)容。

到此這篇關(guān)于Spring Boot 數(shù)據(jù)可視化與圖表集成問題解析的文章就介紹到這了,更多相關(guān)springboot數(shù)據(jù)可視化與圖表集成內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: