Spring Boot实现数据大屏展示（附代码）

小小鸭程序员

于 2025-04-09 13:01:04 发布

阅读量1.3k

点赞数 37

本文链接：https://blog.youkuaiyun.com/weixin_62922042/article/details/147091265

版权

大屏数据展示是许多后台管理系统和监控系统的核心需求。本文将通过Spring Boot+ECharts实现一个包含动态数据的可视化大屏。

一、项目搭建

1. 创建Spring Boot项目

使用Spring Initializr创建项目，选择：

Web -> Spring Web
Template Engines -> Thymeleaf

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>
</dependencies>

二、后端接口开发

1. 数据实体类

// DataDTO.java
@Data
public class DataDTO {
    private Integer totalUsers;    // 总用户数
    private Integer todayNew;      // 今日新增
    private Double conversionRate; // 转化率
    private List<Integer> orderTrend; // 订单趋势
}

2. 数据服务类

// DashboardService.java
@Service
public class DashboardService {
    
    // 模拟数据生成
    public DataDTO getDashboardData() {
        DataDTO data = new DataDTO();
        Random random = new Random();
        
        data.setTotalUsers(10000 + random.nextInt(1000));
        data.setTodayNew(50 + random.nextInt(20));
        data.setConversionRate(0.3 + random.nextDouble() * 0.2);
        
        // 生成最近7天订单趋势
        List<Integer> trends = new ArrayList<>();
        for(int i=0; i<7; i++){
            trends.add(200 + random.nextInt(100));
        }
        data.setOrderTrend(trends);
        
        return data;
    }
}

3. Controller接口

// DashboardController.java
@RestController
@RequestMapping("/api/dashboard")
public class DashboardController {

    @Autowired
    private DashboardService dashboardService;

    @GetMapping("/summary")
    public DataDTO getSummaryData() {
        return dashboardService.getDashboardData();
    }
}

三、前端页面开发

1. 创建页面

<!-- resources/templates/dashboard.html -->
<!DOCTYPE html>
<html>
<head>
    <title>数据大屏</title>
    <!-- 引入ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
</head>
<body>
    <div style="display: flex; flex-wrap: wrap">
        <!-- 总用户数 -->
        <div id="totalUsers" style="width: 30%; height: 300px"></div>
        <!-- 订单趋势 -->
        <div id="orderTrend" style="width: 60%; height: 300px"></div>
    </div>

    <script>
        // 初始化图表
        function initCharts() {
            // 总用户数（柱状图）
            let userChart = echarts.init(document.getElementById('totalUsers'));
            
            // 订单趋势（折线图）
            let orderChart = echarts.init(document.getElementById('orderTrend'));

            // 获取数据
            fetch('/api/dashboard/summary')
                .then(response => response.json())
                .then(data => {
                    // 更新用户数图表
                    userChart.setOption({
                        title: { text: '总用户数' },
                        tooltip: {},
                        xAxis: { data: ['用户总数'] },
                        yAxis: {},
                        series: [{
                            name: '数量',
                            type: 'bar',
                            data: [data.totalUsers]
                        }]
                    });

                    // 更新订单趋势图表
                    orderChart.setOption({
                        title: { text: '近7日订单趋势' },
                        xAxis: { data: ['Day1','Day2','Day3','Day4','Day5','Day6','Day7'] },
                        yAxis: {},
                        series: [{
                            name: '订单量',
                            type: 'line',
                            data: data.orderTrend
                        }]
                    });
                });
        }
        
        // 页面加载完成后初始化
        window.onload = initCharts;
    </script>
</body>
</html>

四、运行效果

创建视图控制器：

// WebMvcConfig.java
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("dashboard");
    }
}

启动应用后访问：http://localhost:8080

五、扩展建议

数据实时更新：添加WebSocket支持
接入真实数据库：整合MyBatis或JPA
添加更多图表类型：地图、饼图等
增加权限验证：集成Spring Security

实现效果：页面将展示动态生成的柱状图和折线图，每次刷新都会获得新的随机数据，真实项目只需替换数据获取逻辑即可。