← Back to skills

extension

Category: Data & AnalyticsNo API key required

HTML报告模版专家

此技能用于快速生成自包含、移动端友好的商务 HTML 仪表盘（KPI 卡片 + 图表）。当用户要求"做/生成一个仪表盘""出一份数据看板/HTML 报表""把这些数据可视化成一个网页""做一个业务驾驶舱"等、且期望产出单文件 HTML（内嵌 ECharts 或 Chart.js、可直接在浏览器或手机打开、便于分发）时使用。

Html Dashboard Kit

Overview

提供一套可复用的单文件 HTML 仪表盘模板，帮助用户把结构化数据（JSON / CSV 提取结果）快速转化为商务风格、移动端友好的可视化页面。模板默认内嵌 ECharts 5.4.3（CDN），数据以 JSON 注入，无需任何构建步骤，双击即可在任意浏览器或手机打开。

When to use

用户要求"做个仪表盘 / 数据看板 / 业务驾驶舱 / HTML 报表"
用户要求把一批数据"可视化成网页"且需要便于分享（单文件、可邮件/IM 直接发送）
用户要求产出可在 iPhone 上正常浏览的报表（viewport 友好、禁缩放）
对比场景：需要可编辑 PPT 用 ppt-implement；需要交互式数据分析用 Python 图表库

Quick Start

复制 assets/dashboard-template.html 作为起点。
修改 <title> 与顶部标题、副标题文本。
替换 <script> 中的 DASHBOARD_DATA JSON：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。
风格切换：模板含 .theme-dark 备用类，在 <body> 加 class="theme-dark" 即可切换深色商务风。
绝对禁止：伪造数据、用占位符数字冒充真实值。

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 — 上传市场用的简介与亮点文案。
references/dashboard-conventions.md — 仪表盘设计硬约定，调整样式前必读。