Heat Map 热力图 拾光自习室旗舰店 / 全年座位占用观测
返回风格目录

数据分析 / 补充风格 supplemental

热力矩阵即主角

自习室是热力图最有解释力的场景之一: 座位占用率天然落在 0 到 100 之间, 冷色代表空座, 暖色代表满员。本页以拾光自习室旗舰店的运营样本为数据, 用同一套蓝到红的六级色阶贯穿三个视角: 年度日历热力、时段与星期矩阵、楼层区域平面。每一格都标注数值或提供悬停提示, 颜色不是唯一的读取通道。

--%

全年日均占用率 / 滚动 12 个月均值

--天

全年满座天数 / 单日占用 ≥90%

97%

黄金时段占用 / 周日 20:00-22:00

147座

在册座位 / 六个功能区域

01全年日历热力

53 周 × 7 天 / 每格一天 / 悬停查看日期与占用率 / 窄屏可横向滚动

<20 20-39 40-59 60-74 75-89 90 以上 占用率 / %
0% 25% 50% 75% 100%

02时段 × 星期占用矩阵

每格为四周滑动均值 / 数值直标不依赖颜色 / 右列与底行为均值

读取示例: 周日 20:00-22:00 平均占用 97%, 为全周峰值; 周六与周日的早间 08:00-10:00 不足 25%, 是错峰自习的最佳窗口。

03区域热力 / 实时平面

周日 20:40 快照 / 在座 126 人 / 全店 147 座 / 总占用 86%

静音区 A 48 座
98%

近满座 / 仅余 1 个位置

窗边单人座 28 座
93%

紧张 / 空余 2 座

沙发阅读区 20 座
60%

适中 / 空余 8 座

键盘区 36 座
86%

紧张 / 空余 5 座

独立包间 12 间
75%

偏满 / 空余 3 间

讨论室 3 间
33%

空闲 / 2 间可用

平面色块与百分比同源, 数值直标即色盲替代通道; 悬停任一区域可看完整详情。

04落地要点

  • 色阶分级明确 六级阈值 20 / 40 / 60 / 75 / 90, 分级图例常驻视口
  • 连续映射可读 渐变图例给出 0% 至 100% 的连续取值范围, 冷暖方向固定
  • 悬停即数 日历每格 title 提示完整日期与当日占用率
  • 色盲替代通道 矩阵与区域全部直标数值, 不依赖颜色单通道读取
  • 渲染性能 365 格上下使用纯 CSS grid; 万级数据量建议切换 canvas 渲染
  • 语义一致 同一套蓝到红色阶贯穿日历、矩阵与平面, 学习成本为零

05风格 tokens

#0080FF / 主色 #FF0000 / 热端 #ff7f00 / 强调 #F8FAFC / 底色 #0F172A / 文字
  • 圆角 / 10px, 热力小格 3px
  • 标题字体 / Orbitron
  • 正文字体 / JetBrains Mono
  • 中文回退 / 微软雅黑
  • 色阶 / 蓝 空闲 到 红 满座, 六级离散
  • 热端微调 / 纯红压文字时深化为 #E01B24