| name | bi-dashboard-generation |
| description | 将 BI 数据分析结果构建为可筛选的交互式 HTML 看板。触发条件:① 用户显式要求「给我看板」时无条件触发;② 取数结果满足以下任一时自动触发——结果集行数>10行、存在可筛选维度(产品线/地域/时间粒度等)、涉及多张表数据、时序跨度长。 |
bi-dashboard-generation
根据分析产出的数据,构建交互式 HTML 看板。Agent 拥有完全的设计自由度——自主决定布局结构、可视化类型、筛选器位置——只需遵循 references/theme.md 中的主题规范确保视觉一致性。
交付物为单个可离线打开的 HTML 文件。
核心原则
- 摘要优先:默认视图在读者交互前就能回答核心问题
- 图表主导:用最简单的图表回答读者的问题,表格用于查阅而非主要叙事
- 灵活筛选:筛选器可以出现在任何合适的位置(顶部、侧边、卡片内、表格内),按需添加
前置检查
- 分析主题明确,核心问题已定义
- 数据文件(CSV)已生成且可访问
- 明确看板的受众和主要用途(状态监控 / 运营回顾 / 分析探索)
参考 resources/demo.html 了解完整看板的产出样式。
执行步骤
1:定义看板简报
- 受众与目标:谁看这个看板?需要监控、理解还是行动于什么?
- 核心问题:默认视图应回答什么问题?
- 指标范围:需要展示哪些指标?考虑覆盖面:
- 规模(用户量、访问量)、价值(收入、转化率)、质量(成功率、时延)
- 变动(趋势、环比)、构成(占比、分布)、漏斗(步骤转化)
- 筛选维度:读者可能按哪些维度探索?
- 看板标题
2:数据准备
- 列出所有需要展示的数据文件及其完整路径
- 逐文件读取,确认字段、行数、维度
- 保留文件路径,后续步骤用于数据来源标注
3:设计信息层级与布局
基于实际数据内容,从摘要到细节分层,具体布局完全自由:
- 英雄指标:最核心的 KPI,直接回答"现在怎么样"
- 趋势/变动:核心指标的时间走势
- 诊断/拆解:按维度下钻,回答"为什么"
- 明细:详细数据,支持查阅
筛选器设计:
- 只在能实质更新视图时才添加
- 位置不限——可以在顶部全局、在卡片内局部、甚至嵌入表格
- 少量高价值筛选器优于密集面板
4:选择可视化类型
根据数据要回答的问题选择最合适的图表:
| 问题类型 | 推荐可视化 |
|---|
| 当前状态 | KPI 卡片 |
| 趋势变化 | 折线图 |
| 各部分占比 | 饼图/环形图 |
| 排名对比 | 条形图 |
| 转化流失 | 漏斗图 |
| 逐行细节 | 表格 |
| 两变量关系 | 散点图 |
原则:用最简单的图表回答问题;一份数据只用一种展示形式。
5:构建 HTML 看板
直接输出完整的 HTML 文件,遵循 references/theme.md 中的主题规范:
- 引入基础资源(Tailwind CSS、ECharts、Bootstrap Icons)
- 将 CSV 数据转为 JSON 变量嵌入 HTML,供 ECharts 渲染使用;每份数据在对应卡片底部标注来源链接:
<p class="text-xs text-gray-400 mt-2">数据来源:<a href="path/to/filename.csv" class="hover:underline text-blue-400" target="_blank">filename.csv</a></p>
- 使用主题规范中的组件模式构建页面
- 编写筛选器联动的 JS 逻辑
- 保存为单个 HTML 文件
6:自检