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