户外数据大屏

户外健身数据大屏（独立负责前端开发）

项目背景

为社区/园区户外智能健身场景打造的数据可视化大屏，实现用户运动数据的实时采集、统计与分析，直观展示户外健身设备的使用情况与用户画像。

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

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

   • 基于清新科技风的设计稿，完成了大屏整体布局开发，包含核心指标卡片、环形图、折线图、条形图、排行榜等多种组件。
   • 实现了大屏的动态效果与实时数据刷新，包括时间/天气同步、数字滚动动画、图表加载过渡效果，提升大屏的科技感与交互体验。

2. 数据可视化图表开发

   • 使用 ECharts 实现了多维度业务图表：
     • 环形饼图：累计使用人数的男女比例、年龄分布统计。
     • 折线图：近24小时使用人流量趋势对比（今日/昨日数据）。
     • 条形图：居民运动项目偏好、运动人次偏好排行对比。
   • 封装了通用图表组件，支持配置化渲染、数据更新与大屏自适应适配，降低维护成本。

3. 业务模块开发

   • 核心指标概览模块：累计使用人数、累计运动人数、今日使用人数等关键数据卡片展示。
   • 用户画像分析模块：通过性别、年龄分布图表，直观展示户外健身的用户群体特征。
   • 运动趋势分析模块：近24小时人流量趋势，辅助分析用户使用高峰时段。
   • 运动偏好排行模块：按运动项目（AI虚拟骑行、跳绳、立定跳远等）统计用户偏好与参与人次。
   • 排行榜模块：实现了总榜/周榜/月榜的切换，按不同运动项目展示用户成绩与活动排行。

4. 交互与体验优化

   • 实现了排行榜多Tab切换（总榜/周榜/月榜）、运动项目标签切换功能，支持多维度数据筛选查看。
   • 完成了大屏的自适应适配，保证不同分辨率下的布局稳定性。
   • 处理了数据加载、空状态、异常数据等边界情况，保证大屏的稳定性与可读性。

技术栈

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

项目链接

项目链接

项目预览