> ## Documentation Index
> Fetch the complete documentation index at: https://docs.newenergycoder.club/llms.txt
> Use this file to discover all available pages before exploring further.

# chart-visualization

> 把数据转成合适的图表与可渲染的图表规格。用户要可视化数据、选图、生成图表代码（Mermaid/Vega-Lite/Plotly/ECharts）或解释图表时调用。

| 项目 | 内容                                                                                                                                                                                                                                                                         |
| -- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 来源 | [skills/chart-visualization/SKILL.md](https://github.com/new-energy-coder-club/new_energy_coder_club/blob/Skill/skills/chart-visualization/SKILL.md)                                                                                                                       |
| 分类 | 前端 & 设计开发                                                                                                                                                                                                                                                                  |
| 安装 | 克隆 [Skill 分支](https://github.com/new-energy-coder-club/new_energy_coder_club/tree/Skill) 后，将 `skills/chart-visualization/` 目录复制到 `~/.claude/skills/`（Claude Code）、`~/.trae/skills/`（Trae IDE）或 `~/.qclaw/skills/`（QClaw/OpenClaw），详见 [Skill 安装方式](/community/skill-branch) |

# Chart Visualization

将表格/指标/时间序列等数据整理为可视化方案，并输出可直接使用的图表规格或代码片段。

## 何时调用

* 用户提供数据并说“画图/可视化/做图表/生成图/给我一个图表配置”
* 用户不确定用什么图：柱状/折线/散点/箱线/热力/雷达/桑基/瀑布等
* 需要把图表嵌入前端（ECharts/Plotly/Vega-Lite）或文档（Mermaid）

## 输入要求（尽量推断，缺失则用默认）

* 数据：表格或字段说明（x、y、分组、单位）
* 目标：想看趋势/对比/分布/相关性/构成/流向
* 约束：目标平台（Web/文档）、图表库偏好、是否交互

## 选图规则（快速决策）

* 趋势：折线/面积（时间序列）
* 对比：分组柱状/条形
* 分布：直方/箱线/小提琴
* 相关：散点（可加回归线）
* 构成：堆叠柱/面积；占比稳定才用饼图
* 流向：桑基
* 两维强度：热力图

## 输出（按用户场景选择其一）

* 图表建议：推荐图类型 + 轴/编码 + 注意事项
* 配置代码：优先输出 Vega-Lite 或 ECharts/Plotly 配置
* 数据清洗：必要的透视、分组聚合、缺失值策略

## 默认风格

* 标题与单位明确，轴刻度合理
* 颜色对比可读，避免过度装饰
* 解释口径：口径、时间范围、是否含税/含补贴等

## 示例提示

* “把这份 CSV 画成趋势图并输出 Vega-Lite spec。”
* “根据这些字段帮我选合适图表，并给 ECharts option。”
* “我想看不同品类的月度占比变化，用堆叠面积图输出配置。”