ECharts

Build ECharts artifacts that are easy to preview, revise, export, and share in OpenClaw workspaces. Prefer saving actual files over leaving the chart design only in chat.

Workflow

1. 1. If the user already has an ECharts option object, refine it and run page.
2. If the user has structured data in CSV, TSV, or JSON, run table.
3. If the user only has a small inline list, run sample.
4. If the user needs a static image, either add --export-image png|svg during build or run node {baseDir}/scripts/render-image.mjs --input <artifact-dir> --type png|svg afterward.

INLINECODE5 can be used anywhere below where node appears.

Quick Start

Quick line or bar chart from inline data:

CODEBLOCK0

Generate a chart from a CSV, TSV, or JSON table:

CODEBLOCK1

Build and export a PNG in one step:

CODEBLOCK2

Build and export both PNG and SVG in one run:

CODEBLOCK3

Package an existing option file into a standalone preview page:

CODEBLOCK4

Lint an option file before handing it off:

CODEBLOCK5

Export a static image from a generated artifact directory:

CODEBLOCK6

中文示例

销售趋势折线图：

CODEBLOCK7

值班热力图：

CODEBLOCK8

渠道转化桑基图：

CODEBLOCK9

股票 K 线：

CODEBLOCK10

团队协作关系图：

CODEBLOCK11

多指标平行坐标：

CODEBLOCK12

日历热力图：

CODEBLOCK13

时间流带图：

CODEBLOCK14

瀑布变化图：

CODEBLOCK15

南北区极坐标柱状图：

CODEBLOCK16

玫瑰饼图：

CODEBLOCK17

Artifacts

The builder writes a stable file set:

• - chart.spec.json: normalized build request and mappings
• INLINECODE8: ECharts config kept as the source of truth
• INLINECODE9: normalized input rows when source data was provided
• INLINECODE10: standalone preview and export page
• INLINECODE11: small index of generated files and settings
• optional exported image such as <fileBase>.png or INLINECODE13

Keep chart.option.json even when the user only asked for a preview page. It is the easiest artifact to diff, review, and reuse later. Static image exports can be created on demand with scripts/render-image.mjs or directly during build with one or more --export-image flags, and default to <fileBase>.png or <fileBase>.svg inside the artifact directory. manifest.json keeps single-image compatibility in files.image, and records multi-format exports in files.images.

Input Modes

sample

Best for quick drafts from short lists.

• - bar, line, area, polarBar: use --categories plus one or more INLINECODE28
• INLINECODE29: use --categories plus one or more INLINECODE31
• INLINECODE32: use --labels plus INLINECODE34
• INLINECODE35: use --labels plus INLINECODE37
• INLINECODE38: use --labels plus INLINECODE40
• INLINECODE41: use --values, optional --labels, optional --maxes or shared INLINECODE45
• INLINECODE46: use --x-categories, --y-categories, and INLINECODE49
• INLINECODE50: use --categories and INLINECODE52
• INLINECODE53: use --dates and INLINECODE55
• INLINECODE56: use --dates plus one or more INLINECODE58
• INLINECODE59: use --categories and INLINECODE61
• INLINECODE62: use --categories and INLINECODE64
• INLINECODE65: use repeated --link Source>Target:Value or a single --links list
• INLINECODE68: use repeated --link Source>Target:Value, with optional repeated INLINECODE70
• INLINECODE71: use --labels, --values, and optional INLINECODE74
• INLINECODE75: use --dimensions MetricA,MetricB,... plus one or more INLINECODE77
• INLINECODE78: use --indicators plus one or more INLINECODE80
• INLINECODE81: use --labels, --values, and optional INLINECODE84
• INLINECODE85: use --labels, --values, and optional INLINECODE88

table

Best for real data files.

• - bar, line, area, polarBar: --x <field> and INLINECODE95
• INLINECODE96: --x <field> and INLINECODE98
• INLINECODE99: --label <field> and INLINECODE101
• INLINECODE102: --label <field> and INLINECODE104
• INLINECODE105: --label <field> and INLINECODE107
• INLINECODE108: --value <field> plus optional --label, --max-field, or shared INLINECODE112
• INLINECODE113: INLINECODE114
• INLINECODE115: INLINECODE116
• INLINECODE117: INLINECODE118
• INLINECODE119: INLINECODE120
• INLINECODE121: INLINECODE122
• INLINECODE123: INLINECODE124
• INLINECODE125: INLINECODE126
• INLINECODE127: --source <field> --target <field> plus optional --value, --source-group, --target-group, --source-size, INLINECODE133
• INLINECODE134: --label <field> --value <field> plus optional INLINECODE136
• INLINECODE137: INLINECODE138
• INLINECODE139: --x <field> --y <field> plus optional --series-field, --size-field, INLINECODE143
• INLINECODE144: INLINECODE145
• INLINECODE146: --label <field> --value <field> plus optional INLINECODE148
• INLINECODE149: --label <field> --value <field> plus optional INLINECODE151

page

Best when the option already exists and only needs a polished preview or export wrapper.

• - Accepts JSON option files
• Preserves the option as JSON and wraps it in the standalone HTML template
• Use --renderer svg when the final deliverable should stay vector-friendly

Export Guidance

• - Use --renderer svg for vector exports, design reviews, and docs-friendly embeds.
• Use --renderer canvas for crisp PNG output and heavier charts.
• Use --export-image png or --export-image svg during build.mjs for one-step image output.
• Repeat --export-image to export multiple formats in one run, for example --export-image png --export-image svg.
• Use node {baseDir}/scripts/render-image.mjs --input ./artifacts/chart-name --type png for direct PNG export.
• Use node {baseDir}/scripts/render-image.mjs --input ./artifacts/chart-name --type svg for direct SVG export from SVG-rendered pages.
• INLINECODE163 requires --renderer svg.
• When exporting multiple formats, --image-out must point to a directory or a path without an extension.
• INLINECODE166 auto-detects Chrome or Edge. If detection fails, pass --browser-executable <path> or set ECHARTS_BROWSER_PATH.
• INLINECODE169 still includes buttons for PNG download, SVG download when SVG renderer is active, JSON download, and clipboard copy.
• The generated page first tries the configured CDN and then common public mirrors. If the environment is fully offline, rerun with --cdn <url> pointing to a local or mirrored bundle.

Authoring Rules

• - Choose the simplest chart that answers the question. Do not default to dashboards when one chart is enough.
• Keep units in titles, axis names, or notes when the metric is ambiguous.
• Use references/chart-selection.md when deciding between bars, pictorial bars, polar bars, lines, pies, rose pies, scatters, heatmaps, calendars, theme rivers, waterfalls, funnels, gauges, treemaps, sunbursts, candlesticks, boxplots, sankeys, graphs, trees, parallels, and radar charts.
• Use references/option-patterns.md for JSON-safe option patterns such as data zoom, stacked series, donut layout, and mark lines.
• Prefer JSON-safe config over formatter functions when possible. If function-based formatting is unavoidable, treat chart.option.json as the base and edit chart.html intentionally afterward.

OpenClaw And ClawHub Norms

• - Write artifacts inside the current workspace, not into home-directory scratch paths.
• Keep examples, templates, and published artifacts generic. Sanitize client data before sharing anything on ClawHub.
• Do not hide key logic in chat-only prose. Save the option, page, and normalized data as files.
• Keep the skill reusable: data samples should be fake or clearly synthetic, and commands should use {baseDir} instead of machine-specific paths.

References

• - Read references/chart-selection.md for chart choice and data-shape guidance.
• Read references/option-patterns.md for advanced JSON-safe option patterns and cleanup rules.