# Data Visualization

> 数据可视化和仪表盘设计时使用。适用于图表选型、仪表盘布局、BI 工具使用。

- Skill: `zhaoxuya520/data-visualization` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add zhaoxuya520/data-visualization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zhaoxuya520/data-visualization/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: zhaoxuya520 (https://skillmd.com/u/zhaoxuya520)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/zhaoxuya520/data-visualization

---


# 数据可视化（Data Visualization）

## 适用场景

- 业务仪表盘设计
- 图表选型
- 报告配图
- 实时监控面板

## 核心原则

```text
1. 图表服务于问题
   先有问题再选图表

2. 简洁优先
   不要 3D / 彩虹色 / 动画

3. 受众决定复杂度
   管理层看 KPI 大数字
   分析师看明细交互

4. 对比是可视化之魂
   同比 / 环比 / 基线 / 目标线
```

## 图表选型

| 数据关系 | 推荐图表 |
|---|---|
| 趋势 | 折线图 |
| 对比 | 柱状图 |
| 占比 | 饼图（≤5 类）/ 堆叠柱状 |
| 分布 | 直方图 / 箱线图 |
| 相关 | 散点图 |
| 漏斗 | 漏斗图 |
| 排名 | 水平条形图 |
| 地理 | 地图 |

## 工具

| 工具 | 适合 |
|---|---|
| Metabase | 开源 / 自助 BI |
| Apache Superset | 开源 / 功能全 |
| Grafana | 运维 / 实时 |
| Looker | Google 企业 |
| Tableau | 商业智能标杆 |
| Power BI | 微软生态 |
| ECharts | 前端嵌入 |
| Recharts | React 简单图表 |

## 配套模板

- `templates/dashboard-template.md` — 仪表盘设计模板

## 质量自检

```text
□ 图表服务于问题
□ 选型合适
□ 简洁不花哨
□ 有对比基线
□ 有时间筛选
□ 受众匹配
□ 移动端可看
```

## 常见坑

1. **3D 饼图**——扭曲比例
2. **彩虹色**——无语义
3. **图表太多**——信息过载
4. **无基线**——看不出好坏
5. **指标无定义**——看不懂

## 与其他 skill 的协作

```text
上游：sql-analysis → 数据查询
下游：analysis-report → 配图
```