学校班级管理大屏看板：从零到上线的实战指南

一套基于 HTML/CSS/JavaScript 与 ECharts 的轻量级可视化模板，适用于学校学生与班级管理数据的展示、演示和快速落地。

点击可进行线上预览
点击可进行线上预览
点击可进行线上预览

为什么做这套看板

管理者需要快速、直观地了解“学生规模、班级分布、出勤趋势与综合表现”。
教务或信息中心常见需求是“先跑通可视化，再逐步接入真实数据”。
因此我们选择零依赖的静态站点方案：打开即用、易部署、易扩展。

功能一览

头部信息：当前时间实时显示、最近刷新时间、看板标题。
指标卡（KPI）：学生总数、班级总数、教师总数、今日出勤率。
图表区：
- 年级学生分布（柱状图）
- 男女比例（环形图）
- 近 30 天出勤趋势（折线图）
- 班级排名（平均成绩，横向柱状图）
- 综合评价指标（雷达图：纪律、作业完成、课堂表现、活动参与、家校互动）
班级概览表：班级、年级、班主任、学生数、男女数、出勤率、平均成绩。
事件公告：近期通知/提醒/表扬列表。

技术栈与项目结构

技术栈：原生 HTML/CSS/JavaScript + ECharts（CDN）
优点：零构建、轻维护、可直接托管到任意静态服务器。

├── index.html # 页面结构与图表容器
├── css/
│ └── style.css # 暗色大屏主题与布局样式
└── js/
└── app.js # 模拟数据、ECharts 配置与定时刷新逻辑

## 快速预览

本项目已在本地以 5173 端口提供预览，可直接访问：

http://localhost:5173/

如果需要手动启动：

- 方案 A（推荐）：使用 Python 内置服务器

python -m http.server 5173

- 方案 B（Node 环境）：使用 http-server（需安装 Node 与 npm）

npm i -g http-server
http-server -p 5173

## 设计与交互要点

### 视觉风格

- 暗色主题、柔和渐变与内发光，适合投屏场景。
- CSS 变量集中管理主题色，方便统一调整：

```css
:root {
  --bg: #0b1222;
  --panel: #111a30;
  --accent: #00d3ff;
  --accent-2: #4b8bff;
  --text: #e6f1ff;
  --muted: #8aa0c2;
  --success: #29d39a;
}

布局与可读性

三列自适应栅格，左侧为概览与分布，中间为趋势与表格，右侧为排名与雷达、事件。
表头固定、内容滚动，保障数据量增加时的可读性。

数据与图表逻辑

本模板默认生成“模拟数据”，每 8 秒刷新一次以模拟实时变化。

数据生成位于 js/app.js 的 generateMockData，含以下维度：
- totalStudents、classCount、teacherCount、attendanceToday
- gradesAgg：年级学生聚合
- maleSum、femaleSum：男女总数
- attendanceTrend：近 30 天出勤率
- classes：班级明细（学生数、男女数、出勤率、平均成绩、班主任）
- radarMetrics、radarValues：综合评价指标与值
- ranking：按平均成绩排序的 Top 班级
- events：近期事件/公告

图表示例（ECharts）

出勤趋势（折线图）配置示例：

charts.attendance.setOption({
  xAxis: { type: 'category', data: Array.from({length: data.attendanceTrend.length}, (_,i) => `${i+1}`) },
  yAxis: { type: 'value', min: 80, max: 100, axisLabel: { formatter: '{value}%'} },
  series: [{
    type: 'line', data: data.attendanceTrend.map(v => +v.toFixed(1)), smooth: true,
    lineStyle: { width: 3, color: '#00d3ff' },
    areaStyle: { color: 'rgba(0,211,255,0.15)' }
  }]
});

接入真实数据（建议做法）

在 js/app.js 中用接口数据替换模拟数据：

async function fetchData() {
  const res = await fetch('/api/dashboard');
  const raw = await res.json();
  // 将后端返回映射到前端所需结构
  return {
    totalStudents: raw.stats.totalStudents,
    classCount: raw.stats.classCount,
    teacherCount: raw.stats.teacherCount,
    attendanceToday: raw.stats.attendanceToday,
    gradesAgg: raw.gradesAgg,           // { '一年级': 120, ... }
    maleSum: raw.gender.male,
    femaleSum: raw.gender.female,
    attendanceTrend: raw.attendanceTrend, // [95.1, 94.8, ...]
    classes: raw.classes,               // 班级列表
    radarMetrics: raw.radar.metrics,
    radarValues: raw.radar.values,
    ranking: raw.ranking,
    events: raw.events,
  };
}

// 将 refresh() 改造为：
async function refresh() {
  const data = await fetchData();
  renderKPIs(data);
  renderCharts(data);
  renderTable(data.classes);
  renderEvents(data.events);
  lastRefreshEl.textContent = formatDateTime(new Date());
}

接口返回示例（可按需调整）：

{
  "stats": {
    "totalStudents": 1320,
    "classCount": 24,
    "teacherCount": 28,
    "attendanceToday": 96.3
  },
  "gradesAgg": { "一年级": 220, "二年级": 210, "三年级": 215, "四年级": 220, "五年级": 225, "六年级": 230 },
  "gender": { "male": 670, "female": 650 },
  "attendanceTrend": [95.1, 95.4, 95.0, 95.6, 96.0, 95.8, 96.2],
  "classes": [{
    "name": "三年级2班",
    "grade": "三年级",
    "teacher": "王老师",
    "students": 45,
    "male": 23,
    "female": 22,
    "attendanceRate": 96.8,
    "avgScore": 89.2
  }],
  "radar": {
    "metrics": ["纪律", "作业完成", "课堂表现", "活动参与", "家校互动"],
    "values": [92, 88, 90, 84, 86]
  },
  "ranking": [{"name": "六年级1班", "avgScore": 92.1}, {"name": "五年级3班", "avgScore": 90.5}],
  "events": [{"tag": "info", "title": "期中考试成绩发布", "time": "2025-11-10 09:00:00"}]
}

定制与扩展

校名与标题：修改 index.html 头部 <h1> 与副标题。
主题配色：在 css/style.css 顶部调整 CSS 变量，如 --accent。
指标卡：在 index.html 的 KPI 区域增加/删除卡片，并在 app.js 中赋值。
图表维度：
- 年级分布可拆到“年级-班级”堆叠柱状。
- 排名可改为“按出勤率或综合指数”排序。
刷新频率：将 setInterval(refresh, 8000) 中的 8000 调整为所需毫秒数。

部署建议

内网看板：部署到学校内网的任意静态服务器（Nginx/Apache/IIS），或直接在运维机上用 http.server 启动。
外网展示：托管到对象存储（OSS/OBS）或静态站点服务（如 GitHub Pages / Vercel 静态模式）。
浏览器设置：
- 建议使用最新版本的 Chrome/Edge。
- 投屏时开启浏览器全屏模式（F11）与隐藏地址栏/书签栏。

常见问题（FAQ）

没有 Node/npm 怎么预览？
- 使用 python -m http.server 5173 即可，不依赖 Node。
ECharts 配置太多看不懂怎么办？
- 从一个图表开始改动（例如折线图），理解 xAxis/yAxis/series 三要素，然后复制到其他图表。
数据很大时卡顿？
- 降低刷新频率、分页表格、图表开启采样或下钻（只展示 Top-N，点击查看详细）。
想要权限/登录？
- 建议后端或统一门户实现；本看板专注展示层，不内置账号系统。

结语

这套看板模板旨在帮助你快速搭建“可上线的演示级大屏”，随后逐步替换模拟数据、接入真实接口、按需美化和扩展。若你希望我将校名、年级与班级命名规则、指标定义改成你们的实际规范，或协助对接你们的后端 API，我可以继续为你完善与美化。