Bi Dashboard Generation

bi-dashboard-generation

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

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

核心原则

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

前置检查

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

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

执行步骤

1：定义看板简报

1. 受众与目标：谁看这个看板？需要监控、理解还是行动于什么？
2. 核心问题：默认视图应回答什么问题？
3. 指标范围：需要展示哪些指标？考虑覆盖面：

• 规模（用户量、访问量）、价值（收入、转化率）、质量（成功率、时延）
• 变动（趋势、环比）、构成（占比、分布）、漏斗（步骤转化）

1. 筛选维度：读者可能按哪些维度探索？
2. 看板标题

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 渲染使用；每份数据在对应卡片底部标注来源链接：

``html 数据来源：filename.csv ``

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

6：自检

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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: agentscope-ai
• Source: agentscope-ai/QwenPaw-Data
• License: Apache-2.0

Install and usage instructions live in the source repository linked above.