# Bi Dashboard Generation

> 将 BI 数据分析结果构建为可筛选的交互式 HTML 看板。触发条件：① 用户显式要求「给我看板」时无条件触发；② 取数结果满足以下任一时自动触发——结果集行数>10行、存在可筛选维度（产品线/地域/时间粒度等）、涉及多张表数据、时序跨度长。

- Skill: `agentscope-ai/bi-dashboard-generation` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add agentscope-ai/bi-dashboard-generation`
- Raw SKILL.md: https://api.skillmd.com/api/skills/agentscope-ai/bi-dashboard-generation/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: agentscope-ai (https://skillmd.com/u/agentscope-ai)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/agentscope-ai/bi-dashboard-generation

---

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