echarts

Create Apache ECharts option JSON, standalone HTML chart pages, and export-ready chart artifacts from CSV, TSV, JSON tables, or existing option configs. Use...

Security Scan

The skill's files, runtime instructions, and required binaries align with its stated purpose of building ECharts artifacts; there are no unexplained credential requests or hidden endpoints, but you should note dependency and runtime implications (Playwright/browser, CDN loading).

Purpose & Capability

Name/description match the included scripts and docs: the package contains build, lint, and render-image Node scripts to produce ECharts option JSON, standalone HTML preview pages, and PNG/SVG exports. The declared runtime requirement (node or bun) is appropriate.

Instruction Scope

SKILL.md explicitly instructs running the included node scripts (build, lint-option, render-image). The scripts read and write files under artifact directories and use a bootstrap JSON embedded in chart.html. render-image launches a headless browser via Playwright to render/export images and searches the filesystem and environment variables for a Chromium executable (uses PATH, ECHARTS_BROWSER_PATH, PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH, CHROME_PATH). These actions are coherent with image-export functionality but mean the skill will access local files and local browser executables and may load ECharts from the CDN URL (network).

Install Mechanism

There is no install spec (instruction-only), which is low-risk, but the included scripts import third-party modules (notably playwright-core). That implies the runtime environment must already have required npm dependencies installed; otherwise image export will fail. No remote download or obscure URL is used by the install process itself.

Credentials

The skill requests no credentials or config paths. It does read common environment variables (PATH, LOCALAPPDATA) and optional browser-path env vars (ECHARTS_BROWSER_PATH, PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH, CHROME_PATH) to locate a browser for rendering images — this is proportionate for the render-image feature and not a secret-exfiltration pattern.

Persistence & Privilege

always is false and the skill does not request persistent system privileges or modify other skills. It operates on files it is pointed at (artifact directories) and writes output there, which is normal for a builder/exporter tool.

Assessment

This skill appears to do what it says: build ECharts option JSON, preview pages, and image exports. Before installing or running it, note: (1) You need node (or bun) and the Node dependencies (the scripts import modules such as playwright-core) — there is no automatic installer included, so ensure dependencies are installed in a controlled environment. (2) The render-image flow uses Playwright to launch a local Chromium-based browser (it searches PATH and common install locations, and respects ECHARTS_BROWSER_PATH / PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH / CHROME_PATH). If you cannot or do not want the skill to launch local browsers, avoid using render-image or run only build/page modes. (3) Generated chart pages load ECharts from a CDN by default (configurable), so rendering may trigger network requests; if you must avoid external network requests, set a local CDN mirror or modify the template. (4) Review chart.option.json/chart.html for any sensitive data before sharing; bootstrap JSON is embedded in chart.html and is used by the renderer. Overall the skill is internally consistent and reasonable for its purpose.

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

bun can be used anywhere below where node appears.

Quick Start

Quick line or bar chart from inline data:

node {baseDir}/scripts/build.mjs sample --chart line --categories Jan,Feb,Mar,Apr --series Revenue:120,160,210,260 --series Profit:24,30,42,51 --title "Revenue and Profit" --subtitle "Sample series" --out ./artifacts/revenue-profit

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

node {baseDir}/scripts/build.mjs table --input ./data/sales.csv --chart bar --x month --y revenue,profit --title "Monthly sales" --page-mode report --out ./artifacts/monthly-sales

Build and export a PNG in one step:

node {baseDir}/scripts/build.mjs sample --chart line --categories Jan,Feb,Mar,Apr --series Revenue:120,160,210,260 --title "Quarterly trend" --renderer svg --export-image png --out ./artifacts/quarterly-trend

Build and export both PNG and SVG in one run:

node {baseDir}/scripts/build.mjs sample --chart line --categories Jan,Feb,Mar,Apr --series Revenue:120,160,210,260 --title "Quarterly trend" --renderer svg --export-image png --export-image svg --out ./artifacts/quarterly-trend-both

Package an existing option file into a standalone preview page:

node {baseDir}/scripts/build.mjs page --option ./option.json --renderer svg --theme paper --title "Release dashboard" --out ./artifacts/release-dashboard

Lint an option file before handing it off:

node {baseDir}/scripts/lint-option.mjs ./artifacts/release-dashboard/chart.option.json

Export a static image from a generated artifact directory:

node {baseDir}/scripts/render-image.mjs --input ./artifacts/monthly-sales --type png
node {baseDir}/scripts/render-image.mjs --input ./artifacts/release-dashboard --type svg

中文示例

销售趋势折线图：

node {baseDir}/scripts/build.mjs sample --chart line --categories 1月,2月,3月,4月 --series 销售额:120,168,210,256 --series 毛利:32,45,58,73 --title "月度销售趋势" --subtitle "示例数据" --out ./artifacts/zh-sales-line

值班热力图：

node {baseDir}/scripts/build.mjs sample --chart heatmap --x-categories 周一,周二,周三,周四,周五 --y-categories 上午,下午,晚上 --matrix '4,6,7,5,3;7,8,9,6,5;3,4,6,5,4' --title "客服值班热力图" --out ./artifacts/zh-heatmap

渠道转化桑基图：

node {baseDir}/scripts/build.mjs sample --chart sankey --link "广告>注册:380" --link "自然流量>注册:240" --link "注册>激活:410" --link "激活>付费:126" --title "渠道转化流向" --out ./artifacts/zh-sankey

股票 K 线：

node {baseDir}/scripts/build.mjs sample --chart candlestick --categories 周一,周二,周三,周四 --ohlc '12,15,11,16;15,14,13,17;14,18,13,19;18,17,16,20' --title "示例 K 线" --out ./artifacts/zh-candlestick

团队协作关系图：

node {baseDir}/scripts/build.mjs sample --chart graph --link "产品>设计:8" --link "产品>前端:12" --link "前端>后端:10" --link "后端>运维:6" --node "产品:30:业务" --node "设计:24:设计" --node "前端:28:研发" --node "后端:28:研发" --node "运维:22:平台" --title "团队协作网络" --out ./artifacts/zh-graph

多指标平行坐标：

node {baseDir}/scripts/build.mjs sample --chart parallel --dimensions 响应时间,稳定性,成本,易用性 --series 方案A:88,93,52,74 --series 方案B:72,85,66,91 --series 方案C:64,90,80,69 --title "方案对比" --out ./artifacts/zh-parallel

日历热力图：

node {baseDir}/scripts/build.mjs sample --chart calendar --dates 2026-03-01,2026-03-02,2026-03-03,2026-03-04,2026-03-05,2026-03-06,2026-03-07 --values 12,18,9,20,16,24,14 --title "周活跃日历" --out ./artifacts/zh-calendar

时间流带图：

node {baseDir}/scripts/build.mjs sample --chart themeRiver --dates 2026-03-01,2026-03-02,2026-03-03,2026-03-04 --series 广告:120,140,130,150 --series 自然流量:90,105,115,118 --series 转介绍:30,42,40,46 --title "渠道流量流带图" --out ./artifacts/zh-theme-river

瀑布变化图：

node {baseDir}/scripts/build.mjs sample --chart waterfall --categories 新签,退款,扩容,流失 --values 120,-30,45,-10 --title "净变化瀑布图" --out ./artifacts/zh-waterfall

南北区极坐标柱状图：

node {baseDir}/scripts/build.mjs sample --chart polarBar --categories 华北,华东,华南,西南 --series 营收:120,98,140,110 --title "区域营收极坐标图" --out ./artifacts/zh-polar-bar

玫瑰饼图：

node {baseDir}/scripts/build.mjs sample --chart rosePie --labels 搜索,直接访问,社交,邮件 --values 420,310,180,90 --title "渠道结构玫瑰图" --out ./artifacts/zh-rose-pie

Artifacts

The builder writes a stable file set:

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

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 --series Name:1,2,3
• pictorialBar: use --categories plus one or more --series Name:1,2,3
• pie: use --labels plus --values
• rosePie: use --labels plus --values
• funnel: use --labels plus --values
• gauge: use --values, optional --labels, optional --maxes or shared --max-value
• heatmap: use --x-categories, --y-categories, and --matrix
• waterfall: use --categories and --values
• calendar: use --dates and --values
• themeRiver: use --dates plus one or more --series Name:1,2,3
• candlestick: use --categories and --ohlc open,close,low,high;...
• boxplot: use --categories and --boxes low,q1,median,q3,high;...
• sankey: use repeated --link Source>Target:Value or a single --links list
• graph: use repeated --link Source>Target:Value, with optional repeated --node Name[:Size[:Group]]
• tree: use --labels, --values, and optional --parents
• parallel: use --dimensions MetricA,MetricB,... plus one or more --series Name:1,2,3
• radar: use --indicators plus one or more --series Name:1,2,3
• treemap: use --labels, --values, and optional --parents
• sunburst: use --labels, --values, and optional --parents

table

Best for real data files.

• bar, line, area, polarBar: --x <field> and --y field1,field2
• pictorialBar: --x <field> and --y field1,field2
• pie: --label <field> and --value <field>
• rosePie: --label <field> and --value <field>
• funnel: --label <field> and --value <field>
• gauge: --value <field> plus optional --label, --max-field, or shared --max-value
• heatmap: --x <field> --y <field> --value <field>
• waterfall: --x <field> --value <field>
• calendar: --date <field> --value <field>
• themeRiver: --date <field> --value <field> --series-field <field>
• candlestick: --x <field> --open <field> --close <field> --low <field> --high <field>
• boxplot: --x <field> --low <field> --q1 <field> --median <field> --q3 <field> --high <field>
• sankey: --source <field> --target <field> --value <field>
• graph: --source <field> --target <field> plus optional --value, --source-group, --target-group, --source-size, --target-size
• tree: --label <field> --value <field> plus optional --parent-field
• parallel: --name-field <field> --y metric1,metric2,metric3
• scatter: --x <field> --y <field> plus optional --series-field, --size-field, --label-field
• radar: --name-field <field> --y metric1,metric2,metric3
• treemap: --label <field> --value <field> plus optional --parent-field
• sunburst: --label <field> --value <field> plus optional --parent-field

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.
• --export-image svg requires --renderer svg.
• When exporting multiple formats, --image-out must point to a directory or a path without an extension.
• render-image.mjs auto-detects Chrome or Edge. If detection fails, pass --browser-executable <path> or set ECHARTS_BROWSER_PATH.
• chart.html 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.