数据图表制作效率提升

Before: 过去，制作复杂的数据图表需要手动在电子表格软件中调整参数，或编写冗长的代码，耗时且容易出错，难以保持图表风格一致性，尤其在处理多系列数据时效率低下。 After: 使用 Vega/Vega-Lite 后，只需通过结构化的 JSON 配置，就能快速生成专业且高度定制化的数据图表。图表样式统一，修改便捷，大幅缩短了从数据到可视化的时间。

vega — Vega/Vega-Lite 是一款强大的数据可视化工具，能帮助您通过简洁的

description SKILL.md

Vega / Vega-Lite Visualizer

Quick Start: Structure data as array of objects → Choose mark type (bar/line/point/area/arc/rect) → Map encodings (x, y, color, size) to fields → Set data types (quantitative/nominal/ordinal/temporal) → Wrap in ```vega-lite or ```vega fence. Always include $schema, use valid JSON with double quotes, field names are case-sensitive. Use Vega-Lite for 90% of charts; Vega only for radar, word cloud, force-directed.

Critical Syntax Rules

Rule 1: Always Include Schema

"$schema": "https://vega.github.io/schema/vega-lite/v5.json"

Rule 2: Valid JSON Only

❌ {field: "x",}     → Trailing comma, unquoted key
✅ {"field": "x"}    → Proper JSON

Rule 3: Field Names Must Match Data

❌ "field": "Category"  when data has "category"
✅ "field": "category"  → Case-sensitive match

Rule 4: Type Must Be Valid

✅ quantitative | nominal | ordinal | temporal
❌ numeric | string | date

Common Pitfalls

Issue	Solution
Chart not rendering	Check JSON validity, verify `$schema`
Data not showing	Field names must match exactly
Wrong chart type	Match mark to data structure
Colors not visible	Check color scale contrast
Dual-axis issues	Add `resolve: {scale: {y: "independent"}}`

Output Format

```vega-lite
{...}
```

Or for full Vega:

```vega
{...}
```

Related Files

For advanced chart patterns and complex visualizations, refer to references below:

examples.md — Stacked bar, grouped bar, multi-series line, area, heatmap, radar (Vega), word cloud (Vega), and interactive chart examples

vega

Before / After 效果对比