echarts-chart-skill

name	echarts-chart-skill
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.
metadata	{"short-description":"Skill-first ECharts toolkit for agent chart workflows","openclaw":{"slug":"echarts-ai-skill","version":"0.1.4","license":"MIT","homepage":"https://github.com/davaded/Echarts-AI-Skill","repository":"https://github.com/davaded/Echarts-AI-Skill"}}

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

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

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

{
  "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.

open-db-studio Integration Output Rules

When using this skill inside open-db-studio, output the final ECharts option as a chart code block:

{
  "title": { "text": "Chart Title" },
  "xAxis": { "type": "category", "data": ["A", "B", "C"] },
  "yAxis": { "type": "value" },
  "series": [{ "type": "bar", "data": [120, 200, 150] }]
}

Rules:

• Always use the ```chart marker — do not use ```json or ```javascript
• Content must be valid JSON (double-quoted strings, no trailing commas, no comments)
• The series array must exist with at least one element; the type field is required
• Use actual user data for chart titles, axis labels, etc. — do not use placeholders
• The color palette is provided automatically by the theme; do not manually specify a color field in the option

Supported chart types (series[0].type): line | bar | pie | scatter | radar | funnel | gauge | heatmap | treemap | candlestick | boxplot | sankey | graph