ECharts 图表技能

工作流

分析用户提供的数据和需求，选择合适的图表类型（参考 references/chart-design.md）
构造合法的 ECharts option JSON，写入本地 option.json
根据用户需要的格式执行渲染命令
返回输出文件路径给用户

首次准备（生成 `lib/`）

在第一次执行下方渲染命令之前，须在 skill 根目录运行一次（需联网拉取依赖，完成后 skill 内不需要长期保留 node_modules）：

cd <skill根目录>
node scripts/bundle-deps.js

成功后会出现 lib/（含 echarts.cjs、resvg.wasm、resvg.js 等）。若用户环境中已有 lib/ 则可跳过此步。

命令

# PNG 输出（推荐，可在 OpenClaw 等宿主中直接预览）
node src/render.js --input option.json --format png --out chart.png

# HTML 输出（可交互，在浏览器中打开）
node src/render.js --input option.json --format html --out chart.html

# SVG 输出（矢量，仅需 lib/echarts.cjs；聊天窗口通常无法内嵌预览）
node src/render.js --input option.json --format svg --out chart.svg

# 指定尺寸
node src/render.js --input option.json --format png --width 1200 --height 800 --out chart.png

# 高清输出（scale=3，适合大屏展示或导出印刷品）
node src/render.js --input option.json --format png --scale 3 --out chart-hd.png

# 输出到桌面
node src/render.js --input option.json --format png --out-dir desktop

默认输出文件名：

PNG → chart.png（当前目录）
HTML → chart.html（当前目录）
SVG → chart.svg（当前目录）

参数说明：

参数	默认值	说明
`--format`	`png`	`png` / `html` / `svg`。`svg` 为矢量，仅需 `lib/echarts.cjs`，忽略 `--scale`
`--width`	`800`	逻辑宽度（像素）
`--height`	`600`	逻辑高度（像素）
`--scale`	`2`	仅 PNG 有效：实际宽 ≈ width × scale。`svg` / `html` 忽略此项
`--out`	当前目录	输出文件完整路径
`--out-dir`	—	输出目录，文件名自动生成

--out-dir 别名：desktop（桌面）、home（用户主目录）、~（用户主目录）

Option 编写规范

必须是纯 JSON

{
  "title": { "text": "销售趋势" },
  "xAxis": { "type": "category", "data": ["1月", "2月", "3月"] },
  "yAxis": { "type": "value" },
  "series": [{ "type": "line", "data": [100, 200, 150] }]
}

禁止在 option 中使用函数（formatter: function(){...}），只能用纯 JSON 值。

笛卡尔坐标系图表必须有轴

bar、line、scatter 类型的 series 必须同时包含 xAxis 和 yAxis。

必须有 grid（防止标签截断）

"grid": { "left": "3%", "right": "4%", "bottom": "3%", "top": "15%", "containLabel": true }

多系列必须有 legend

"legend": { "top": "8%", "type": "scroll" }

tooltip 始终开启

"tooltip": { "trigger": "axis", "confine": true }

图表类型选择

详见 references/chart-design.md。

场景	图表类型
时间趋势	`line`（折线）/ 带 `areaStyle` 的面积图
分类对比	`bar`（柱状）
排名（标签长）	`bar` + 横向（xAxis/yAxis 对调）
占比构成	`pie`（`radius: ['40%','70%']` 为环形）
分布关系	`scatter`
多维对比	`radar`
仪表指标	`gauge`
层级数据	`treemap` / `sunburst`
流量转化	`funnel` / `sankey`

输出说明

格式	说明	何时使用
`png`	栅格图片，可直接在 OpenClaw 宿主中展示	默认选择，用于聊天窗口展示
`svg`	矢量图（XML），体积小、可无损缩放	设计稿、印刷、或需在浏览器/编辑器中二次编辑时
`html`	可交互 HTML，通过浏览器打开	需要用户自行操作图表时

配色方案

在 option 顶层用 color 字段指定，详见 references/chart-design.md。

"color": ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de"]

echarts-skill