浏览器

text2echart

在你明确请求后，将 CSV 或 JSON 数据转为 ECharts 图表。

它能做什么

text2echart 提供两条入口把结构化数据变成 ECharts 可视化：浏览器 GUI（text2echarts.html）支持实时预览、模板、主题切换以及 PNG/JPG/SVG 导出；Node.js CLI（cli.js）适合脚本化与批量生成。输入自动识别 CSV 与 JSON 格式，默认渲染器为 SVG。输出形式包括：交互式 HTML（CDN 模式约 1KB，加 --embed 后约 1MB 可离线运行）、通过 --svg-output 导出独立 SVG 文件、通过 --screenshot 导出 PNG（后两项需要 Playwright）。内置 6 种图表类型：柱状图、折线图、饼图、散点图、雷达图、词云（词云需先准备分词与词频数据）。提供 6 套主题：dark、infographic、macarons、roma、shine、vintage。该技能设置了 disable-model-invocation: true，只有在你使用 chart、graph、visualize、draw、wordcloud、图表、画图、可视化、图片、矢量图、词云等触发词后才会激活。CLI 仅依赖 Node.js 标准库，无需 npm install。

什么时候用它

用 `node cli.js data.csv --open` 把月度销售

技能文档

text2echart — Data to Chart

Invocation Model

text2echart is a chart-generation skill configured with safety-first invocation settings:

disable-model-invocation: true — The AI model will never automatically invoke this skill on its own. text2echart requires explicit user invocation — you must explicitly ask for a chart, graph, visualization, or use one of the trigger keywords before the skill is activated. This prevents the model from generating charts without your awareness, especially when sensitive data is involved.
user-invocable: true — You (the user) can explicitly invoke this skill at any time by using trigger keywords like chart, graph, visualize, plot, draw, wordcloud, 图表, 画图, 可视化, etc.

Why these settings matter: Chart generation can involve processing uploaded data files (CSV/JSON) and rendering executable HTML content. Requiring explicit user invocation ensures there is always a conscious human decision before data is processed into visualizations.

⚡ Routing

case when: user asks for a chart / graph / visualization (default):

Construct ECharts option JSON
Output HTML string directly, render with ```html code block
Support preview by opening in browser or screenshot

Default route — direct HTML generation in chat. Example prompt: "Give me a pie chart of browser market share — Chrome 65%, Safari 18%, Edge 8%, Firefox 5%, Other 4%" → The model outputs a complete HTML file with an interactive ECharts pie chart.

case when: user asks for an image / picture / vector graphic (图片/矢量图):

Use CLI with SVG output: node cli.js data.json --svg-output -o chart.svg
--svg-output extracts standalone .svg file (requires Playwright)
Add --embed to bundle ECharts lib for fully offline use
SVG is vector format — sharp at any resolution, ideal for documents
Also send PNG screenshot for instant preview

case when: user asks for a screenshot / snapshot (截图):

Use CLI with screenshot: node cli.js data.json --screenshot -o chart.png
This generates high-quality raster PNG via Playwright
If Playwright is not installed, falls back with clear error + install instructions

case when: user wants to fine-tune / adjust / modify the chart (微调/修改):

Open browser: node cli.js data.json --open
Or open the generated HTML directly for interactive editing

case when: user asks to save to file / run locally:

Use CLI: node cli.js data.json -o chart.html (CDN mode, ~1KB)
For offline use: add --embed (~1MB)
Can combine with --open or --screenshot

case when: user asks for word cloud (词云):

Need word frequency data first (分词 + 词频统计)
Generate ECharts wordcloud option JSON with type:'wordCloud'
Then follow image/vector or html/web route based on output format request
Point to text2echarts.html
Open in browser, use templates and export

Output Format

<!DOCTYPE html>...echarts CDN...

Overview

Generate ECharts SVG charts from JSON/CSV. Two entry points:

Web App: Open text2echarts.html in browser for interactive GUI with templates, live preview, theme switching, and PNG/JPG/SVG export.

CLI: node cli.js for scripted/batch generation.

When to Use / When Not to Use

Scenario	Use text2echart?
"Make a bar chart from this CSV"	✅ Best fit
"Visualize my sales data"	✅ Natural language input works
"Compare trends across months"	✅ Line chart, multi-series
"Show market share distribution"	✅ Pie chart with % labels
"I need an interactive chart dashboard"	⚠️ Open text2echarts.html instead
"Animate this chart frame by frame"	❌ ECharts not designed for animation frames
"Generate 100 charts in batch"	✅ Use CLI: `for f in *.csv; do node cli.js \$f; done`
"Real-time streaming data"	❌ Use ECharts live update API directly

Quick Start

# Web App — open interactive GUI
open text2echarts.html

# CLI — CSV → chart
node cli.js data.csv --open

# CLI — JSON → SVG
node cli.js chart.json -o report.html

Supported Inputs

Format	Example	Auto-detected
CSV	`Month,Sales\nJan,1200\nFeb,900`	✅ yes (comma in first line)
JSON	`{"series":[{"type":"bar","data":[30,80]}]}`	✅ yes (starts with `{`)
JSON (simple)	`{"type":"bar","data":[{"name":"A","value":30}]}`	✅ yes
Stdin pipe	`cat data.csv \| node cli.js -`	✅ use `-`

CLI Reference

node cli.js  [options]

Options:
  -o, --out    Output file name
  --type       Chart type for CSV: bar|line|pie|radar|wordcloud
  --theme      dark|infographic|macarons|roma|shine|vintage
  --width / --height Chart dimensions
  --svg              SVG renderer (default)
  --svg-output       Output standalone .svg file (needs Playwright)
  --screenshot       Output PNG screenshot (needs Playwright)
  --open             Open in browser after generation
  --cdn              Use CDN for ECharts lib (default)
  --embed            Embed ECharts lib for offline (~1MB)
  --slide            960x540 PPT slide mode

Chart Types

Type	CSV columns	Auto features
bar	col1=labels, col2+=values	Rounded corners, top labels
line	col1=labels, col2+=values	Smooth curves, area fill
pie	col1=name, col2=value	Donut chart, % labels
scatter	col1=x, col2=y	Bubble symbols
radar	col1=dimension, col2+=values	Polygon shape
wordcloud	col1=word, col2=frequency	Diamond shape

Themes

Theme	Style	Background
dark	Tech, deep blue	#1a1a2e
infographic	Clean report	#f5f5f5
macarons	Soft, business	#f5f5f5
vintage	Nostalgic	#f5f5f5
shine	Bright, vivid	#f5f5f5
roma	Professional	#f5f5f5

Few-Shot Examples

1. CSV → Bar Chart

User: "Chart these monthly sales"

Month,Sales
Jan,1200
Feb,900
Mar,1600

→ CLI auto-detects CSV, generates bar chart with labels, tooltips, rounded corners.

2. JSON → Pie with Percentages

{
  "series": [{
    "type": "pie",
    "radius": ["40%", "70%"],
    "data": [
      {"value": 48, "name": "Chrome"},
      {"value": 22, "name": "Firefox"},
      {"value": 18, "name": "Safari"}
    ],
    "label": {"formatter": "{b}\n{d}%"}
  }],
  "title": {"text": "Market Share"}
}

3. CSV → Multi-series Line

Date,Revenue,Cost
Jan,1200,800
Feb,1500,900
Mar,1800,1100

node cli.js data.csv --type line --theme dark --open

Architecture

Input (JSON/CSV)
  → cli.js parses & converts to ECharts option
  → Option JSON injected into HTML template
  → echarts.init(dom, theme, {renderer:"svg"})
  → Output: self-contained .html with CDN references (~1KB)
  → --embed flag: inline ECharts lib (~1MB, offline)
  → --screenshot flag: PNG via Playwright
  → --svg-output flag: standalone SVG via Playwright

Dependencies

CLI: Node.js only (stdlib, no npm packages)
Runtime: Internet for ECharts CDN (or --embed for offline)
Zero npm install required

References

File	Content
`prompt.md`	Prompt engineering guide: core pattern, chain-of-thought, 3 few-shot examples, 16 option references, end-user template
`references/echarts-option-reference.md`	Full ECharts option API (EN, from official site)
`references/echarts-option-zh.md`	Full ECharts option API (中文)
`references/echarts-wordcloud.md`	Wordcloud extension docs
`references/echarts-zh-title.md`	title 选项详细说明
`references/echarts-zh-grid.md`	grid 选项详细说明
`references/echarts-zh-xAxis.md`	xAxis 选项详细说明
`references/echarts-zh-yAxis.md`	yAxis 选项详细说明
`references/echarts-zh-series-bar.md`	series.bar 柱状图配置
`references/echarts-zh-series-line.md`	series.line 折线图配置
`references/echarts-zh-series-pie.md`	series.pie 饼图配置
`references/echarts-zh-series-scatter.md`	series.scatter 散点图
`references/echarts-zh-series-radar.md`	series.radar 雷达图
`references/echarts-zh-tooltip.md`	tooltip 提示框配置
`references/echarts-zh-legend.md`	legend 图例配置
`references/echarts-zh-color.md`	color 调色盘
`references/echarts-zh-label.md`	label 数据标签
`references/echarts-zh-emphasis.md`	emphasis 高亮状态
`references/echarts-zh-smooth.md`	smooth 平滑曲线
`references/echarts-zh-axisLabel.md`	axisLabel 坐标轴标签

Prompt Guide

For LLM-based chart generation, see prompt.md — a complete prompt engineering guide with:

Core prompt pattern for ECharts option generation
Chain-of-thought reasoning for chart type selection
3 Few-Shot examples (bar, pie, line)
16 detailed option references with JSON examples
Common mistakes checklist
Copyable end-user prompt template

Interactive Web App

For a full GUI experience, open text2echarts.html in your browser. Features: live preview, templates, theme switching, export PNG/JPG/SVG.

web/
├── text2echarts.html    # English (default, lang toggle)
├── app.js               # Core logic (i18n via JSON)
├── styles.css           # Shared styles
├── templates.js         # Chart templates (CN/EN)
└── lang/                # JSON language packs

Key ECharts Options Reference

Refer to these when constructing chart configurations. Official docs:

Option	What it does	Concrete example	Link
`title`	Chart title	`{"text":"Sales","left":"center","textStyle":{"fontSize":18}}`	→ docs
`grid`	Chart margins	`{"left":"3%","right":"4%","bottom":"10%","containLabel":true}` — `containLabel` prevents axis labels from being clipped	→ docs
`xAxis`	X axis	`{"type":"category","data":["Jan","Feb"],"axisLabel":{"rotate":45}}` — `type` must be `category` or `value`	→ docs
`yAxis`	Y axis	`{"type":"value","name":"Units"}` — add `name` for axis label text	→ docs
`series.type:'bar'`	Bar chart	`{"type":"bar","data":[30,80],"itemStyle":{"borderRadius":[4,4,0,0]},"label":{"show":true,"position":"top"}}`	→ docs
`series.type:'line'`	Line chart	`{"type":"line","data":[22,25,23],"smooth":true,"areaStyle":{"opacity":0.1},"lineStyle":{"width":3,"shadowBlur":10}}`	→ docs
`series.type:'pie'`	Pie/donut	`{"type":"pie","radius":["40%","70%"],"data":[{"value":48,"name":"A"}],"label":{"formatter":"{b}\
{d}%"},"emphasis":{"label":{"fontSize":16}}}`	→ docs
`series.type:'scatter'`	Scatter	`{"type":"scatter","data":[[160,55],[170,65]],"symbolSize":12}`	→ docs
`series.type:'radar'`	Radar	`{"type":"radar","data":[{"value":[90,75],"name":"Score"}]}` + `radar.indicator`	→ docs
`tooltip`	Hover info	`{"trigger":"axis"}` for bar/line (axis-level), `{"trigger":"item","formatter":"{b}:{c}"}` for pie	→ docs
`legend`	Series names	`{"data":["Sales","Profit"],"bottom":"0"}` — `data` must match series `name`	→ docs
`color`	Color palette	`["#5470c6","#91cc75","#fac858","#ee6666","#73c0de"]` — ECharts default 5-color palette	→ docs
`label`	Data labels	`{"show":true,"position":"top","formatter":"{c}","fontSize":14}` — `position`: top/inside/outside/bottom	→ docs
`emphasis`	Highlight state	`{"label":{"fontSize":16,"fontWeight":"bold"}}` — triggered on hover	→ docs
`smooth`	Curve lines	`true` for curved line chart, `false` (default) for polyline	→ docs
`itemStyle.borderRadius`	Rounded bars	`[4,4,0,0]` — top-left, top-right, bottom-right, bottom-left	→ docs
`axisLabel.rotate`	Rotate X labels	`45` degrees — useful when labels overlap (10+ categories)	→ docs

See also: references/echarts-option-reference.md (EN) and references/echarts-option-zh.md (CN)

Common Issues

Problem	Cause	Fix
Blank chart	CDN blocked or no internet	Use `--embed` flag for local libs (~1MB)
SVG not rendering	Old browser version	Chrome/Firefox 2020+ required
Wordcloud missing	Missing wordcloud extension	Included in `--embed` mode; CDN auto-loads
Chinese garbled	File saved in wrong encoding	Save as UTF-8; `--embed` embeds correct charset
CLI not found	Node.js not installed	Install from nodejs.org
Screenshot fails	Playwright not installed	`npm install playwright && npx playwright install chromium`, or use `--svg-output` for vector format

Verification

After generating a chart:

Open the .html file in a browser
Confirm chart canvas/SVG renders
Hover over data points — tooltip should appear
Resize browser — chart should adapt
Test with --theme to confirm theme switching

Other Advanced Capabilities

1. Multi-Pattern Generation

The model can generate multiple chart configurations in a single response — combining different chart types, color palettes, shapes, and styles all at once. For example, you can request a bar chart with 3 different themes, a word cloud with 5 shapes, or a side-by-side comparison of line vs bar for the same dataset — all produced in one go.

Bar Chart with multiple styles and palettes:

Prompt: "Give me a bar chart of monthly sales/profit, with buttons to switch between 6 styles (default, rounded, horizontal, stacked, dark, gradient) and 8 color palettes (default, warm, cool, pastel, vivid, forest, sunset, ocean)"

Word Cloud with multiple shapes and palettes:

Prompt: "Make a word cloud of AI/ML terms, with buttons to switch between 6 shapes (circle, heart, diamond, star, pentagon, triangle) and 8 color palettes"

2. Full ECharts Series Support

This skill documents the 6 most common chart types (bar, line, pie, scatter, radar, wordcloud), but the underlying LLM can theoretically generate any ECharts series type. The following chart types are supported by ECharts and can be generated by the model, though they are not explicitly documented in this skill — accuracy may be slightly lower for undocumented types, but modern LLMs handle them reliably:

Additional Series Types:

Candlestick — financial OHLC (Open-High-Low-Close) charts, also known as K-line charts
Boxplot — statistical distribution visualization with quartiles and outliers
Heatmap — matrix-based heatmap and calendar heatmap
Treemap — hierarchical data displayed as nested rectangles
Sunburst — multi-level radial hierarchy chart
Sankey — flow diagrams for energy, budget, traffic, etc.
Funnel — conversion funnel for marketing and sales analytics
Gauge — dashboard-style speedometer gauges
Graph — force-directed node-edge network graphs
Tree — tree diagrams (left-to-right, top-to-bottom, radial)
PictorialBar — bars rendered using SVG symbols or icons
ThemeRiver — streamgraph / ribbon-style time series
Lines — flight/migration path lines (typically used with maps)
EffectScatter — scatter plot with ripple animation effects
Map — geo-map charts with region shading

Additional Components & Extensions:

Parallel — parallel coordinates for multi-dimensional data
Custom — fully custom renderers via callback functions
dataZoom — interactive scrollable/zoomable axis (slider + inside)
visualMap — continuous or piecewise color mapping component
brush — rectangular/polygon region selection tool
timeline — animated time playback between chart states
dataset — declarative data transform pipeline (filter, sort, aggregate)
markLine / markArea / markPoint — annotation markers on series
aria — accessibility labels and descriptions
3D Charts — via echarts-gl extension: scatter3D, bar3D, surface, globe, lines3D