bi-dashboard-generation

根据分析产出的数据，构建交互式 HTML 看板。Agent 拥有完全的设计自由度——自主决定布局结构、可视化类型、筛选器位置——只需遵循 references/theme.md 中的主题规范确保视觉一致性。

交付物为单个可离线打开的 HTML 文件。

核心原则

• 摘要优先：默认视图在读者交互前就能回答核心问题
• 图表主导：用最简单的图表回答读者的问题，表格用于查阅而非主要叙事
• 灵活筛选：筛选器可以出现在任何合适的位置（顶部、侧边、卡片内、表格内），按需添加

前置检查

• 分析主题明确，核心问题已定义
• 数据文件（CSV）已生成且可访问
• 明确看板的受众和主要用途（状态监控 / 运营回顾 / 分析探索）

参考 resources/demo.html 了解完整看板的产出样式。

执行步骤

1：定义看板简报

1. 受众与目标：谁看这个看板？需要监控、理解还是行动于什么？
2. 核心问题：默认视图应回答什么问题？
3. 指标范围：需要展示哪些指标？考虑覆盖面：
   • 规模（用户量、访问量）、价值（收入、转化率）、质量（成功率、时延）
   • 变动（趋势、环比）、构成（占比、分布）、漏斗（步骤转化）
4. 筛选维度：读者可能按哪些维度探索？
5. 看板标题

2：数据准备

1. 列出所有需要展示的数据文件及其完整路径
2. 逐文件读取，确认字段、行数、维度
3. 保留文件路径，后续步骤用于数据来源标注

3：设计信息层级与布局

基于实际数据内容，从摘要到细节分层，具体布局完全自由：

• 英雄指标：最核心的 KPI，直接回答"现在怎么样"
• 趋势/变动：核心指标的时间走势
• 诊断/拆解：按维度下钻，回答"为什么"
• 明细：详细数据，支持查阅

筛选器设计：

• 只在能实质更新视图时才添加
• 位置不限——可以在顶部全局、在卡片内局部、甚至嵌入表格
• 少量高价值筛选器优于密集面板

4：选择可视化类型

根据数据要回答的问题选择最合适的图表：

问题类型	推荐可视化
当前状态	KPI 卡片
趋势变化	折线图
各部分占比	饼图/环形图
排名对比	条形图
转化流失	漏斗图
逐行细节	表格
两变量关系	散点图

原则：用最简单的图表回答问题；一份数据只用一种展示形式。

5：构建 HTML 看板

直接输出完整的 HTML 文件，遵循 references/theme.md 中的主题规范：

1. 引入基础资源（Tailwind CSS、ECharts、Bootstrap Icons）
2. 将 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>
   

3. 使用主题规范中的组件模式构建页面
4. 编写筛选器联动的 JS 逻辑
5. 保存为单个 HTML 文件

6：自检

• 默认视图在交互前回答核心问题
• 图表类型与数据特征匹配
• 筛选器正常工作，筛选后无数据时有空状态提示
• 所有数字来自数据文件，不得编造
• 每个展示区域底部有数据来源链接，且为可点击的 <a href> 指向实际文件路径
• HTML 可离线打开，无外部运行时依赖（CDN 资源除外）