正文

轻松掌握Spring ECharts动态更新数据技巧，让你的图表动起来！

/0 浏览量
0428

在当今的数据可视化领域，ECharts 是一个功能强大且灵活的开源 JavaScript 库，它可以帮助开发者轻松创建交互式图表。而结合 Spring Boot 应用，我们可以实现图表的动态更新，使图表数据与后端数据同步，提高用户体验。本文将详细介绍如何在 Spring Boot 项目中集成 ECharts 并实现动态数据更新。

一、准备工作

1. 创建 Spring Boot 项目

首先，你需要创建一个 Spring Boot 项目。可以通过 Spring Initializr（https://start.spring.io/）来快速生成项目结构。

2. 添加依赖

在 pom.xml 文件中添加以下依赖：

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>
</dependencies>

3. 添加 ECharts 依赖

在 src/main/resources/static 目录下创建一个 echarts 文件夹，并将 ECharts 的 JavaScript 和 CSS 文件复制到该文件夹中。

二、创建图表页面

1. 创建 HTML 页面

在 src/main/resources/templates 目录下创建一个名为 chart.html 的 HTML 文件，并引入 ECharts 和 WebSocket 的相关资源。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts 动态数据</title>
    <link rel="stylesheet" href="echarts/echarts.css">
    <script src="echarts/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/socket.io-client/dist/socket.io.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: '动态数据'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: []
            }]
        };
        chart.setOption(option);
        
        // 创建 WebSocket 连接
        var socket = io.connect('http://' + document.domain + ':' + location.port);
        socket.on('data', function (data) {
            // 更新图表数据
            chart.setOption({
                xAxis: {
                    data: data.xAxis
                },
                series: [{
                    data: data.series
                }]
            });
        });
    </script>
</body>
</html>

2. 添加 WebSocket 配置

在 src/main/java/com/yourpackage/config/WebSocketConfig.java 文件中添加 WebSocket 配置类。

package com.yourpackage.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
    }
}

三、发送动态数据

1. 创建数据服务

在 src/main/java/com/yourpackage/service/DataService.java 文件中创建一个数据服务类，用于模拟数据发送。

package com.yourpackage.service;

import org.springframework.stereotype.Service;

import java.util.Random;

@Service
public class DataService {
    private Random random = new Random();

    public void sendData() {
        // 模拟数据
        String[] xAxis = {"A", "B", "C", "D", "E"};
        int[] series = new int[xAxis.length];
        for (int i = 0; i < xAxis.length; i++) {
            series[i] = random.nextInt(100);
        }
        // 发送数据
        String data = "{\"xAxis\": " + java.util.Arrays.toString(xAxis) + ", \"series\": " + java.util.Arrays.toString(series) + "}";
        System.out.println("发送数据: " + data);
    }
}

2. 创建数据发送任务

在 src/main/java/com/yourpackage/task/SendDataTask.java 文件中创建一个定时任务，用于定时发送数据。

package com.yourpackage.task;

import com.yourpackage.service.DataService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.scheduling.annotation.EnableScheduling;
import org.springframework.stereotype.Component;

@Component
@EnableScheduling
public class SendDataTask {
    @Autowired
    private DataService dataService;

    @Scheduled(fixedRate = 5000) // 每 5 秒发送一次数据
    public void sendData() {
        dataService.sendData();
    }
}

3. 创建 WebSocket 控制器

在 src/main/java/com/yourpackage/controller/WebSocketController.java 文件中创建一个 WebSocket 控制器，用于接收客户端发送的消息。

package com.yourpackage.controller;

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class WebSocketController {
    @MessageMapping("/sendData")
    @SendTo("/topic/data")
    public String sendData(String data) {
        return data;
    }
}

四、总结

通过以上步骤，我们成功实现了在 Spring Boot 项目中集成 ECharts 并实现动态数据更新。在实际应用中，你可以根据需求调整数据发送频率、数据格式等。希望本文能帮助你轻松掌握 Spring ECharts 动态更新数据技巧，让你的图表动起来！

-- 展开阅读全文 --