Html Dashboard Kit
Overview
提供一套可复用的单文件 HTML 仪表盘模板，帮助用户把结构化数据（JSON / CSV 提取结果）快速转化为 iOS 27 玻璃风（Liquid Glass）、移动端友好的可视化页面。模板采用磨砂玻璃卡片 + 晨雾粉彩壁纸 + 动态光斑（drift）+ 流动光扫（sheen）动效，并内置 明亮 / 夜览 双主题一键切换（localStorage 记忆）。所有 LOGO 与小图标均为矢量 SVG，KPI 图标由数据 ic 字段驱动。模板默认内嵌 ECharts 5.4.3（CDN 三级兜底），数据以 JSON 注入，无需任何构建步骤，双击即可在任意浏览器或手机打开。
When to use
- 用户要求"做个仪表盘 / 数据看板 / 业务驾驶舱 / HTML 报表"
- 用户要求把一批数据"可视化成网页"且需要便于分享（单文件、可邮件/IM 直接发送）
- 用户要求产出可在 iPhone 上正常浏览的报表（viewport 友好、禁缩放）
- 对比场景：需要可编辑 PPT 用
ppt-implement；需要交互式数据分析用 Python 图表库
模板选型决策表
| 你想画什么 | 用哪个模板 | 数据形态 |
|---|---|---|
| 趋势（柱 + 折线双轴） | dashboard-template.html |
类别 + 多指标 |
| 占比 / 构成 | dashboard-pie.html |
名称 + 数值 |
| 转化链路 | dashboard-funnel.html |
环节 + 数值 |
| 中国省级分布 | dashboard-map.html（在线）/ dashboard-map-offline.html（离线） |
省份全称 + 数值 |
| K线（股票） | dashboard-kline.html |
日期 + 开/收/低/高 |
| 时段 / 门店热力 | dashboard-heatmap.html |
矩阵 |
| 多维度对比 | dashboard-radar.html |
对象 + 多维度 |
| 达成率 / 完成度 | dashboard-gauge.html |
指标 + 值 + 上限 |
| 一页多图（浅色） | dashboard-multi.html |
多组 名称+数值 |
| 全屏大屏（深色） | dashboard-bigscreen.html |
多组（多 sheet） |
设计语言（iOS 27 玻璃风 / Liquid Glass）
所有模板统一采用 iOS 27 Liquid Glass 视觉语言，便于多模板组合成风格一致的报告：
- 磨砂玻璃卡片：
.glass类用backdrop-filter: blur() saturate()+ 半透明白底 + 内描边高光（::before折射描边）+ 流动光扫（::aftersheen 动画）。 - 晨雾粉彩壁纸：
body多层radial/linear-gradient（淡蓝/淡粉/淡青）+ 固定背景；底部.bg-blobs4 个模糊光斑以drift动画缓慢漂浮（multiply 混合，夜览转 screen），营造光影动感。 - 双主题变量体系：
:root（明亮）与[data-theme="dark"]（夜览）定义同一组--glass-*/--text/--brand变量，全站样式与图表配色均由此派生。 - 图表配色派生：
chartPalette()根据当前data-theme返回 ECharts 用色（轴/网格/折线/环形/涨跌/K线/热力/地图渐变等），切换主题后调用renderCharts()重绘，保证"图表与外壳同主题"。 - 矢量图标：内置
ICONS线性 SVG 库（8 枚），KPI 通过ic字段引用，无 emoji、无位图。 - 中国股市配色：K线
up=#e24b4a（红涨）/down=#1d9e75（绿跌），夜览下为亮红#ff7a8a/ 亮绿#5fe3a1。
> 调整样式前务必先读 references/dashboard-conventions.md 中的硬性约定（红涨绿跌、¥ 默认货币、≥1 亿用"亿"、<1 亿用"万"）。
从 Excel / CSV 一键生成数据
数据在 xlsx / CSV 里？用 scripts/xlsx_to_dashboard.py 直接转成对应模板的 DASHBOARD_DATA（零手抄、不伪造）：
python scripts/xlsx_to_dashboard.py 数据.xlsx --template pie --out pie_data.js
支持 pie / funnel / map / trend / gauge / radar / heatmap / kline / multi / bigscreen。各模板的示例见 examples/（直接试跑）。脚本内 --help 有完整参数说明。
Quick Start
- 复制
assets/dashboard-template.html作为起点。 - 修改
<title>与顶部标题、副标题文本。 - 替换
<script>中的DASHBOARD_DATAJSON：KPI 卡片数组 + 图表 series。 - 如需调整配色 / 数字格式 / 移动端规则，先读
references/dashboard-conventions.md。 - 直接在浏览器打开预览；如数据来自本地文件，可用
python3 -m http.server起本地服务。
Dashboard conventions
详细设计规范（配色、字体、数字格式、移动端、中国股市涨跌色、货币符号）见 references/dashboard-conventions.md。编写或调整模板时严格遵守其中的硬性约定（如红涨绿跌、¥ 默认货币、≥1 亿用"亿"、<1 亿用"万"）。
Customization
- 数据注入：所有数值来自
DASHBOARD_DATA，禁止在 HTML 中手写静态数字占位——保持"数据驱动"结构，便于后续脚本化替换与复核。 - 图表类型：默认柱状 + 折线组合（双 Y 轴）。换成饼 / 纯线 / 散点只需改
option与 series。 - 主题切换（明亮 / 夜览）：页面底部有「明亮 / 夜览」悬浮按钮，点击即切换
<html data-theme="light|dark">并记忆到 localStorage；图表配色由chartPalette()随主题派生后renderCharts()重绘，不会"假深色"。默认dashboard-bigscreen.html为夜览（适配投屏）。 - 矢量图标：KPI 卡片通过数据项的
ic字段引用内置ICONS矢量库（revenue/orders/convert/store/tag/users/trend/cart），自动渲染线性 SVG；无ic字段则只显示文字，向后兼容。 - 数字自动格式化：KPI 数值传入原始数字即可，
fmt()会按约定自动转亿 / 万（≥1 亿用"亿"、≥1 万用"万"）；图表 series 的值请保持图表自身单位。 - CDN 兜底：ECharts 默认引 jsdelivr，已加
onerror顺序回退到 npmmirror / bootcdn，国内打开更稳；离线场景用dashboard-map-offline.html（边界已内嵌）。 - 绝对禁止：伪造数据、用占位符数字冒充真实值。
Resources
assets/dashboard-template.html— 主模板：KPI 卡片 + 柱状/折线组合图，复制即用。assets/dashboard-pie.html— 饼 / 环形占比图（品类、渠道占比等）。assets/dashboard-funnel.html— 转化漏斗图（访问 → 加购 → 下单 → 支付等链路）。assets/dashboard-map.html— 中国省级地图分布（在线取 geoJSON；省名须全称匹配）。assets/dashboard-kline.html— K线图，红涨绿跌（中国股市配色）。assets/dashboard-heatmap.html— 热力图（门店 × 时段 / 维度 × 指标分布）。assets/dashboard-multi.html— 组合大屏（KPI + 一页多图）。assets/dashboard-radar.html— 雷达图（多维度对比，如各门店综合能力）。assets/dashboard-gauge.html— 仪表盘（达成率 / 完成度等指标）。assets/dashboard-map-offline.html— 中国省级地图（geoJSON 已内嵌，彻底免联网）。assets/dashboard-bigscreen.html— 深色全屏数据大屏（KPI + 趋势/饼/漏斗/排行/分布多图，带实时时钟，适配投屏）。assets/cover.svg— skillhub 封面图。assets/skillhub-desc.md— 上传市场用的简介与亮点文案。assets/previews/— 各模板预览缩略图（skillhub 展示用）。scripts/xlsx_to_dashboard.py— Excel / CSV → DASHBOARD_DATA 转换助手（依赖openpyxl）。examples/— 各模板示例 xlsx（sample / sample_multi / sample_bigscreen），可直接试跑。references/dashboard-conventions.md— 仪表盘设计硬约定，调整样式前必读。
