数据可视化专家

技能文档

---
name: data-visualization-cn
title: 数据可视化专家
category: 开发工具
description: 将数据转化为清晰、美观且富有洞察力的可视化图表。支持从数据解读、图表选型、视觉设计到代码实现的全流程指导。当用户需要做数据可视化、生成图表、设计数据看板或优化数据展示效果时使用。触发词：数据可视化、图表、数据展示、Dashboard、数据看板、统计图。
---

# 数据可视化专家

数据可视化的目标不是"画漂亮的图"，而是让数据说话——帮助读者快速理解数据背后的故事、发现规律和做出决策。

---

## 何时使用本技能

当用户有以下需求时触发：
- 选择合适的图表类型展示数据
- 设计数据看板或Dashboard
- 优化现有图表的可读性
- 用代码实现数据可视化（Python/ECharts/D3.js）
- 进行数据故事的叙事设计
- 选择配色方案和视觉编码

---

## 核心工作流

### 第一步：数据理解

在画图之前，先搞清楚三件事：

1. **数据是什么**：数据类型（定量/定性）、维度、度量
2. **要表达什么**：比较、趋势、分布、关系、组成
3. **给谁看**：决策层（要结论）、分析师（要细节）、公众（要直觉）

### 第二步：图表选型

**图表选择决策树：**

```
你想表达什么？
│
├── 比较
│   ├── 不同类别之间 → 柱状图/条形图
│   ├── 随时间变化 → 折线图/面积图
│   └── 多个维度 → 雷达图/平行坐标
│
├── 趋势
│   ├── 单一指标 → 折线图
│   ├── 多个指标 → 多折线/堆叠面积图
│   └── 分布变化 → 小多图(Small Multiples)
│
├── 分布
│   ├── 单变量 → 直方图/箱线图/小提琴图
│   └── 两变量 → 散点图/气泡图
│
├── 关系
│   ├── 两变量相关 → 散点图
│   ├── 多变量关系 → 相关矩阵/网络图
│   └── 层级关系 → 树图/Treemap
│
├── 组成
│   ├── 静态组成 → 饼图/环形图/堆叠柱状图
│   └── 动态组成 → 堆叠面积图/河流图
│
└── 地理
    ├── 区域分布 → 热力地图/分级统计图
    └── 路径流向 → 流向地图/弧线图
```

### 第三步：视觉编码

**视觉通道优先级（按感知精度排序）：**

| 优先级 | 视觉通道 | 适用场景 |
|--------|---------|---------|
| 1 | 位置 | 散点图、柱状图 |
| 2 | 长度 | 条形图 |
| 3 | 角度/方向 | 饼图、折线斜率 |
| 4 | 面积 | 气泡图、Treemap |
| 5 | 颜色（色相） | 分类区分 |
| 6 | 颜色（亮度） | 数值大小 |
| 7 | 密度/纹理 | 辅助区分 |

**配色方案指南：**

| 数据类型 | 配色策略 | 推荐色板 |
|---------|---------|---------|
| 分类（≤6类） | 色相区分 | Tableau 10 / Set2 |
| 分类（>6类） | 色相+形状 | 自定义高区分度色板 |
| 顺序/等级 | 单色渐变 | 浅→深单色系 |
| 发散（有零点） | 双色渐变 | 红←白→蓝 |
| 热力图 | 连续渐变 | Viridis / Plasma |

**配色禁忌：**
- 不要用红绿搭配（色盲不友好）
- 不要超过7种颜色（认知超载）
- 不要用纯色系做面积编码（感知非线性）
- 背景不要用深色（打印不友好）

### 第四步：图表优化

**图表清理清单：**
- [ ] 移除不必要的网格线
- [ ] 简化坐标轴标签
- [ ] 数据标签只在关键点标注
- [ ] 图例位置不遮挡数据
- [ ] 标题直接表达结论（不是"XX数据"而是"XX增长了30%"）
- [ ] 起始值合理（柱状图从0开始）

**标注策略：**
- 关键数据点直接标注数值
- 异常值用注释说明原因
- 趋势线标注斜率或增长率
- 参考线标注目标值或平均值

### 第五步：Dashboard设计

**Dashboard布局原则：**

```
┌─────────────────────────────────────────┐
│  核心指标卡片区（3-5个KPI）              │
├────────────────────────┬────────────────┤
│                        │                │
│   主图表区              │   辅助图表区    │
│   （趋势/对比）         │   （分布/明细）  │
│                        │                │
├────────────────────────┴────────────────┤
│  数据表格 / 详细数据区                    │
└─────────────────────────────────────────┘
```

**设计原则：**
1. **5秒法则**：核心信息5秒内可获取
2. **Z型阅读**：重要信息沿Z型路径排列
3. **渐进式披露**：概览→细节→更多
4. **一致性**：同Dashboard内图表风格统一

---

## 代码实现参考

### Python (Matplotlib/Seaborn)
```python
# 基础设置
import matplotlib.pyplot as plt
import seaborn as sns

plt.rcParams['font.sans-serif'] = ['SimHei']  # 中文显示
plt.rcParams['axes.unicode_minus'] = False

# 推荐样式
sns.set_theme(style="whitegrid", palette="muted")
```

### ECharts 配置要点
```javascript
option = {
  title: { text: '直接表达结论' },
  tooltip: { trigger: 'axis' },
  legend: { bottom: 0 },
  grid: { left: '3%', right: '4%', containLabel: true },
  xAxis: { type: 'category' },
  yAxis: { type: 'value' },
  series: []
};
```

---

## 常见反模式

| 反模式 | 问题 | 改进方案 |
|--------|------|---------|
| 3D饼图 | 透视变形，难以比较 | 用2D条形图替代 |
| 双Y轴 | 暗示虚假因果 | 拆成两个图 |
| 截断Y轴 | 夸大差异 | 从0开始或标注截断 |
| 过多颜色 | 无法区分 | 减少类别或分组 |
| 装饰性图表 | 分散注意力 | 简化，聚焦数据 |
| 表格+图表重复 | 信息冗余 | 选一种，互补呈现 |

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。