当前位置：首页 > news >正文

Vue3 + G2 实战：打造高校学生打卡数据可视化大屏（附完整源码）

news 2026/5/11 19:04:55

Vue3 + G2 实战：打造高校学生打卡数据可视化大屏（附完整源码）

在智慧校园建设中，如何直观展示学生的运动打卡情况？如何从海量数据中挖掘出活跃时段与学院参与率？

本文将带你深入剖析一个基于 Vue3 + TypeScript + Ant Design Vue + @antv/g2 的打卡数据分析看板。我们将实现从多维统计卡片到交互式热力图、下钻柱状图的全链路数据可视化方案，并处理复杂的动态时间范围筛选逻辑。

🎯 项目背景与核心功能

该页面旨在为管理者提供一站式的学生打卡数据洞察，核心包含四大模块：

关键指标概览：今日/本周的打卡、未打卡、全勤及缺勤人数统计。
运动排行榜：支持按日、周、月、学期多维度筛选的运动次数 Top 榜单。
活跃时间热力图：通过颜色深浅展示近七天不同时间段的学生活跃分布。
学院参与率分析：各学院打卡参与率柱状图，支持点击下钻查看班级详情。

🏗️ 架构设计与技术选型

技术栈

框架: Vue 3 (Setup Syntax) + TypeScript
UI 库: Ant Design Vue (卡片、表格、选择器、弹窗)
图表库: @antv/g2 (高性能可视化引擎)
工具库: Dayjs (时间处理), Await-to-js (优雅的错误处理)

布局策略

页面采用 Flexbox 进行响应式布局，分为上下两个主要白色卡片区域，中间通过分割线区隔，整体风格简洁清爽。

<template><div class="data-analysis-page"><!-- 上块：统计卡片 + 排名/热力图 --><div class="page-upper"><!-- 顶部统计卡片 --><div class="top-block">...</div><!-- 分割线 --><div class="divider-h" /><!-- 中间左右分栏 --><div class="middle-section"><div class="middle-left">...排行榜...</div><div class="divider-v" /><div class="middle-right">...热力图...</div></div></div><!-- 下块：学院参与率柱状图 --><div class="page-lower"><div class="bottom-section">...柱状图...</div></div><!-- 下钻弹窗 --><a-modal v-model:visible="collegeModalVisible">...</a-modal></div>
</template>

💡 核心功能实现详解

1. 动态时间范围筛选器

这是本项目的难点之一。用户可以选择“日、周、月、学期”四种模式，每种模式对应的选择器组件和参数解析逻辑完全不同。

实现思路：
利用 v-if 动态渲染不同的 Ant Design 选择器，并通过统一的 getRankDateRange 函数将前端选择转换为后端需要的 start_date 和 end_date。

// 定义多种时间模式
const dateMode = ref<'day' | 'month' | 'semester' | 'week'>('day');
const dateRangeDay = ref<[Dayjs, Dayjs] | null>([dayjs(), dayjs()]);
const semesterValue = ref<string | undefined>(undefined);/** 统一解析日期范围 */
function getRankDateRange(): { start_date: string; end_date: string } {const today = dayjs().format('YYYY-MM-DD');if (dateMode.value === 'day') {return {start_date: dateRangeDay.value?.[0].format('YYYY-MM-DD') || today,end_date: dateRangeDay.value?.[1].format('YYYY-MM-DD') || today,};}if (dateMode.value === 'semester' && semesterValue.value) {// 从缓存的学期映射表中获取起止日期const range = termRangeByValue.value[semesterValue.value];return range || { start_date: today, end_date: today };}// ... 其他模式处理return { start_date: today, end_date: today };
}

亮点：

级联加载：选择“学期”后，自动触发“周次”选项的加载 (watch(semesterForWeek)).
数据映射：预先拉取学期/周次列表并构建 Map，避免每次请求都计算日期。

2. 基于 G2 的热力图 (Heatmap)

使用 @antv/g2 绘制学生活跃时间热力图，X 轴为小时 (1-16 节)，Y 轴为日期 (近 7 天)。

function renderHeatmap() {heatmapChart = new Chart({ container: heatmapRef.value, autoFit: true, height: 280 });heatmapChart.options({type: 'view',data: heatmapData.value, // 格式：[{ date: '05-01', hour: '1', value: 50 }, ...]scale: {date: { range: [1, 0] }, // Y 轴倒序，最近的日期在上面value: { min: 0, max: 1 }, // 归一化颜色},children: [{type: 'cell',encode: { x: 'hour', y: 'date', color: 'value' },style: { inset: 0.5 }, // 单元格间距scale: {color: { range: ['#E8F0FE', '#2f54eb'] }, // 浅蓝到深蓝渐变},},],});heatmapChart.render();
}

细节处理：

空数据兜底：如果接口返回空，自动生成近 7 天 x 16 小时的零值矩阵，保证图表不崩坏。
Y 轴反转：通过 scale.date.range: [1, 0] 实现时间从上到下流逝的视觉习惯。

3. 可下钻的柱状图 (Drill-down Column Chart)

展示各学院参与率，并支持点击柱子弹出 Modal 查看该学院下的班级排名。

columnChart.on('interval:click', (e: any) => {const row = e.data?.data;const collegeCode = row?.college_code;const collegeName = row?.college;if (collegeCode) {collegeModalTitle.value = `${collegeName} - 班级参与率`;collegeModalVisible.value = true;// 异步加载班级数据并渲染新图表nextTick(() => renderCollegeModalChart(collegeCode, collegeName));}
});

资源管理：
在 Modal 关闭 (onCollegeModalClose) 和组件卸载 (onBeforeUnmount) 时，务必调用 chart.destroy() 防止内存泄漏。

function safeDestroyChart(chart: Chart | null): null {if (chart) {try { chart.destroy(); } catch (e) { console.warn(e); }}return null;
}

4. 统计卡片的视觉设计

顶部 5 个统计卡片采用不同的配色方案来区分业务含义（如：全勤用绿色，未打卡用橙色）。

.stat-card-week-all {background: #ecfbee;border-color: #d2eed4;.stat-icon-green {background: linear-gradient(138deg, #62ca6d 2.9%, #0daa1d 91%);}
}

利用 CSS Grid 或 Flexbox 实现自适应排列，确保在不同分辨率下都能美观展示。

🔥 性能优化与最佳实践

并行请求：使用 Promise.all 并行加载统计数、排行榜、热力图和柱状图数据，减少首屏等待时间。
```
await Promise.all([loadClockedCount(),loadRankList(),loadHeatmap(),loadCollegeChart(),
]);
```
防抖与按需渲染：图表仅在数据加载完成且 DOM 挂载后 (nextTick) 渲染；日期切换时仅重新请求对应数据，而非全量刷新。
类型安全：全面使用 TypeScript 接口 (interface IRankItem) 定义数据结构，利用可选链 (?.) 和空值合并 (??) 处理后端可能缺失的字段。
错误隔离：使用 await-to-js 包裹异步请求，单个接口失败不影响其他模块展示，并在 catch 块中设置默认空数据。