体育数据大屏

校端体育 - 数据可视化大屏模块

项目背景

为校园体育教学管理提供一体化的数据可视化平台，实现学生体测数据、日常运动数据的实时监控与多维度分析，辅助学校进行体育教学决策与学情管理。

模块职责（本人独立完成）

1. 整体大屏布局与UI实现

   • 基于深色科技风的设计稿，实现了响应式大屏布局，包含多区域数据卡片、环形图、柱状图、折线图、雷达图、排行榜等组件。
   • 完成了页面的动态效果与数据过渡动画，如数字滚动、图表加载动画、卡片hover效果等，提升整体交互体验。

2. 数据可视化图表开发

   • 使用 ECharts 实现了多种业务图表：
     • 环形饼图：展示体测等级分布、男女体测等级对比。
     • 柱状图：实现国标体测项目达标率的横向对比。
     • 折线图：实现日常运动趋势的人次与参与率双轴监控。
     • 雷达图：实现全校学生（分性别、年级）体质维度的多维度对比分析。
   • 封装了通用图表组件，支持配置化渲染、数据更新与自适应适配，降低了后续维护成本。

3. 业务模块开发

   • 实现了基础信息概览模块：包含学校人数、男女比例、今日运动数据（人次、环比）等关键指标卡片。
   • 实现了体测记录管理模块：按年级/性别筛选展示学生体测数据（肺活量、坐位体前屈、长跑等项目）。
   • 实现了活跃度排行与年级运动数据统计模块：展示体育项目活跃度排行、各年级平均运动人次对比。

4. 交互与体验优化

   • 实现了多校区/年级的Tab切换功能，支持不同维度数据的快速切换展示。
   • 完成了大屏的自适应适配，支持不同分辨率下的布局自动调整。
   • 处理了数据加载、空状态、异常数据等边界情况，保证大屏的稳定性与可读性。

技术栈

• 前端框架：Vue3
• 图表库：ECharts
• 样式：CSS3 / SCSS / Unocss
• 数据交互：Axios 接口请求 + 数据格式化处理

项目链接