Generate Echarts Charts From Data

---
name: generate-echarts-charts-from-data
description: "Generate charts from natural language or tabular data, recommend chart types, and export ECharts-based HTML or SVG. Use when users ask for one-sentence chart generation, auto chart selection from data, or embeddable chart previews."
category: "Web & Scraping"
author: community
version: "0.1.1"
icon: globe
---

# ECharts Chart Skill

Use this skill when the user wants chart output from a short description or from table-like data.

## Workflow

1. Translate the user's request into a `ChartRequest` JSON object.
2. If the chart type is unclear, run the recommendation command first.
3. Run the generation command to produce a stable ECharts option.
4. Run the render command when the user wants an embeddable `html` or `svg`.

## Files

- Core types: `src/types/chart.ts`
- Chart recommendation: `src/core/recommend.ts`
- Option generation: `src/core/spec-to-option.ts`
- Rendering: `src/core/render.ts`
- Sample input: `examples/study-progress.request.json`
- Universal metadata: `manifest.yaml`, `agents/openai.yaml`

## Setup

```powershell
npm install
```

## Output rules

- `--out` writes to an exact file path.
- `--out-dir` writes the default file into a directory you choose.
- `desktop` and `home` are valid aliases for `--out-dir` when the user explicitly asks for those locations.
- `~` is expanded to the current user's home directory.
- If no output path is provided, files default to the current working directory.

## Commands

```powershell
node dist/cli/recommend-chart.js --input examples\study-progress.request.json
node dist/cli/generate-chart.js --input examples\study-progress.request.json
node dist/cli/render-chart.js --input option.json --format html
node dist/cli/render-chart.js --input option.json --format svg --out D:\reports\study-chart.svg
```

Default output filenames:

- Recommendation: `spec.json`
- Option: `option.json`
- HTML preview: `preview.html`
- SVG preview: `preview.svg`

## `ChartRequest` shape

```json
{
  "title": "Monthly study completion",
  "dataset": [
    { "day": "2026-03-01", "completionRate": 62, "targetRate": 75 },
    { "day": "2026-03-02", "completionRate": 68, "targetRate": 75 }
  ],
  "goal": "trend",
  "xField": "day",
  "yField": "completionRate",
  "series": [
    { "name": "Completion", "field": "completionRate" },
    { "name": "Target", "field": "targetRate" }
  ]
}
```

## Guidance

- Prefer deterministic field mapping over free-form inference when the user has already named fields.
- For pie charts, keep one category field and one metric field.
- For scatter charts, require numeric `xField` and `yField`.
- If the user only gave natural language, construct the smallest valid `ChartRequest` before calling scripts.
- If the user needs a report artifact, render `html` first and `svg` second.