脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → springboot数据可视化与图表集成

Spring Boot 数据可视化与图表集成问题解析

 更新时间：2026年03月21日 10:39:19   作者：星辰徐哥  
本章我们学习了Spring Boot数据可视化与图表集成,包括数据可视化的定义与特点、图表工具的定义与特点、Spring Boot与图表工具的集成、Spring Boot的实际应用场景,学会了在实际开发中处理数据可视化与图表集成问题,感兴趣的朋友跟随小编一起看看吧

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

27.1 学习目标与重点提示

学习目标：掌握Spring Boot数据可视化与图表集成的核心概念与使用方法，包括数据可视化的定义与特点、图表工具的定义与特点、Spring Boot与图表工具的集成、Spring Boot的实际应用场景，学会在实际开发中处理数据可视化与图表集成问题。
重点：数据可视化的定义与特点、图表工具的定义与特点、Spring Boot与图表工具的集成、Spring Boot的实际应用场景。

27.2 数据可视化与图表工具概述

数据可视化与图表工具是Java开发中的重要组件。

27.2.1 数据可视化的定义

定义：数据可视化是指将数据通过图表、地图、仪表盘等形式直观地展示出来，帮助用户更好地理解和分析数据。
作用：

  • 提高数据的可读性。
  • 帮助用户发现数据中的规律。
  • 支持快速决策。

常见的数据可视化工具：

  • ECharts：ECharts是百度开源的一个数据可视化库。
  • Highcharts：Highcharts是一个基于JavaScript的数据可视化库。
  • D3.js：D3.js是一个基于JavaScript的数据可视化库。
  • Tableau：Tableau是一个商业数据可视化工具。

✅ 结论：数据可视化是指将数据通过图表、地图、仪表盘等形式直观地展示出来，作用是提高数据的可读性、帮助用户发现数据中的规律、支持快速决策。

27.2.2 图表工具的定义

定义：图表工具是一种用于创建和展示图表的软件工具，用于数据可视化。
作用：

  • 实现图表的创建。
  • 实现图表的展示。
  • 提高数据的可视化效果。

常见的图表工具：

  • ECharts：ECharts是百度开源的一个数据可视化库。
  • Highcharts：Highcharts是一个基于JavaScript的数据可视化库。
  • D3.js：D3.js是一个基于JavaScript的数据可视化库。
  • Tableau：Tableau是一个商业数据可视化工具。

✅ 结论：图表工具是一种用于创建和展示图表的软件工具，作用是实现图表的创建、展示、提高数据的可视化效果。

27.3 Spring Boot与图表工具的集成

Spring Boot与图表工具的集成是Java开发中的重要内容。

27.3.1 集成ECharts的步骤

定义：集成ECharts的步骤是指使用Spring Boot与ECharts集成的方法。
步骤：

  1. 创建Spring Boot项目。
  2. 添加所需的依赖。
  3. 配置ECharts。
  4. 创建数据访问层。
  5. 创建业务层。
  6. 创建控制器类。
  7. 创建前端页面。
  8. 测试应用。

示例：
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文件中的配置：

# 服务器端口
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方法
    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(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>产品列表</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
    <h1>产品列表</h1>
    <a href="/api/products/add" rel="external nofollow" >添加产品</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})}" rel="external nofollow" >编辑</a>
                    <a th:href="@{/api/products/delete/{id}(id=${product.id})}" rel="external nofollow" >删除</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'
                    },
                    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>

应用启动类：

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("产品列表");
    }
}

✅ 结论：集成ECharts的步骤包括创建Spring Boot项目、添加所需的依赖、配置ECharts、创建数据访问层、创建业务层、创建控制器类、创建前端页面、测试应用。

27.4 Spring Boot的实际应用场景

在实际开发中，Spring Boot数据可视化与图表集成的应用场景非常广泛，如：

  • 实现产品信息的图表展示。
  • 实现用户信息的图表展示。
  • 实现订单信息的图表展示。
  • 实现销售数据的图表展示。

示例：

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", "手机", 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));
    }
}
@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("产品列表");
    }
}

输出结果：

  • 访问http://localhost:8080/api/products/：返回产品列表页面，包含产品销量图表。
  • 点击“添加产品”：跳转到添加产品页面。
  • 点击“编辑”：跳转到编辑产品页面。
  • 点击“删除”：删除产品。

✅ 结论：在实际开发中，Spring Boot数据可视化与图表集成的应用场景非常广泛，需要根据实际问题选择合适的图表工具。

总结

本章我们学习了Spring Boot数据可视化与图表集成，包括数据可视化的定义与特点、图表工具的定义与特点、Spring Boot与图表工具的集成、Spring Boot的实际应用场景，学会了在实际开发中处理数据可视化与图表集成问题。其中，数据可视化的定义与特点、图表工具的定义与特点、Spring Boot与图表工具的集成、Spring Boot的实际应用场景是本章的重点内容。从下一章开始，我们将学习Spring Boot的其他组件、微服务等内容。

到此这篇关于Spring Boot 数据可视化与图表集成问题解析的文章就介绍到这了,更多相关springboot数据可视化与图表集成内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Java Scanner如何获取字符串和带空格的字符串

    Java Scanner如何获取字符串和带空格的字符串

    这篇文章主要介绍了Java Scanner如何获取字符串和带空格的字符串问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-08-08
  • Java中Mono类的一些基本方法和示例代码

    Java中Mono类的一些基本方法和示例代码

    在Java编程中,我们经常会遇到需要创建单例（singleton）对象的情况,单例模式是一种常见的设计模式,它保证一个类只有一个实例,并提供一个全局访问点,这篇文章主要给大家介绍了关于Java中Mono类的相关资料,需要的朋友可以参考下
    2024-07-07
  • 教你如何使用Java实现WebSocket

    教你如何使用Java实现WebSocket

    这篇文章主要介绍了教你如何使用Java实现WebSocket问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • 使用Spring Boot Mybatis 搞反向工程的步骤

    使用Spring Boot Mybatis 搞反向工程的步骤

    这篇文章主要介绍了使用Spring Boot Mybatis 搞反向工程的步骤，帮助大家更好的理解和使用spring boot框架，感兴趣的朋友可以了解下
    2021-01-01
  • Springboot详解底层启动过程

    Springboot详解底层启动过程

    这篇文章主要介绍了SpringBoot启动过程的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • SpringBoot启动时执行某些操作的8种方式

    SpringBoot启动时执行某些操作的8种方式

    在真实项目开发过程中,我们经常会需要在程序启动时执行一些特定的业务操作,比如系统预热、系统初始化等,小编为大家介绍 8 种实现方式,需要的朋友可以参考下
    2025-10-10
  • spring boot创建项目包依赖问题的解决

    spring boot创建项目包依赖问题的解决

    本篇文章主要介绍了spring boot创建项目包依赖问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Java 最重要布局管理器GridBagLayout的使用方法

    Java 最重要布局管理器GridBagLayout的使用方法

    GridBagLayout是java里面最重要的布局管理器之一,可以做出很复杂的布局，可以说GridBagLayout是必须要学好的的,需要的朋友可以了解下
    2012-12-12
  • 解决Maven静态资源过滤问题

    解决Maven静态资源过滤问题

    在我们使用Maven构建项目的时候，会默认过滤掉静态资源，所以，需要手动来配置，本文就介绍一下Maven静态资源过滤的问题解决，感兴趣的可以了解一下
    2021-06-06
  • Mybatis-Plus注入SQL原理分析

    Mybatis-Plus注入SQL原理分析

    本文主要介绍了Mybatis-Plus注入SQL原理分析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07

最新评论