{"id":"08720af9-64f7-4e6b-9bb9-13f1b954acd5","entityType":"agent","slug":"clawhub-ifeel-is-a-mouse-text2echart","name":"text2echart","canonicalUrl":"https://www.xpersona.co/agent/clawhub-ifeel-is-a-mouse-text2echart","canonicalPath":"/agent/clawhub-ifeel-is-a-mouse-text2echart","generatedAt":"2026-10-12T08:01:26.891Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T20:09:34.957Z","emptyReason":null},"description":"Chart generator skill. When triggered: - Default: CONSTRUCT ECharts option JSON and output HTML string directly and render by mermaid and support preview. -... Skill: text2echart Owner: ifeel-is-a-mouse Summary: Chart generator skill. When triggered: - Default: CONSTRUCT ECharts option JSON and output HTML string directly and render by mermaid and support preview. -... Tags: latest:2.3.11 Version history: v2.3.11 | 2026-07-03T14:09:46.481Z | user Add disable-model-invocation and user-invocable parameters with English documentation v2.3.10 | 2026-06-18T16:04:30.592Z | user F","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 999 downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s177g9m5pt86wst7xh5s1m2hss88a9hb:text2echart","sourceUrl":"https://clawhub.ai/ifeel-is-a-mouse/text2echart","homepage":"https://clawhub.ai/ifeel-is-a-mouse/skills/text2echart","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/ifeel-is-a-mouse/text2echart","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/ifeel-is-a-mouse/skills/text2echart","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Chart generator skill. When triggered: - Default: CONSTRUCT ECharts option JSON and output HTML string directly and render by mermaid and support preview. -... "},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T20:09:34.957Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T20:09:34.957Z","emptyReason":null},"stars":null,"forks":null,"downloads":999,"likes":null,"task":null,"library":null,"packageName":null,"latestVersion":"2.3.11","tractionLabel":"999 downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T20:09:34.895Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T20:09:34.957Z","lastCrawledAt":"2026-10-11T20:09:34.895Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T20:09:34.895Z","lastVerifiedAt":null,"highlights":[{"version":"2.3.11","createdAt":"2026-07-03T14:09:46.481Z","changelog":"Add disable-model-invocation and user-invocable parameters with English documentation","fileCount":42,"zipByteSize":774849},{"version":"2.3.10","createdAt":"2026-06-18T16:04:30.592Z","changelog":"Fix: add assets/README.md placeholder so directory is visible; images embedded as base64 in main README","fileCount":42,"zipByteSize":773849},{"version":"2.3.9","createdAt":"2026-06-18T16:02:48.018Z","changelog":"Fix: embed assets as base64 data URIs in README.md — ClawHub blocks binary image files server-side","fileCount":41,"zipByteSize":773782},{"version":"2.3.8","createdAt":"2026-06-18T16:00:48.808Z","changelog":"Fix: use !assets/ negation to include screenshot assets over server-side image filter","fileCount":41,"zipByteSize":425519},{"version":"2.3.7","createdAt":"2026-06-18T15:51:23.694Z","changelog":"修复: 直接从 projects 发布补回 assets/","fileCount":41,"zipByteSize":425628}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s177g9m5pt86wst7xh5s1m2hss88a9hb:text2echart","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ifeel-is-a-mouse-text2echart/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ifeel-is-a-mouse-text2echart/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ifeel-is-a-mouse-text2echart/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-ifeel-is-a-mouse-text2echart/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-ifeel-is-a-mouse-text2echart/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-ifeel-is-a-mouse-text2echart/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-12T08:01:26.889Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ifeel-is-a-mouse-text2echart/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ifeel-is-a-mouse-text2echart/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ifeel-is-a-mouse-text2echart/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ifeel-is-a-mouse-text2echart/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T20:09:34.957Z","emptyReason":null},"readme":"Skill: text2echart\n\nOwner: ifeel-is-a-mouse\n\nSummary: Chart generator skill. When triggered: - Default: CONSTRUCT ECharts option JSON and output HTML string directly and render by mermaid and support preview. -...\n\nTags: latest:2.3.11\n\nVersion history:\n\nv2.3.11 | 2026-07-03T14:09:46.481Z | user\n\nAdd disable-model-invocation and user-invocable parameters with English documentation\n\nv2.3.10 | 2026-06-18T16:04:30.592Z | user\n\nFix: add assets/README.md placeholder so directory is visible; images embedded as base64 in main README\n\nv2.3.9 | 2026-06-18T16:02:48.018Z | user\n\nFix: embed assets as base64 data URIs in README.md — ClawHub blocks binary image files server-side\n\nv2.3.8 | 2026-06-18T16:00:48.808Z | user\n\nFix: use !assets/ negation to include screenshot assets over server-side image filter\n\nv2.3.7 | 2026-06-18T15:51:23.694Z | user\n\n修复: 直接从 projects 发布补回 assets/\n\nArchive index:\n\nArchive v2.3.11: 42 files, 774849 bytes\n\nFiles: _meta.json (131b), assets/README.md (345b), cli.js (13414b), lib/echarts-5.6.min.js (1034102b), lib/echarts-theme-dark.js (5981b), lib/echarts-theme-infographic.js (5829b), lib/echarts-theme-macarons.js (5869b), lib/echarts-theme-roma.js (3044b), lib/echarts-theme-shine.js (4412b), lib/echarts-theme-vintage.js (1922b), lib/echarts-wordcloud-2.1.min.js (16552b), package.json (400b), prompt.md (11407b), README.md (579864b), references/echarts-option-reference.md (24157b), references/echarts-option-zh.md (24117b), references/echarts-wordcloud.md (4854b), references/echarts-zh-axisLabel.md (293b), references/echarts-zh-color.md (255b), references/echarts-zh-emphasis.md (277b), references/echarts-zh-grid.md (359b), references/echarts-zh-label.md (283b), references/echarts-zh-legend.md (243b), references/echarts-zh-series-bar.md (373b), references/echarts-zh-series-line.md (325b), references/echarts-zh-series-pie.md (450b), references/echarts-zh-series-radar.md (357b), references/echarts-zh-series-scatter.md (260b), references/echarts-zh-smooth.md (227b), references/echarts-zh-title.md (434b), references/echarts-zh-tooltip.md (303b), references/echarts-zh-xAxis.md (334b), references/echarts-zh-yAxis.md (221b), skill-card.md (2250b), SKILL.md (18439b), static/app.js (29242b), static/lang/en.json (971b), static/lang/zh.json (1052b), static/styles.css (6925b), static/templates-en.js (15288b), static/templates.js (15267b), text2echarts.html (10185b)\n\nFile v2.3.11:SKILL.md\n\n---\nname: text2echart\nname-zh: Data to Chart\nprovider: openclaw\ndescription: >\n Chart generator skill. When triggered:\n - Default: CONSTRUCT ECharts option JSON and output HTML string directly and render by mermaid and support preview.\n - Image / vector (图片/矢量图): use CLI with --svg-output (or --svg --embed for offline).\n - Screenshot (截图): use CLI with --screenshot (needs Playwright).\n - Fine-tuning (微调/修改): open browser for interactive adjustment.\n Supports 6 chart types: bar, line, pie, scatter, radar, wordcloud (via JSON).\n Trigger words: chart, graph, visualize, plot, draw, wordcloud, vent draw图表, 画图, 可视化, 图片, 矢量图, 词云.\ndisable-model-invocation: true\nuser-invocable: true\nmetadata:\n version: \"2.3.11\"\n launch: \"text2echarts.html\"\n trigger-keywords:\n - chart\n - graph\n - visualize\n - plot\n - make a chart\n - draw a graph\n - 图表\n - 画图\n - 可视化\n - 柱状图\n - 饼图\n - 图片\n - 矢量图\n - wordcloud\n - vent draw\n - 词云\n tags:\n - visualization\n - echarts\n - chart\n - data-viz\n - svg\n---\n\n# text2echart — Data to Chart\n\n## Invocation Model\n\ntext2echart is a chart-generation skill configured with safety-first invocation settings:\n\n- **`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.\n\n- **`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.\n\n**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.\n\n## ⚡ Routing\n\ncase when: user asks for a chart / graph / visualization (default):\n - Construct ECharts option JSON\n - Output HTML string directly, render with ```html code block\n - Support preview by opening in browser or screenshot\n\n **Default route — direct HTML generation in chat.**\n Example prompt: *\"Give me a pie chart of browser market share — Chrome 65%, Safari 18%, Edge 8%, Firefox 5%, Other 4%\"*\n → The model outputs a complete HTML file with an interactive ECharts pie chart.\n\ncase when: user asks for an image / picture / vector graphic (图片/矢量图):\n - Use CLI with SVG output: `node cli.js data.json --svg-output -o chart.svg`\n - `--svg-output` extracts standalone .svg file (requires Playwright)\n - Add `--embed` to bundle ECharts lib for fully offline use\n - SVG is vector format — sharp at any resolution, ideal for documents\n - Also send PNG screenshot for instant preview\n\ncase when: user asks for a screenshot / snapshot (截图):\n - Use CLI with screenshot: `node cli.js data.json --screenshot -o chart.png`\n - This generates high-quality raster PNG via Playwright\n - If Playwright is not installed, falls back with clear error + install instructions\n\ncase when: user wants to fine-tune / adjust / modify the chart (微调/修改):\n - Open browser: `node cli.js data.json --open`\n - Or open the generated HTML directly for interactive editing\n\ncase when: user asks to save to file / run locally:\n - Use CLI: `node cli.js data.json -o chart.html` (CDN mode, ~1KB)\n - For offline use: add `--embed` (~1MB)\n - Can combine with --open or --screenshot\n\ncase when: user asks for word cloud (词云):\n - Need word frequency data first (分词 + 词频统计)\n - Generate ECharts wordcloud option JSON with type:'wordCloud'\n - Then follow image/vector or html/web route based on output format request\n - Point to `text2echarts.html`\n - Open in browser, use templates and export\n\n---\n\n## Output Format\n\n```html\n...echarts CDN...
\n```\n\n---\n\n## Overview\n\nGenerate ECharts SVG charts from JSON/CSV. Two entry points:\n\n**Web App**: Open `text2echarts.html` in browser for interactive GUI with templates, live preview, theme switching, and PNG/JPG/SVG export.\n\n**CLI**: `node cli.js` for scripted/batch generation.\n\n## When to Use / When Not to Use\n\n| Scenario | Use text2echart? |\n|----------|-----------------|\n| \"Make a bar chart from this CSV\" | ✅ Best fit |\n| \"Visualize my sales data\" | ✅ Natural language input works |\n| \"Compare trends across months\" | ✅ Line chart, multi-series |\n| \"Show market share distribution\" | ✅ Pie chart with % labels |\n| \"I need an interactive chart dashboard\" | ⚠️ Open text2echarts.html instead |\n| \"Animate this chart frame by frame\" | ❌ ECharts not designed for animation frames |\n| \"Generate 100 charts in batch\" | ✅ Use CLI: `for f in *.csv; do node cli.js \\$f; done` |\n| \"Real-time streaming data\" | ❌ Use ECharts live update API directly |\n\n## Quick Start\n\n```bash\n# Web App — open interactive GUI\nopen text2echarts.html\n\n# CLI — CSV → chart\nnode cli.js data.csv --open\n\n# CLI — JSON → SVG\nnode cli.js chart.json -o report.html\n```\n\n## Supported Inputs\n\n| Format | Example | Auto-detected |\n|--------|---------|---------------|\n| **CSV** | `Month,Sales\\nJan,1200\\nFeb,900` | ✅ yes (comma in first line) |\n| **JSON** | `{\"series\":[{\"type\":\"bar\",\"data\":[30,80]}]}` | ✅ yes (starts with `{`) |\n| **JSON (simple)** | `{\"type\":\"bar\",\"data\":[{\"name\":\"A\",\"value\":30}]}` | ✅ yes |\n| **Stdin pipe** | `cat data.csv \\| node cli.js -` | ✅ use `-` |\n\n## CLI Reference\n\n```bash\nnode cli.js [options]\n\nOptions:\n -o, --out Output file name\n --type Chart type for CSV: bar|line|pie|radar|wordcloud\n --theme dark|infographic|macarons|roma|shine|vintage\n --width / --height Chart dimensions\n --svg SVG renderer (default)\n --svg-output Output standalone .svg file (needs Playwright)\n --screenshot Output PNG screenshot (needs Playwright)\n --open Open in browser after generation\n --cdn Use CDN for ECharts lib (default)\n --embed Embed ECharts lib for offline (~1MB)\n --slide 960x540 PPT slide mode\n```\n\n## Chart Types\n\n| Type | CSV columns | Auto features |\n|------|-------------|---------------|\n| bar | col1=labels, col2+=values | Rounded corners, top labels |\n| line | col1=labels, col2+=values | Smooth curves, area fill |\n| pie | col1=name, col2=value | Donut chart, % labels |\n| scatter | col1=x, col2=y | Bubble symbols |\n| radar | col1=dimension, col2+=values | Polygon shape |\n| wordcloud | col1=word, col2=frequency | Diamond shape |\n\n## Themes\n\n| Theme | Style | Background |\n|-------|-------|------------|\n| dark | Tech, deep blue | #1a1a2e |\n| infographic | Clean report | #f5f5f5 |\n| macarons | Soft, business | #f5f5f5 |\n| vintage | Nostalgic | #f5f5f5 |\n| shine | Bright, vivid | #f5f5f5 |\n| roma | Professional | #f5f5f5 |\n\n## Few-Shot Examples\n\n### 1. CSV → Bar Chart\n\nUser: *\"Chart these monthly sales\"*\n\n```csv\nMonth,Sales\nJan,1200\nFeb,900\nMar,1600\n```\n\n→ CLI auto-detects CSV, generates bar chart with labels, tooltips, rounded corners.\n\n### 2. JSON → Pie with Percentages\n\n```json\n{\n \"series\": [{\n \"type\": \"pie\",\n \"radius\": [\"40%\", \"70%\"],\n \"data\": [\n {\"value\": 48, \"name\": \"Chrome\"},\n {\"value\": 22, \"name\": \"Firefox\"},\n {\"value\": 18, \"name\": \"Safari\"}\n ],\n \"label\": {\"formatter\": \"{b}\\n{d}%\"}\n }],\n \"title\": {\"text\": \"Market Share\"}\n}\n```\n\n### 3. CSV → Multi-series Line\n\n```csv\nDate,Revenue,Cost\nJan,1200,800\nFeb,1500,900\nMar,1800,1100\n```\n\n`node cli.js data.csv --type line --theme dark --open`\n\n## Architecture\n\n```\nInput (JSON/CSV)\n → cli.js parses & converts to ECharts option\n → Option JSON injected into HTML template\n → echarts.init(dom, theme, {renderer:\"svg\"})\n → Output: self-contained .html with CDN references (~1KB)\n → --embed flag: inline ECharts lib (~1MB, offline)\n → --screenshot flag: PNG via Playwright\n → --svg-output flag: standalone SVG via Playwright\n```\n\n## Dependencies\n\n- **CLI**: Node.js only (stdlib, no npm packages)\n- **Runtime**: Internet for ECharts CDN (or `--embed` for offline)\n- **Zero npm install required**\n\n## References\n\n| File | Content |\n|------|---------|\n| `prompt.md` | Prompt engineering guide: core pattern, chain-of-thought, 3 few-shot examples, 16 option references, end-user template |\n| `references/echarts-option-reference.md` | Full ECharts option API (EN, from official site) |\n| `references/echarts-option-zh.md` | Full ECharts option API (中文) |\n| `references/echarts-wordcloud.md` | Wordcloud extension docs |\n| `references/echarts-zh-title.md` | title 选项详细说明 |\n| `references/echarts-zh-grid.md` | grid 选项详细说明 |\n| `references/echarts-zh-xAxis.md` | xAxis 选项详细说明 |\n| `references/echarts-zh-yAxis.md` | yAxis 选项详细说明 |\n| `references/echarts-zh-series-bar.md` | series.bar 柱状图配置 |\n| `references/echarts-zh-series-line.md` | series.line 折线图配置 |\n| `references/echarts-zh-series-pie.md` | series.pie 饼图配置 |\n| `references/echarts-zh-series-scatter.md` | series.scatter 散点图 |\n| `references/echarts-zh-series-radar.md` | series.radar 雷达图 |\n| `references/echarts-zh-tooltip.md` | tooltip 提示框配置 |\n| `references/echarts-zh-legend.md` | legend 图例配置 |\n| `references/echarts-zh-color.md` | color 调色盘 |\n| `references/echarts-zh-label.md` | label 数据标签 |\n| `references/echarts-zh-emphasis.md` | emphasis 高亮状态 |\n| `references/echarts-zh-smooth.md` | smooth 平滑曲线 |\n| `references/echarts-zh-axisLabel.md` | axisLabel 坐标轴标签 |\n\n## Prompt Guide\n\nFor LLM-based chart generation, see `prompt.md` — a complete prompt engineering guide with:\n- Core prompt pattern for ECharts option generation\n- Chain-of-thought reasoning for chart type selection\n- 3 Few-Shot examples (bar, pie, line)\n- 16 detailed option references with JSON examples\n- Common mistakes checklist\n- Copyable end-user prompt template\n\n## Interactive Web App\n\nFor a full GUI experience, open `text2echarts.html` in your browser.\nFeatures: live preview, templates, theme switching, export PNG/JPG/SVG.\n\n```\nweb/\n├── text2echarts.html # English (default, lang toggle)\n├── app.js # Core logic (i18n via JSON)\n├── styles.css # Shared styles\n├── templates.js # Chart templates (CN/EN)\n└── lang/ # JSON language packs\n```\n\n## Key ECharts Options Reference\n\nRefer to these when constructing chart configurations. Official docs:\n\n| Option | What it does | Concrete example | Link |\n|--------|-------------|-----------------|------|\n| `title` | Chart title | `{\"text\":\"Sales\",\"left\":\"center\",\"textStyle\":{\"fontSize\":18}}` | [→ docs](https://echarts.apache.org/en/option.html#title) |\n| `grid` | Chart margins | `{\"left\":\"3%\",\"right\":\"4%\",\"bottom\":\"10%\",\"containLabel\":true}` — `containLabel` prevents axis labels from being clipped | [→ docs](https://echarts.apache.org/en/option.html#grid) |\n| `xAxis` | X axis | `{\"type\":\"category\",\"data\":[\"Jan\",\"Feb\"],\"axisLabel\":{\"rotate\":45}}` — `type` must be `category` or `value` | [→ docs](https://echarts.apache.org/en/option.html#xAxis) |\n| `yAxis` | Y axis | `{\"type\":\"value\",\"name\":\"Units\"}` — add `name` for axis label text | [→ docs](https://echarts.apache.org/en/option.html#yAxis) |\n| `series.type:'bar'` | Bar chart | `{\"type\":\"bar\",\"data\":[30,80],\"itemStyle\":{\"borderRadius\":[4,4,0,0]},\"label\":{\"show\":true,\"position\":\"top\"}}` | [→ docs](https://echarts.apache.org/en/option.html#series-bar) |\n| `series.type:'line'` | Line chart | `{\"type\":\"line\",\"data\":[22,25,23],\"smooth\":true,\"areaStyle\":{\"opacity\":0.1},\"lineStyle\":{\"width\":3,\"shadowBlur\":10}}` | [→ docs](https://echarts.apache.org/en/option.html#series-line) |\n| `series.type:'pie'` | Pie/donut | `{\"type\":\"pie\",\"radius\":[\"40%\",\"70%\"],\"data\":[{\"value\":48,\"name\":\"A\"}],\"label\":{\"formatter\":\"{b}\\\n{d}%\"},\"emphasis\":{\"label\":{\"fontSize\":16}}}` | [→ docs](https://echarts.apache.org/en/option.html#series-pie) |\n| `series.type:'scatter'` | Scatter | `{\"type\":\"scatter\",\"data\":[[160,55],[170,65]],\"symbolSize\":12}` | [→ docs](https://echarts.apache.org/en/option.html#series-scatter) |\n| `series.type:'radar'` | Radar | `{\"type\":\"radar\",\"data\":[{\"value\":[90,75],\"name\":\"Score\"}]}` + `radar.indicator` | [→ docs](https://echarts.apache.org/en/option.html#series-radar) |\n| `tooltip` | Hover info | `{\"trigger\":\"axis\"}` for bar/line (axis-level), `{\"trigger\":\"item\",\"formatter\":\"{b}:{c}\"}` for pie | [→ docs](https://echarts.apache.org/en/option.html#tooltip) |\n| `legend` | Series names | `{\"data\":[\"Sales\",\"Profit\"],\"bottom\":\"0\"}` — `data` must match series `name` | [→ docs](https://echarts.apache.org/en/option.html#legend) |\n| `color` | Color palette | `[\"#5470c6\",\"#91cc75\",\"#fac858\",\"#ee6666\",\"#73c0de\"]` — ECharts default 5-color palette | [→ docs](https://echarts.apache.org/en/option.html#color) |\n| `label` | Data labels | `{\"show\":true,\"position\":\"top\",\"formatter\":\"{c}\",\"fontSize\":14}` — `position`: top/inside/outside/bottom | [→ docs](https://echarts.apache.org/en/option.html#series-bar.label) |\n| `emphasis` | Highlight state | `{\"label\":{\"fontSize\":16,\"fontWeight\":\"bold\"}}` — triggered on hover | [→ docs](https://echarts.apache.org/en/option.html#series-pie.emphasis) |\n| `smooth` | Curve lines | `true` for curved line chart, `false` (default) for polyline | [→ docs](https://echarts.apache.org/en/option.html#series-line.smooth) |\n| `itemStyle.borderRadius` | Rounded bars | `[4,4,0,0]` — top-left, top-right, bottom-right, bottom-left | [→ docs](https://echarts.apache.org/en/option.html#series-bar.itemStyle) |\n| `axisLabel.rotate` | Rotate X labels | `45` degrees — useful when labels overlap (10+ categories) | [→ docs](https://echarts.apache.org/en/option.html#xAxis.axisLabel) |\n\nSee also: `references/echarts-option-reference.md` (EN) and `references/echarts-option-zh.md` (CN)\n\n## Common Issues\n\n| Problem | Cause | Fix |\n|---------|-------|-----|\n| Blank chart | CDN blocked or no internet | Use `--embed` flag for local libs (~1MB) |\n| SVG not rendering | Old browser version | Chrome/Firefox 2020+ required |\n| Wordcloud missing | Missing wordcloud extension | Included in `--embed` mode; CDN auto-loads |\n| Chinese garbled | File saved in wrong encoding | Save as UTF-8; `--embed` embeds correct charset |\n| CLI not found | Node.js not installed | Install from nodejs.org |\n| Screenshot fails | Playwright not installed | `npm install playwright && npx playwright install chromium`, or use `--svg-output` for vector format |\n\n## Verification\n\nAfter generating a chart:\n\n1. Open the .html file in a browser\n2. Confirm chart canvas/SVG renders\n3. Hover over data points — tooltip should appear\n4. Resize browser — chart should adapt\n5. Test with `--theme` to confirm theme switching\n\n## Other Advanced Capabilities\n\n### 1. Multi-Pattern Generation\n\nThe 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.\n\n**Bar Chart with multiple styles and palettes:**\n\nPrompt: *\"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)\"*\n\n**Word Cloud with multiple shapes and palettes:**\n\nPrompt: *\"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\"*\n\n### 2. Full ECharts Series Support\n\nThis 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:\n\n**Additional Series Types:**\n- **Candlestick** — financial OHLC (Open-High-Low-Close) charts, also known as K-line charts\n- **Boxplot** — statistical distribution visualization with quartiles and outliers\n- **Heatmap** — matrix-based heatmap and calendar heatmap\n- **Treemap** — hierarchical data displayed as nested rectangles\n- **Sunburst** — multi-level radial hierarchy chart\n- **Sankey** — flow diagrams for energy, budget, traffic, etc.\n- **Funnel** — conversion funnel for marketing and sales analytics\n- **Gauge** — dashboard-style speedometer gauges\n- **Graph** — force-directed node-edge network graphs\n- **Tree** — tree diagrams (left-to-right, top-to-bottom, radial)\n- **PictorialBar** — bars rendered using SVG symbols or icons\n- **ThemeRiver** — streamgraph / ribbon-style time series\n- **Lines** — flight/migration path lines (typically used with maps)\n- **EffectScatter** — scatter plot with ripple animation effects\n- **Map** — geo-map charts with region shading\n\n**Additional Components & Extensions:**\n- **Parallel** — parallel coordinates for multi-dimensional data\n- **Custom** — fully custom renderers via callback functions\n- **dataZoom** — interactive scrollable/zoomable axis (slider + inside)\n- **visualMap** — continuous or piecewise color mapping component\n- **brush** — rectangular/polygon region selection tool\n- **timeline** — animated time playback between chart states\n- **dataset** — declarative data transform pipeline (filter, sort, aggregate)\n- **markLine / markArea / markPoint** — annotation markers on series\n- **aria** — accessibility labels and descriptions\n- **3D Charts** — via echarts-gl extension: scatter3D, bar3D, surface, globe, lines3D\n\nFile v2.3.11:assets/README.md\n\n# Assets Directory\n\nScreenshot images (bar-chart.jpg, help-screen.jpg, pie-chart.jpg, wordcloud.jpg)\nare embedded as base64 data URIs in the project [README.md](../README.md).\n\nThis is necessary because ClawHub blocks binary image file uploads (.jpg, .png)\nat the server level — `.clawhubignore` negation patterns cannot override this filter.\n\nFile v2.3.11:_meta.json\n\n{\n \"ownerId\": \"kn763gq5kg4zre2btdb6rwgrwx88bwgs\",\n \"slug\": \"text2echart\",\n \"version\": \"2.3.11\",\n \"publishedAt\": 1783087786481\n}\n\nFile v2.3.11:references/echarts-option-reference.md\n\nOption API GL Tutorial\nsetOption({\nCollapse All\ntitle: {...} ,\nlegend: {...} ,\ngrid: {...} ,\nxAxis: {...} ,\nyAxis: {...} ,\npolar: {...} ,\nradiusAxis: {...} ,\nangleAxis: {...} ,\nradar: {...} ,\ndataZoom: [{...}] ,\nvisualMap: [{...}] ,\ntooltip: {...} ,\naxisPointer: {...} ,\ntoolbox: {...} ,\nbrush: {...} ,\ngeo: {...} ,\nparallel: {...} ,\nparallelAxis: {...} ,\nsingleAxis: {...} ,\ntimeline: {...} ,\ngraphic: {...} ,\ncalendar: {...} ,\nmatrix: {...} ,\nthumbnail: {...} ,\ndataset: {...} ,\naria: {...} ,\nseries: [{...}] ,\ndarkMode ... ,\ncolor ... ,\nbackgroundColor ... ,\ntextStyle: {...} ,\nanimation: true ,\nanimationThreshold: 2000 ,\nanimationDuration: 1000 ,\nanimationEasing: 'cubicOut' ,\nanimationDelay: 0 ,\nanimationDurationUpdate: 300 ,\nanimationEasingUpdate: 'cubicOut' ,\nanimationDelayUpdate: 0 ,\nstateAnimation: {...} ,\nblendMode: 'source-over' ,\nhoverLayerThreshold: 3000 ,\nuseUTC: false ,\nrichInheritPlainLabel: true ,\noptions ... ,\nmedia: [{...}] ,\ntitle\n\nTitle component, including main title and subtitle.\n\nIn ECharts 2.x, a single instance of ECharts could contains one title component at most. However, in ECharts 3, there could be one or more than one title components. It is more useful when multiple diagrams in one instance all need titles.\n\nHere are some instances of different animation easing functions, among which every instance has a title component:\n\nProperties\ntitle. id\nstring\n\nComponent ID, not specified by default. If specified, it can be used to refer the component in option or API.\n\ntitle. show = true\n Try It\nboolean\n\nSet this to false to prevent the title from showing\n\ntitle. text = ''\n Try It\nstring\n\nThe main title text, supporting for \\n for newlines.\n\n[WARNING]: When enabling toolbox.feature.saveAsImage, and toolbox.feature.saveAsImage.name is not provided, it has historically been using title[0].text instead. This usage is not recommended -- toolbox.feature.saveAsImage.name should always be specified explicitly; otherwise, correctness and security risks for a filename have to be considered in this title.text option. See document \"Security Guidelines\" for recommendations on safe usage.\ntitle. link = ''\nstring\n\nThe hyper link of main title text.\n\n[WARNING]: This URL string is accepted directly without any internal sanitization. Security risks must be considered if it comes from untrusted sources. See document \"Security Guidelines\" for recommendations on safe usage.\ntitle. target = 'blank'\nstring\n\nOpen the hyper link of main title in specified tab.\n\noptions:\n\n'self' opening it in current tab\n\n'blank' opening it in a new tab\n\n title. textStyle\nObject\n title.textStyle. color = '#333'\n Try It\nColor\n\nmain title text color.\n\n title.textStyle. fontStyle = 'normal'\n Try It\nstring\n\nmain title font style.\n\nOptions are:\n\n'normal'\n'italic'\n'oblique'\n title.textStyle. fontWeight = 'bolder'\n Try It\nstringnumber\n\nmain title font thick weight.\n\nOptions are:\n\n'normal'\n'bold'\n'bolder'\n'lighter'\n100 | 200 | 300 | 400...\n title.textStyle. fontFamily = 'sans-serif'\n Try It\nstring\n\nmain title font family.\n\nCan also be 'serif' , 'monospace', ...\n\n title.textStyle. fontSize = 18\n Try It\nnumber\n\nmain title font size.\n\n title.textStyle. lineHeight\n Try It\nnumber\n\nLine height of the text fragment.\n\nIf lineHeight is not set in rich, lineHeight in parent level will be used. For example:\n\n{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n\n title.textStyle. width\n Try It\nnumber\n\nWidth of text block.\n\n title.textStyle. height\n Try It\nnumber\n\nHeight of text block.\n\n title.textStyle. textBorderColor\n Try It\nColor\n\nStroke color of the text.\n\n title.textStyle. textBorderWidth\n Try It\nnumber\n\nStroke line width of the text.\n\n title.textStyle. textBorderType = 'solid'\n Try It\nstringnumberArray\n\nStroke line type of the text.\n\nPossible values are:\n\n'solid'\n'dashed'\n'dotted'\n\nSince v5.0.0, it can also be a number or a number array to specify the dash array of the line. With textBorderDashOffset , we can make the line style more flexible.\n\nFor example：\n\n{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n\n title.textStyle. textBorderDashOffset = 0\n Try It\nnumber\nSince v5.0.0\n\nTo set the line dash offset. With textBorderType , we can make the line style more flexible.\n\nRefer to MDN lineDashOffset for more details.\n\n title.textStyle. textShadowColor = 'transparent'\n Try It\nColor\n\nShadow color of the text itself.\n\n title.textStyle. textShadowBlur = 0\n Try It\nnumber\n\nShadow blue of the text itself.\n\n title.textStyle. textShadowOffsetX = 0\n Try It\nnumber\n\nShadow X offset of the text itself.\n\n title.textStyle. textShadowOffsetY = 0\n Try It\nnumber\n\nShadow Y offset of the text itself.\n\n title.textStyle. overflow = 'none'\n Try It\nstring\n\nDetermine how to display the text when it's overflow. Available when width is set.\n\n'truncate' Truncate the text and trailing with ellipsis.\n'break' Break by word\n'breakAll' Break by character.\n title.textStyle. ellipsis = '...'\nstring\n\nEllipsis to be displayed when overflow is set to truncate.\n\n'truncate' Truncate the overflow lines.\n title.textStyle. rich\nObject\n\n\"Rich text styles\" can be defined in this rich property. For example:\n\nlabel: {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style \"a\" is applied to this snippet}'\n '{b|Style \"b\" is applied to this snippet}This snippet use default style{x|use style \"x\"}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n\n\nFor more details, see Rich Text please.\n\nProperties\n{ }\n title.textStyle. richInheritPlainLabel = true\nboolean\nSince v6.0.0\n\nWhether rich text inherits plain text style.\n\nThis option is just for backward compatibility.\n\nThe label.rich / textStyle.rich fontStyle, fontWeight, fontSize, fontFamily, textShadowColor, textShadowBlur, textShadowOffsetX, textShadowOffsetY are changed to inherit the corresponding plain label styles since echarts v6. You can use richInheritPlainLabel: false to restore it. For example,\n\noption = {\n richInheritPlainLabel: false, // In most cases, this is enough.\n xxx1: {\n // Can also set it here to only control this label.\n label: {\n richInheritPlainLabel: false,\n rich: {/* ... */},\n }\n },\n xxx2: {\n textStyle: {\n richInheritPlainLabel: false,\n rich: {/* ... */},\n }\n }\n}\n\ntitle. subtext = ''\n Try It\nstring\n\nSubtitle text, supporting for \\n for newlines.\n\ntitle. sublink = ''\nstring\n\nThe hyper link of subtitle text.\n\n[WARNING]: This URL string is accepted directly without any internal sanitization. Security risks must be considered if it comes from untrusted sources. See document \"Security Guidelines\" for recommendations on safe usage.\ntitle. subtarget = 'blank'\nstring\n\nOpen the hyper link of subtitle in specified tab, options:\n\n'self' opening it in current tab\n\n'blank' opening it in a new tab\n\n title. subtextStyle\nObject\n title.subtextStyle. color = '#aaa'\n Try It\nColor\n\nsubtitle text color.\n\n title.subtextStyle. fontStyle = 'normal'\n Try It\nstring\n\nsubtitle font style.\n\nOptions are:\n\n'normal'\n'italic'\n'oblique'\n title.subtextStyle. fontWeight = 'normal'\n Try It\nstringnumber\n\nsubtitle font thick weight.\n\nOptions are:\n\n'normal'\n'bold'\n'bolder'\n'lighter'\n100 | 200 | 300 | 400...\n title.subtextStyle. fontFamily = 'sans-serif'\n Try It\nstring\n\nsubtitle font family.\n\nCan also be 'serif' , 'monospace', ...\n\n title.subtextStyle. fontSize = 12\n Try It\nnumber\n\nsubtitle font size.\n\n title.subtextStyle. align\n Try It\nstring\n\nHorizontal alignment of text, automatic by default.\n\nOptions are:\n\n'left'\n'center'\n'right'\n\nIf align is not set in rich, align in parent level will be used. For example:\n\n{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n\n title.subtextStyle. verticalAlign\n Try It\nstring\n\nVertical alignment of text, automatic by default.\n\nOptions are:\n\n'top'\n'middle'\n'bottom'\n\nIf verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:\n\n{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n\n title.subtextStyle. lineHeight\n Try It\nnumber\n\nLine height of the text fragment.\n\nIf lineHeight is not set in rich, lineHeight in parent level will be used. For example:\n\n{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n\n title.subtextStyle. width\n Try It\nnumber\n\nWidth of text block.\n\n title.subtextStyle. height\n Try It\nnumber\n\nHeight of text block.\n\n title.subtextStyle. textBorderColor\n Try It\nColor\n\nStroke color of the text.\n\n title.subtextStyle. textBorderWidth\n Try It\nnumber\n\nStroke line width of the text.\n\n title.subtextStyle. textBorderType = 'solid'\n Try It\nstringnumberArray\n\nStroke line type of the text.\n\nPossible values are:\n\n'solid'\n'dashed'\n'dotted'\n\nSince v5.0.0, it can also be a number or a number array to specify the dash array of the line. With textBorderDashOffset , we can make the line style more flexible.\n\nFor example：\n\n{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n\n title.subtextStyle. textBorderDashOffset = 0\n Try It\nnumber\nSince v5.0.0\n\nTo set the line dash offset. With textBorderType , we can make the line style more flexible.\n\nRefer to MDN lineDashOffset for more details.\n\n title.subtextStyle. textShadowColor = 'transparent'\n Try It\nColor\n\nShadow color of the text itself.\n\n title.subtextStyle. textShadowBlur = 0\n Try It\nnumber\n\nShadow blue of the text itself.\n\n title.subtextStyle. textShadowOffsetX = 0\n Try It\nnumber\n\nShadow X offset of the text itself.\n\n title.subtextStyle. textShadowOffsetY = 0\n Try It\nnumber\n\nShadow Y offset of the text itself.\n\n title.subtextStyle. overflow = 'none'\n Try It\nstring\n\nDetermine how to display the text when it's overflow. Available when width is set.\n\n'truncate' Truncate the text and trailing with ellipsis.\n'break' Break by word\n'breakAll' Break by character.\n title.subtextStyle. ellipsis = '...'\nstring\n\nEllipsis to be displayed when overflow is set to truncate.\n\n'truncate' Truncate the overflow lines.\n title.subtextStyle. rich\nObject\n\n\"Rich text styles\" can be defined in this rich property. For example:\n\nlabel: {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style \"a\" is applied to this snippet}'\n '{b|Style \"b\" is applied to this snippet}This snippet use default style{x|use style \"x\"}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n\n\nFor more details, see Rich Text please.\n\nProperties\n{ }\n title.subtextStyle. richInheritPlainLabel = true\nboolean\nSince v6.0.0\n\nWhether rich text inherits plain text style.\n\nThis option is just for backward compatibility.\n\nThe label.rich / textStyle.rich fontStyle, fontWeight, fontSize, fontFamily, textShadowColor, textShadowBlur, textShadowOffsetX, textShadowOffsetY are changed to inherit the corresponding plain label styles since echarts v6. You can use richInheritPlainLabel: false to restore it. For example,\n\noption = {\n richInheritPlainLabel: false, // In most cases, this is enough.\n xxx1: {\n // Can also set it here to only control this label.\n label: {\n richInheritPlainLabel: false,\n rich: {/* ... */},\n }\n },\n xxx2: {\n textStyle: {\n richInheritPlainLabel: false,\n rich: {/* ... */},\n }\n }\n}\n\ntitle. textAlign = 'auto'\n Try It\nstring\n\nThe horizontal align of the component (including \"text\" and \"subtext\").\n\nOptional values: 'auto', 'left', 'right', 'center'.\n\ntitle. textVerticalAlign = 'auto'\n Try It\nstring\n\nThe vertical align of the component (including \"text\" and \"subtext\").\n\nOptional values: 'auto', 'top', 'bottom', 'middle'.\n\ntitle. triggerEvent = false\n Try It\nboolean\n\nWhether to enable to dispatch mouse/touch events to user-registered listeners (i.e., chart.on('xxx', function (event) {})).\n\nSupported mouse/touch events are 'click', 'dblclick', 'mouseover', 'mouseout', 'mousemove', 'mousedown', 'mouseup', 'globalout', 'contextmenu'. Note, both mouse and touch events are unified to the event type 'mouse{xxx}'.\n\nValues:\n\ntrue: Enable to trigger events. But dispatching also requires option silent to be falsy.\nfalse: Disable to trigger mouse/touch events, even if option silent is falsy.\n\nThe parameters of the event:\n\n{\n componentType: 'title';\n // The index of the title component (base on echarts option)\n componentIndex: number;\n}\n\ntitle. padding = 5\n Try It\nnumberArray\n\ntitle space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.\n\nExamples:\n\n// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n\ntitle. itemGap = 10\n Try It\nnumber\n\nThe gap between the main title and subtitle.\n\ntitle. zlevel = 0\nnumber\n\nzlevel value of all graphical elements in .\n\nzlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.\n\nCanvases with bigger zlevel will be placed on Canvases with smaller zlevel.\n\ntitle. z = 2\nnumber\n\nz value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.\n\nz has a lower priority to zlevel, and will not create new Canvas.\n\ntitle. left = 'auto'\n Try It\nstringnumber\n\nDistance between title component and the left side of the container.\n\nleft can be a pixel value like 20; it can also be a percentage value relative to the container width like '20%'; and it can also be 'left', 'center', or 'right'.\n\nIf the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.\n\ntitle. top = 'auto'\n Try It\nstringnumber\n\nDistance between title component and the top side of the container.\n\ntop can be a pixel value like 20; it can also be a percentage value relative to the container height like '20%'; and it can also be 'top', 'middle', or 'bottom'.\n\nIf the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.\n\ntitle. right = 'auto'\n Try It\nstringnumber\n\nDistance between title component and the right side of the container.\n\nright can be a pixel value like 20; it can also be a percentage value relative to the container width like '20%'.\n\nAdaptive by default.\n\ntitle. bottom = 'auto'\n Try It\nstringnumber\n\nDistance between title component and the bottom side of the container.\n\nbottom can be a pixel value like 20; it can also be a percentage value relative to the container height like '20%'.\n\nAdaptive by default.\n\ntitle. coordinateSystem = 'none'\nstring\nSince v6.0.0\n\nSpecifies another coordinate system component on which this title is laid out.\n\nOptions:\n\nnull/undefined/'none'\n\nNot laid out in any coordinate system; instead, laid out independently.\n\n'calendar'\n\nLay out based on a calendar coordinate system. When multiple calendar coordinate systems exist within an ECharts instance, the corresponding system should be specified using calendarIndex or calendarId.\n\n'matrix'\n\nLay out based on a matrix coordinate system. When multiple matrix coordinate systems exist within an ECharts instance, the corresponding system should be specified using matrixIndex or matrixId.\n\nSupport for series and component layout on coordinate systems:\n\nThe leftmost column lists the series and components that will be laid out (coordinate systems themselves are also components), and the topmost row lists the coordinate systems that can be laid out on.\n\n\tno coord sys\tgrid (cartesian2d)\tpolar\tgeo\tsingleAxis\tradar\tparallel\tcalendar\tmatrix\ngrid (cartesian2d)\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\npolar\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ngeo\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nsingleAxis\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ncalendar\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t❌\t❌\nmatrix\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t❌\t❌\nseries-line\t❌\t✅\t✅\t❌\t❌\t❌\t❌\t❌ (✅ if via another coord sys like grid)\t❌ (✅ if via another coord sys like grid)\nseries-bar\t❌\t✅\t✅\t❌\t❌\t❌\t❌\t❌ (✅ if via another coord sys like grid)\t❌ (✅ if via another coord sys like grid)\nseries-pie\t✅\t✅\t✅\t✅\t✅\t❌\t❌\t✅\t✅\nseries-scatter\t❌\t✅\t✅\t✅\t✅\t❌\t❌\t✅\t✅\nseries-effectScatter\t❌\t✅\t✅\t✅\t✅\t❌\t❌\t✅\t✅\nseries-radar\t❌\t❌\t❌\t❌\t❌\t✅\t❌\t❌ (✅ if via radar coord sys)\t❌ (✅ if via radar coord sys)\nseries-tree\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-treemap\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-sunburst\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-boxplot\t❌\t✅\t❌\t❌\t❌\t❌\t❌\t❌ (✅ if via another coord sys like grid)\t❌ (✅ if via another coord sys like grid)\nseries-candlestick\t❌\t✅\t❌\t❌\t❌\t❌\t❌\t❌ (✅ if via another coord sys like grid)\t❌ (✅ if via another coord sys like grid)\nseries-heatmap\t❌\t✅\t❌\t✅\t❌\t❌\t❌\t✅\t✅\nseries-map\t✅ (create a geo coord sys exclusively)\t❌\t❌\t✅\t❌\t❌\t❌\t✅\t✅\nseries-parallel\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t❌ (✅ if via parallel coord sys)\t❌ (✅ if via parallel coord sys)\nseries-lines\t❌\t✅\t✅\t✅\t✅\t❌\t❌\t❌ (✅ if via another coord sys like geo)\t❌ (✅ if via another coord sys like geo)\nseries-graph\t✅ (create a \"view\" coord sys exclusively)\t✅\t✅\t✅\t❌\t❌\t❌\t✅\t✅\nseries-sankey\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-funnel\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-gauge\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-pictorialBar\t❌\t✅\t✅\t❌\t❌\t❌\t❌\t❌ (✅ if via another coord sys like grid)\t❌ (✅ if via another coord sys like grid)\nseries-themeRiver\t❌\t❌\t❌\t❌\t✅\t❌\t❌\t❌ (✅ if via another coord sys like singleAxis)\t❌ (✅ if via another coord sys like singleAxis)\nseries-chord\t✅\t✅\t✅\t✅\t✅\t❌\t❌\t✅\t✅\ntitle\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nlegend\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ndataZoom\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nvisualMap\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ntoolbox\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ntimeline\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nthumbnail\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\n\nSee also title.coordinateSystemUsage.\n\ntitle. coordinateSystemUsage = 'box'\nstring\nSince v6.0.0\n\nSpecify how to lay out this title based on the specified coordinateSystem.\n\nIn most cases, there is no need to specify coordinateSystemUsage, unless the default behavior is unexpected.\n\nOptions:\n\n'data': (Not applicable in title)\n\nEach data item of a series (e.g., each series.data[i]) is laid out separately based on the specified coordinate system. Currently no non-series component supports coordinateSystemUsage: 'data'.\n\n'box':\n\nThe entire series or component is laid out as a whole based on the specified coordinate system - that is, the overall bounding rect or basic anchor point is calculated relative to the system.\n\nFor example, a grid component can be laid out in a matrix coordinate system or a calendar coordinate system, where its layout rectangle is calculated by the specified title.coords in that system. See example sparkline in matrix.\nFor example, a pie series or a chord series can be laid out in a geo coordinate system or a cartesian2d coordinate system, where the center is calculated by the specified series-pie.coords or series-pie.center in that system. See example pie in geo.\n\nSee also title.coordinateSystem.\n\ntitle. coord\nArraynumberstring\nSince v6.0.0\n\nWhen coordinateSystemUsage is 'box', coord is used as the input to the coordinate system and calculate the layout rectangle or anchor point.\n\nExamples: sparkline in matrix, grpah in matrix.\n\nNote: when coordinateSystemUsage is 'data', the input of coordinate system is series.data[i] rather than this coord.\n\nThe format this coord is defined by each coordinate system, and it's the same as the second parameter of chart.convertToPixel.\n\ntitle. calendarIndex = 0\nnumber\nSince v6.0.0\n\nThe index of the calendar coordinate system to base on. When mutiple calendar exist within an ECharts instance, use this to specify the corresponding calendar.\n\ntitle. calendarId = undefined\nnumber\nSince v6.0.0\n\nThe id of the calendar coordinate system to base on. When mutiple calendar exist within an ECharts instance, use this to specify the corresponding calendar.\n\ntitle. matrixIndex = 0\nnumber\nSince v6.0.0\n\nThe index of the matrix coordinate system to base on. When mutiple matrix exist within an ECharts instance, use this to specify the corresponding matrix.\n\ntitle. matrixId = undefined\nnumber\nSince v6.0.0\n\nThe id of the matrix coordinate system to base on. When mutiple matrix exist within an ECharts instance, use this to specify the corresponding matrix.\n\ntitle. backgroundColor = 'transparent'\n Try It\nColor\n\nBackground color of title, which is transparent by default.\n\nColor can be represented in RGB, for example 'rgb(128, 128, 128)'. RGBA can be used when you need alpha channel, for example 'rgba(128, 128, 128, 0.5)'. You may also use hexadecimal format, for example '#ccc'.\n\ntitle. borderColor = '#ccc'\n Try It\nColor\n\nBorder color of title. Support the same color format as backgroundColor.\n\ntitle. borderWidth = 1\n Try It\nnumber\n\nBorder width of title.\n\ntitle. borderRadius = 0\n Try It\nnumberArray\n\nThe radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.\n\nFor example:\n\nborderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n\ntitle. shadowBlur\n Try It\nnumber\n\nSize of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.\n\nFor example:\n\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n\n\nAttention: This property works only if show: true is configured and backgroundColor is defined other than transparent.\n\ntitle. shadowColor\n Try It\nColor\n\nShadow color. Support same format as color.\n\nAttention: This property works only if show: true configured.\n\ntitle. shadowOffsetX = 0\n Try It\nnumber\n\nOffset distance on the horizontal direction of shadow.\n\nAttention: This property works only if show: true configured.\n\ntitle. shadowOffsetY = 0\n Try It\nnumber\n\nOffset distance on the vertical direction of shadow.\n\nAttention: This property works only if show: true configured.\n\n Preview\n\nFile v2.3.11:references/echarts-option-zh.md\n\n配置项 API GL配置 教程\nsetOption({\n收起所有\ntitle: {...} ,\nlegend: {...} ,\ngrid: {...} ,\nxAxis: {...} ,\nyAxis: {...} ,\npolar: {...} ,\nradiusAxis: {...} ,\nangleAxis: {...} ,\nradar: {...} ,\ndataZoom: [{...}] ,\nvisualMap: [{...}] ,\ntooltip: {...} ,\naxisPointer: {...} ,\ntoolbox: {...} ,\nbrush: {...} ,\ngeo: {...} ,\nparallel: {...} ,\nparallelAxis: {...} ,\nsingleAxis: {...} ,\ntimeline: {...} ,\ngraphic: {...} ,\ncalendar: {...} ,\nmatrix: {...} ,\nthumbnail: {...} ,\ndataset: {...} ,\naria: {...} ,\nseries: [{...}] ,\ndarkMode ... ,\ncolor ... ,\nbackgroundColor: 'transparent' ,\ntextStyle: {...} ,\nanimation: true ,\nanimationThreshold: 2000 ,\nanimationDuration: 1000 ,\nanimationEasing: 'cubicOut' ,\nanimationDelay: 0 ,\nanimationDurationUpdate: 300 ,\nanimationEasingUpdate: 'cubicInOut' ,\nanimationDelayUpdate: 0 ,\nstateAnimation: {...} ,\nblendMode: 'source-over' ,\nhoverLayerThreshold: 3000 ,\nuseUTC: false ,\nrichInheritPlainLabel: true ,\noptions ... ,\nmedia: [{...}] ,\ntitle\n\n标题组件，包含主标题和副标题。\n\n在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件，这在需要标题进行排版，或者单个实例中的多个图表都需要标题时会比较有用。\n\n例如下面不同缓动函数效果的示例，每一个缓动效果图都带有一个标题组件：\n\n所有属性\ntitle. id\nstring\n\n组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。\n\ntitle. show = true\n 试一试\nboolean\n\n是否显示标题组件。\n\ntitle. text = ''\n 试一试\nstring\n\n主标题文本，支持使用 \\n 换行。\n\n[警告]: 如果使用了 toolbox.feature.saveAsImage，并且没有设置 toolbox.feature.saveAsImage.name，会用 title[0].text 替代。这种用法是历史实现但并不推荐，应该总是显式指定toolbox.feature.saveAsImage.name；否则，不得不考虑 title.text 是否是个正确的文件名，以及其 安全性。文档 “安全指南” 给出了安全使用建议。\ntitle. link = ''\nstring\n\n主标题文本超链接。\n\n[警告]: 此 URL 字符串直接被使用，并未在内部做其他净化处理（sanitization） 如果他们来自于“不受信任”的来源，必须考虑 安全风险。文档 “安全指南” 给出了安全使用建议。\ntitle. target = 'blank'\nstring\n\n指定窗口打开主标题超链接。\n\n可选：\n\n'self' 当前窗口打开\n\n'blank' 新窗口打开\n\n title. textStyle\nObject\n title.textStyle. color = '#333'\n 试一试\nColor\n\n主标题文字的颜色。\n\n title.textStyle. fontStyle = 'normal'\n 试一试\nstring\n\n主标题文字字体的风格。\n\n可选：\n\n'normal'\n'italic'\n'oblique'\n title.textStyle. fontWeight = 'bolder'\n 试一试\nstringnumber\n\n主标题文字字体的粗细。\n\n可选：\n\n'normal'\n'bold'\n'bolder'\n'lighter'\n100 | 200 | 300 | 400...\n title.textStyle. fontFamily = 'sans-serif'\n 试一试\nstring\n\n主标题文字的字体系列。\n\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...\n\n title.textStyle. fontSize = 18\n 试一试\nnumber\n\n主标题文字的字体大小。\n\n title.textStyle. lineHeight\n 试一试\nnumber\n\n行高。\n\nrich 中如果没有设置 lineHeight，则会取父层级的 lineHeight。例如：\n\n{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n\n title.textStyle. width\n 试一试\nnumber\n\n文本显示宽度。\n\n title.textStyle. height\n 试一试\nnumber\n\n文本显示高度。\n\n title.textStyle. textBorderColor\n 试一试\nColor\n\n文字本身的描边颜色。\n\n title.textStyle. textBorderWidth\n 试一试\nnumber\n\n文字本身的描边宽度。\n\n title.textStyle. textBorderType = 'solid'\n 试一试\nstringnumberArray\n\n文字本身的描边类型。\n\n可选：\n\n'solid'\n'dashed'\n'dotted'\n\n自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 textBorderDashOffset 可实现更灵活的虚线效果。\n\n例如：\n\n{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n\n title.textStyle. textBorderDashOffset = 0\n 试一试\nnumber\n从 v5.0.0 开始支持\n\n用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。\n\n更多详情可以参考 MDN lineDashOffset。\n\n title.textStyle. textShadowColor = 'transparent'\n 试一试\nColor\n\n文字本身的阴影颜色。\n\n title.textStyle. textShadowBlur = 0\n 试一试\nnumber\n\n文字本身的阴影长度。\n\n title.textStyle. textShadowOffsetX = 0\n 试一试\nnumber\n\n文字本身的阴影 X 偏移。\n\n title.textStyle. textShadowOffsetY = 0\n 试一试\nnumber\n\n文字本身的阴影 Y 偏移。\n\n title.textStyle. overflow = 'none'\n 试一试\nstring\n\n文字超出宽度是否截断或者换行。配置width时有效\n\n'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...\n'break' 换行\n'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行\n title.textStyle. ellipsis = '...'\nstring\n\n在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。\n\n title.textStyle. rich\nObject\n\n在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。\n\n例如：\n\nlabel: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n\n\n详情参见教程：富文本标签\n\n所有属性\n{ }\n title.textStyle. richInheritPlainLabel = true\nboolean\n从 v6.0.0 开始支持\n\n富文本样式是否继承普通文本样式。\n\n此配置项用于向历史兼容。\n\n从 v6 版本开始，富文本标签 (label.rich / textStyle.rich) 部分样式（fontStyle, fontWeight, fontSize, fontFamily, textShadowColor, textShadowBlur, textShadowOffsetX, textShadowOffsetY）默认继承 普通文本样式 (label / textStyle)。你可以设置 richInheritPlainLabel: false （可在最外层配置项或与同级文本样式配置项）来禁用此行为。\n\noption = {\n richInheritPlainLabel: false, // In most cases, this is enough.\n xxx1: {\n // Can also set it here to only control this label.\n label: {\n richInheritPlainLabel: false,\n rich: {/* ... */},\n }\n },\n xxx2: {\n textStyle: {\n richInheritPlainLabel: false,\n rich: {/* ... */},\n }\n }\n}\n\ntitle. subtext = ''\n 试一试\nstring\n\n副标题文本，支持使用 \\n 换行。\n\ntitle. sublink = ''\nstring\n\n副标题文本超链接。\n\n[警告]: 此 URL 字符串直接被使用，并未在内部做其他净化处理（sanitization） 如果他们来自于“不受信任”的来源，必须考虑 安全风险。文档 “安全指南” 给出了安全使用建议。\ntitle. subtarget = 'blank'\nstring\n\n指定窗口打开副标题超链接，可选：\n\n'self' 当前窗口打开\n\n'blank' 新窗口打开\n\n title. subtextStyle\nObject\n title.subtextStyle. color = '#aaa'\n 试一试\nColor\n\n副标题文字的颜色。\n\n title.subtextStyle. fontStyle = 'normal'\n 试一试\nstring\n\n副标题文字字体的风格。\n\n可选：\n\n'normal'\n'italic'\n'oblique'\n title.subtextStyle. fontWeight = 'normal'\n 试一试\nstringnumber\n\n副标题文字字体的粗细。\n\n可选：\n\n'normal'\n'bold'\n'bolder'\n'lighter'\n100 | 200 | 300 | 400...\n title.subtextStyle. fontFamily = 'sans-serif'\n 试一试\nstring\n\n副标题文字的字体系列。\n\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...\n\n title.subtextStyle. fontSize = 12\n 试一试\nnumber\n\n副标题文字的字体大小。\n\n title.subtextStyle. align\n 试一试\nstring\n\n文字水平对齐方式，默认自动。\n\n可选：\n\n'left'\n'center'\n'right'\n\nrich 中如果没有设置 align，则会取父层级的 align。例如：\n\n{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n\n title.subtextStyle. verticalAlign\n 试一试\nstring\n\n文字垂直对齐方式，默认自动。\n\n可选：\n\n'top'\n'middle'\n'bottom'\n\nrich 中如果没有设置 verticalAlign，则会取父层级的 verticalAlign。例如：\n\n{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n\n title.subtextStyle. lineHeight\n 试一试\nnumber\n\n行高。\n\nrich 中如果没有设置 lineHeight，则会取父层级的 lineHeight。例如：\n\n{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n\n title.subtextStyle. width\n 试一试\nnumber\n\n文本显示宽度。\n\n title.subtextStyle. height\n 试一试\nnumber\n\n文本显示高度。\n\n title.subtextStyle. textBorderColor\n 试一试\nColor\n\n文字本身的描边颜色。\n\n title.subtextStyle. textBorderWidth\n 试一试\nnumber\n\n文字本身的描边宽度。\n\n title.subtextStyle. textBorderType = 'solid'\n 试一试\nstringnumberArray\n\n文字本身的描边类型。\n\n可选：\n\n'solid'\n'dashed'\n'dotted'\n\n自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 textBorderDashOffset 可实现更灵活的虚线效果。\n\n例如：\n\n{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n\n title.subtextStyle. textBorderDashOffset = 0\n 试一试\nnumber\n从 v5.0.0 开始支持\n\n用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。\n\n更多详情可以参考 MDN lineDashOffset。\n\n title.subtextStyle. textShadowColor = 'transparent'\n 试一试\nColor\n\n文字本身的阴影颜色。\n\n title.subtextStyle. textShadowBlur = 0\n 试一试\nnumber\n\n文字本身的阴影长度。\n\n title.subtextStyle. textShadowOffsetX = 0\n 试一试\nnumber\n\n文字本身的阴影 X 偏移。\n\n title.subtextStyle. textShadowOffsetY = 0\n 试一试\nnumber\n\n文字本身的阴影 Y 偏移。\n\n title.subtextStyle. overflow = 'none'\n 试一试\nstring\n\n文字超出宽度是否截断或者换行。配置width时有效\n\n'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...\n'break' 换行\n'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行\n title.subtextStyle. ellipsis = '...'\nstring\n\n在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。\n\n title.subtextStyle. rich\nObject\n\n在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。\n\n例如：\n\nlabel: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n\n\n详情参见教程：富文本标签\n\n所有属性\n{ }\n title.subtextStyle. richInheritPlainLabel = true\nboolean\n从 v6.0.0 开始支持\n\n富文本样式是否继承普通文本样式。\n\n此配置项用于向历史兼容。\n\n从 v6 版本开始，富文本标签 (label.rich / textStyle.rich) 部分样式（fontStyle, fontWeight, fontSize, fontFamily, textShadowColor, textShadowBlur, textShadowOffsetX, textShadowOffsetY）默认继承 普通文本样式 (label / textStyle)。你可以设置 richInheritPlainLabel: false （可在最外层配置项或与同级文本样式配置项）来禁用此行为。\n\noption = {\n richInheritPlainLabel: false, // In most cases, this is enough.\n xxx1: {\n // Can also set it here to only control this label.\n label: {\n richInheritPlainLabel: false,\n rich: {/* ... */},\n }\n },\n xxx2: {\n textStyle: {\n richInheritPlainLabel: false,\n rich: {/* ... */},\n }\n }\n}\n\ntitle. textAlign = 'auto'\n 试一试\nstring\n\n整体（包括 text 和 subtext）的水平对齐。\n\n可选值：'auto'、'left'、'right'、'center'。\n\ntitle. textVerticalAlign = 'auto'\n 试一试\nstring\n\n整体（包括 text 和 subtext）的垂直对齐。\n\n可选值：'auto'、'top'、'bottom'、'middle'。\n\ntitle. triggerEvent = false\n 试一试\nboolean\n\n鼠标和触摸事件是否发送给开发者注册的监听器（chart.on('xxx', function (event) {})）。\n\n支持的鼠标和触摸事件为 'click'、'dblclick'、'mouseover'、'mouseout'、'mousemove'、'mousedown'、'mouseup'、'globalout'、'contextmenu'。注意，鼠标和触摸事件都统一使用名字 'mouse{xxx}'。\n\n可取值：\n\ntrue: 允许对外发送事件。但是它也需要 silent 配置项为 false 才能真正发送事件。\nfalse: 禁止对外发送事件，哪怕 silent 配置项为 false。\n\n事件对象的内容为：\n\n{\n componentType: 'title';\n // title 组件的 index（基于 echarts option）。\n componentIndex: number;\n}\n\ntitle. padding = 5\n 试一试\nnumberArray\n\n标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。\n\n使用示例：\n\n// 设置内边距为 5\npadding: 5\n// 设置上下的内边距为 5，左右的内边距为 10\npadding: [5, 10]\n// 分别设置四个方向的内边距\npadding: [\n 5, // 上\n 10, // 右\n 5, // 下\n 10, // 左\n]\n\ntitle. itemGap = 10\n 试一试\nnumber\n\n主副标题之间的间距。\n\ntitle. zlevel = 0\nnumber\n\n所有图形的 zlevel 值。\n\nzlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。\n\nzlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。\n\ntitle. z = 2\nnumber\n\n组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。\n\nz相比zlevel优先级更低，而且不会创建新的 Canvas。\n\ntitle. left = 'auto'\n 试一试\nstringnumber\n\n标题（title）组件离容器左侧的距离。\n\nleft 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器宽度的百分比，也可以是 'left', 'center', 'right'。\n\n如果 left 的值为 'left', 'center', 'right'，组件会根据相应的位置自动对齐。\n\ntitle. top = 'auto'\n 试一试\nstringnumber\n\n标题（title）组件离容器上侧的距离。\n\ntop 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高度的百分比，也可以是 'top', 'middle', 'bottom'。\n\n如果 top 的值为 'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。\n\ntitle. right = 'auto'\n 试一试\nstringnumber\n\n标题（title）组件离容器右侧的距离。\n\nright 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器宽度的百分比。\n\n默认自适应。\n\ntitle. bottom = 'auto'\n 试一试\nstringnumber\n\n标题（title）组件离容器下侧的距离。\n\nbottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高度的百分比。\n\n默认自适应。\n\ntitle. coordinateSystem = 'none'\nstring\n从 v6.0.0 开始支持\n\n指定另一个坐标系组件，本 title 布局在那个坐标系中。\n\n可选值：\n\nnull、undefined 或者 'none'\n\n不布局在任何坐标系中。自己独立完成布局。\n\n'calendar'\n\n布局在一个 日历坐标系 中。当一个 ECharts 实例中存在多个日历坐标系时，须通过 calendarIndex 或 calendarId 指定所使用的日历坐标系。\n\n'matrix'\n\n布局在一个 矩阵坐标系中。当一个 ECharts 实例中存在多个矩阵坐标系时，须通过 matrixIndex 或 matrixId 指定所使用的矩阵坐标系。\n\n下表总结了“某系列或组件是否支持布局在某坐标系上”：\n\n最左列列出了要布局的系列和组件（坐标系本身也是组件），最上行列出了所基于的坐标系。\n\n\tno coord sys\tgrid (cartesian2d)\tpolar\tgeo\tsingleAxis\tradar\tparallel\tcalendar\tmatrix\ngrid (cartesian2d)\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\npolar\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ngeo\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nsingleAxis\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ncalendar\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nmatrix\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-line\t❌\t✅\t✅\t❌\t❌\t❌\t❌\t❌ (✅ 如果通过其他坐标系，如 grid)\t❌ (✅ 如果通过其他坐标系，如 grid)\nseries-bar\t❌\t✅\t✅\t❌\t❌\t❌\t❌\t❌ (✅ 如果通过其他坐标系，如 grid)\t❌ (✅ 如果通过其他坐标系，如 grid)\nseries-pie\t✅\t✅\t✅\t✅\t✅\t❌\t❌\t✅\t✅\nseries-scatter\t❌\t✅\t✅\t✅\t✅\t❌\t❌\t✅\t✅\nseries-effectScatter\t❌\t✅\t✅\t✅\t✅\t❌\t❌\t✅\t✅\nseries-radar\t❌\t❌\t❌\t❌\t❌\t✅\t❌\t❌ (✅ 如果通过 radar 坐标系)\t❌ (✅ 如果通过 radar 坐标系)\nseries-tree\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-treemap\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-sunburst\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-boxplot\t❌\t✅\t❌\t❌\t❌\t❌\t❌\t❌ (✅ 如果通过其他坐标系，如 grid)\t❌ (✅ 如果通过其他坐标系，如 grid)\nseries-candlestick\t❌\t✅\t❌\t❌\t❌\t❌\t❌\t❌ (✅ 如果通过其他坐标系，如 grid)\t❌ (✅ 如果通过其他坐标系，如 grid)\nseries-heatmap\t❌\t✅\t❌\t✅\t❌\t❌\t❌\t✅\t✅\nseries-map\t✅ (create a geo coord sys exclusively)\t❌\t❌\t✅\t❌\t❌\t❌\t✅\t✅\nseries-parallel\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t❌ (✅ 如果通过 parallel 坐标系)\t❌ (✅ 如果通过 parallel 坐标系)\nseries-lines\t❌\t✅\t✅\t✅\t✅\t❌\t❌\t❌ (✅ 如果通过其他坐标系，如 geo)\t❌ (✅ 如果通过其他坐标系，如 geo)\nseries-graph\t✅ (create a \"view\" coord sys exclusively)\t✅\t✅\t✅\t❌\t❌\t❌\t✅\t✅\nseries-sankey\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-funnel\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-gauge\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-pictorialBar\t❌\t✅\t✅\t❌\t❌\t❌\t❌\t❌ (✅ 如果通过其他坐标系，如 grid)\t❌ (✅ 如果通过其他坐标系，如 grid)\nseries-themeRiver\t❌\t❌\t❌\t❌\t✅\t❌\t❌\t❌ (✅ 如果通过其他坐标系，如 singleAxis)\t❌ (✅ 如果通过其他坐标系，如 singleAxis)\nseries-chord\t✅\t✅\t✅\t✅\t✅\t❌\t❌\t✅\t✅\ntitle\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nlegend\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ndataZoom\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nvisualMap\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ntoolbox\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ntimeline\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nthumbnail\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\n\n也参见 title.coordinateSystemUsage。\n\ntitle. coordinateSystemUsage = 'box'\nstring\n从 v6.0.0 开始支持\n\n如何在指定的 坐标系 上布局本 title。\n\n在大多数情况下，无需显式指定 coordinateSystemUsage，除非默认行为不符合预期。\n\n可选值：\n\n'data'：（不适用于 title）\n\n此系列的每个数据项（例如，每个 series.data[i]）将独立地在指定的坐标系进行布局。 注：当前没有任何“非系列组件”支持 coordinateSystemUsage: 'data'。\n\n'box'：\n\n此系列或组件作为一个整体，在指定的坐标系中进行布局——即根据坐标系计算整体的包围盒或基础锚点。\n\n例如，grid 组件 可以布局在 matrix 坐标系 或 calendar 坐标系 中，这时其布局矩形是由 title.coords 在坐标系中计算出来的。参见示例：矩阵中的微型折线图。\n又如，饼图系列 或 和弦图系列 可以布局在 geo 坐标系 或 cartesian2d 坐标系 中，这时其中心点是由 series-pie.coords 或 series-pie.center 在坐标系中计算出来的。参见示例：地理坐标系中的饼图。\n\n另参考：title.coordinateSystem。\n\ntitle. coord\nArraynumberstring\n从 v6.0.0 开始支持\n\n当 coordinateSystemUsage 为 'box' 时, coord 被输入给坐标系，计算得到布局位置（布局盒或者中心点）。\n\n例子：矩阵中的微型折线图, 矩阵中的关系图.\n\n注：当 coordinateSystemUsage 为 'data' 时，输入给坐标系的是 series.data[i] 而非此 coord。\n\ncoord 的具体格式定义，取决于每个坐标系，并且，和 chart.convertToPixel 的第二个参数相同。\n\ntitle. calendarIndex = 0\nnumber\n从 v6.0.0 开始支持\n\n布局时所基于的 日历坐标系 的 index。当一个 ECharts 实例中存在多个日历坐标系时，用其指定所使用的坐标系。\n\ntitle. calendarId = undefined\nnumber\n从 v6.0.0 开始支持\n\n布局时所基于的 日历坐标系 的 id。当一个 ECharts 实例中存在多个日历坐标系时，用其指定所使用的坐标系。\n\ntitle. matrixIndex = 0\nnumber\n从 v6.0.0 开始支持\n\n布局时所基于的 矩阵坐标系 的 index。当一个 ECharts 实例中存在多个矩阵坐标系时，用其指定所使用的坐标系。\n\ntitle. matrixId = undefined\nnumber\n从 v6.0.0 开始支持\n\n布局时所基于的 矩阵坐标系 的 id。当一个 ECharts 实例中存在多个矩阵坐标系时，用其指定所使用的坐标系。\n\ntitle. backgroundColor = 'transparent'\n 试一试\nColor\n\n标题背景色，默认透明。\n\n颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)' ，如果想要加上 alpha 通道，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'\n\ntitle. borderColor = '#ccc'\n 试一试\nColor\n\n标题的边框颜色。支持的颜色格式同 backgroundColor。\n\ntitle. borderWidth = 0\n 试一试\nnumber\n\n标题的边框线宽。\n\ntitle. borderRadius = 0\n 试一试\nnumberArray\n\n圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。 如:\n\nborderRadius: 5, // 统一设置四个角的圆角大小\nborderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）\n\ntitle. shadowBlur\n 试一试\nnumber\n\n图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。\n\n示例：\n\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n\n\n注意：此配置项生效的前提是，设置了 show: true 以及值不为 transparent 的背景色 backgroundColor。\n\ntitle. shadowColor\n 试一试\nColor\n\n阴影颜色。支持的格式同color。\n\n注意：此配置项生效的前提是，设置了 show: true。\n\ntitle. shadowOffsetX = 0\n 试一试\nnumber\n\n阴影水平方向上的偏移距离。\n\n注意：此配置项生效的前提是，设置了 show: true。\n\ntitle. shadowOffsetY = 0\n 试一试\nnumber\n\n阴影垂直方向上的偏移距离。\n\n注意：此配置项生效的前提是，设置了 show: true。\n\n 预览\n\nFile v2.3.11:references/echarts-wordcloud.md\n\n# echarts-wordcloud\n\nThird-party Wordcloud extension based on [wordcloud2.js](https://github.com/timdream/wordcloud2.js) for [Apache ECharts](https://github.com/apache/echarts).\n\n![](./example/word-cloud.png)\n\n## Examples\n\n[Google Trends](https://ecomfe.github.io/echarts-wordcloud/example/wordCloud.html)\n\n[ECharts Option Keywords](https://ecomfe.github.io/echarts-wordcloud/example/optionKeywords.html)\n\n## Install\n\n```html\n\n\n```\n\nOr\n\n```shell\nnpm install echarts\nnpm install echarts-wordcloud\n```\n\n```js\nimport * as echarts from 'echarts';\nimport 'echarts-wordcloud';\n```\n\n⚠️ NOTE:\n\necharts-wordcloud@2 is for echarts@5\n\necharts-wordcloud@1 is for echarts@4\n\n## Usage\n\n```js\nvar chart = echarts.init(document.getElementById('main'));\n\nchart.setOption({\n ...\n series: [{\n type: 'wordCloud',\n\n // The shape of the \"cloud\" to draw. Can be any polar equation represented as a\n // callback function, or a keyword present. Available presents are circle (default),\n // cardioid (apple or heart shape curve, the most known polar equation), diamond (\n // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.\n\n shape: 'circle',\n\n // Keep aspect ratio of maskImage or 1:1 for shapes\n // This option is supported since echarts-wordcloud@2.1.0\n keepAspect: false,\n\n // A silhouette image which the white area will be excluded from drawing texts.\n // The shape option will continue to apply as the shape of the cloud to grow.\n\n maskImage: maskImage,\n\n // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud\n // Default to be put in the center and has 75% x 80% size.\n\n left: 'center',\n top: 'center',\n width: '70%',\n height: '80%',\n right: null,\n bottom: null,\n\n // Text size range which the value in data will be mapped to.\n // Default to have minimum 12px and maximum 60px size.\n\n sizeRange: [12, 60],\n\n // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45\n\n rotationRange: [-90, 90],\n rotationStep: 45,\n\n // size of the grid in pixels for marking the availability of the canvas\n // the larger the grid size, the bigger the gap between words.\n\n gridSize: 8,\n\n // set to true to allow word to be drawn partly outside of the canvas.\n // Allow word bigger than the size of the canvas to be drawn\n // This option is supported since echarts-wordcloud@2.1.0\n drawOutOfBound: false,\n\n // if the font size is too large for the text to be displayed,\n // whether to shrink the text. If it is set to false, the text will\n // not be rendered. If it is set to true, the text will be shrinked.\n // This option is supported since echarts-wordcloud@2.1.0\n shrinkToFit: false,\n\n // If perform layout animation.\n // NOTE disable it will lead to UI blocking when there is lots of words.\n layoutAnimation: true,\n\n // Global text style\n textStyle: {\n fontFamily: 'sans-serif',\n fontWeight: 'bold',\n // Color can be a callback function or a color string\n color: function () {\n // Random color\n return 'rgb(' + [\n Math.round(Math.random() * 160),\n Math.round(Math.random() * 160),\n Math.round(Math.random() * 160)\n ].join(',') + ')';\n }\n },\n emphasis: {\n focus: 'self',\n\n textStyle: {\n textShadowBlur: 10,\n textShadowColor: '#333'\n }\n },\n\n // Data is an array. Each array item must have name and value property.\n data: [{\n name: 'Farrah Abraham',\n value: 366,\n // Style of single text\n textStyle: {\n }\n }]\n }]\n});\n```\n\n## Changelog\n\n### 2.1.0\n\n- [chore] Update Apache ECharts version\n- [chore] Sync with the latest wordcloud2.js and use prettier to format the code\n- [feature] Add `keepAspect` option to keep aspect ratio of maskImage or 1:1 for shapes\n- [feature] Add `drawOutOfBound` option to allow words to be drawn partly outside of the canvas\n- [feature] Add `shrinkToFit` option to shrink the text if the font size is too large for the text to be displayed\n\n## Notice\n\nThe Apache Software Foundation [Apache ECharts, ECharts](https://echarts.apache.org/), Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the [Apache Software Foundation](https://www.apache.org/).\n\nFile v2.3.11:references/echarts-zh-axisLabel.md\n\n# axisLabel - 坐标轴标签\nSource: https://echarts.apache.org/zh/option.html#xAxis.axisLabel\n\n坐标轴刻度标签的样式和格式。\n\n示例:\n```json\n{\"rotate\": 45, \"interval\": 0, \"fontSize\": 12}\n```\n\nrotate: 旋转角度，数据多时防重叠\ninterval: 显示间隔，0=全部显示\n\nFile v2.3.11:references/echarts-zh-color.md\n\n# color - 调色盘\nSource: https://echarts.apache.org/zh/option.html#color\n\n全局调色盘，系列自动按顺序取色。\n\n示例:\n```json\n[\"#5470c6\", \"#91cc75\", \"#fac858\", \"#ee6666\", \"#73c0de\"]\n```\n\n默认5色盘。系列超过5个时循环使用。\n\nFile v2.3.11:references/echarts-zh-emphasis.md\n\n# emphasis - 高亮状态\nSource: https://echarts.apache.org/zh/option.html#series-pie.emphasis\n\n鼠标悬停时的高亮样式。\n\n示例:\n```json\n{\"label\": {\"fontSize\": 16, \"fontWeight\": \"bold\"},\n \"itemStyle\": {\"shadowBlur\": 10}}\n```\n\n可配置 label / itemStyle / lineStyle\n\nFile v2.3.11:references/echarts-zh-grid.md\n\n# grid - 网格边距\nSource: https://echarts.apache.org/zh/option.html#grid\n\n直角坐标系内绘图网格，控制图表在容器中的位置和边距。\n\n示例:\n```json\n{\"left\": \"3%\", \"right\": \"4%\", \"bottom\": \"10%\", \"containLabel\": true}\n```\n\n⚠️ containLabel: true 防止轴标签被裁剪\n属性: left/right/top/bottom - 距离容器边界的距离\n\nFile v2.3.11:references/echarts-zh-label.md\n\n# label - 数据标签\nSource: https://echarts.apache.org/zh/option.html#series-bar.label\n\n在数据点上显示文本标签。\n\n示例:\n```json\n{\"show\": true, \"position\": \"top\", \"formatter\": \"{c}\", \"fontSize\": 14}\n```\n\nposition: top(柱顶) | inside(内部) | outside(饼图外部)\n\nFile v2.3.11:references/echarts-zh-legend.md\n\n# legend - 图例\nSource: https://echarts.apache.org/zh/option.html#legend\n\n图例组件，标识不同系列。\n\n示例:\n```json\n{\"data\": [\"销售额\", \"利润\"], \"bottom\": \"0\"}\n```\n\ndata: series 的 name 列表，必须匹配\nbottom: 位置\n\nArchive v2.3.10: 42 files, 773849 bytes\n\nFiles: assets/README.md (345b), cli.js (13414b), lib/echarts-5.6.min.js (1034102b), lib/echarts-theme-dark.js (5981b), lib/echarts-theme-infographic.js (5829b), lib/echarts-theme-macarons.js (5869b), lib/echarts-theme-roma.js (3044b), lib/echarts-theme-shine.js (4412b), lib/echarts-theme-vintage.js (1922b), lib/echarts-wordcloud-2.1.min.js (16552b), package.json (400b), prompt.md (11407b), README.md (578973b), references/echarts-option-reference.md (24157b), references/echarts-option-zh.md (24117b), references/echarts-wordcloud.md (4854b), references/echarts-zh-axisLabel.md (293b), references/echarts-zh-color.md (255b), references/echarts-zh-emphasis.md (277b), references/echarts-zh-grid.md (359b), references/echarts-zh-label.md (283b), references/echarts-zh-legend.md (243b), references/echarts-zh-series-bar.md (373b), references/echarts-zh-series-line.md (325b), references/echarts-zh-series-pie.md (450b), references/echarts-zh-series-radar.md (357b), references/echarts-zh-series-scatter.md (260b), references/echarts-zh-smooth.md (227b), references/echarts-zh-title.md (434b), references/echarts-zh-tooltip.md (303b), references/echarts-zh-xAxis.md (334b), references/echarts-zh-yAxis.md (221b), skill-card.md (2155b), SKILL.md (17363b), static/app.js (29242b), static/lang/en.json (971b), static/lang/zh.json (1052b), static/styles.css (6925b), static/templates-en.js (15288b), static/templates.js (15267b), text2echarts.html (10185b), _meta.json (131b)\n\nFile v2.3.10:SKILL.md\n\n---\nname: text2echart\nname-zh: Data to Chart\nprovider: openclaw\ndescription: >\n Chart generator skill. When triggered:\n - Default: CONSTRUCT ECharts option JSON and output HTML string directly and render by mermaid and support preview.\n - Image / vector (图片/矢量图): use CLI with --svg-output (or --svg --embed for offline).\n - Screenshot (截图): use CLI with --screenshot (needs Playwright).\n - Fine-tuning (微调/修改): open browser for interactive adjustment.\n Supports 6 chart types: bar, line, pie, scatter, radar, wordcloud (via JSON).\n Trigger words: chart, graph, visualize, plot, draw, wordcloud, vent draw图表, 画图, 可视化, 图片, 矢量图, 词云.\nmetadata:\n version: \"2.3.2\"\n launch: \"text2echarts.html\"\n trigger-keywords:\n - chart\n - graph\n - visualize\n - plot\n - make a chart\n - draw a graph\n - 图表\n - 画图\n - 可视化\n - 柱状图\n - 饼图\n - 图片\n - 矢量图\n - wordcloud\n - vent draw\n - 词云\n tags:\n - visualization\n - echarts\n - chart\n - data-viz\n - svg\n---\n\n# text2echart — Data to Chart\n\n## ⚡ Routing\n\ncase when: user asks for a chart / graph / visualization (default):\n - Construct ECharts option JSON\n - Output HTML string directly, render with ```html code block\n - Support preview by opening in browser or screenshot\n\n **Default route — direct HTML generation in chat.**\n Example prompt: *\"Give me a pie chart of browser market share — Chrome 65%, Safari 18%, Edge 8%, Firefox 5%, Other 4%\"*\n → The model outputs a complete HTML file with an interactive ECharts pie chart.\n\ncase when: user asks for an image / picture / vector graphic (图片/矢量图):\n - Use CLI with SVG output: `node cli.js data.json --svg-output -o chart.svg`\n - `--svg-output` extracts standalone .svg file (requires Playwright)\n - Add `--embed` to bundle ECharts lib for fully offline use\n - SVG is vector format — sharp at any resolution, ideal for documents\n - Also send PNG screenshot for instant preview\n\ncase when: user asks for a screenshot / snapshot (截图):\n - Use CLI with screenshot: `node cli.js data.json --screenshot -o chart.png`\n - This generates high-quality raster PNG via Playwright\n - If Playwright is not installed, falls back with clear error + install instructions\n\ncase when: user wants to fine-tune / adjust / modify the chart (微调/修改):\n - Open browser: `node cli.js data.json --open`\n - Or open the generated HTML directly for interactive editing\n\ncase when: user asks to save to file / run locally:\n - Use CLI: `node cli.js data.json -o chart.html` (CDN mode, ~1KB)\n - For offline use: add `--embed` (~1MB)\n - Can combine with --open or --screenshot\n\ncase when: user asks for word cloud (词云):\n - Need word frequency data first (分词 + 词频统计)\n - Generate ECharts wordcloud option JSON with type:'wordCloud'\n - Then follow image/vector or html/web route based on output format request\n - Point to `text2echarts.html`\n - Open in browser, use templates and export\n\n---\n\n## Output Format\n\n```html\n...echarts CDN...
\n```\n\n---\n\n## Overview\n\nGenerate ECharts SVG charts from JSON/CSV. Two entry points:\n\n**Web App**: Open `text2echarts.html` in browser for interactive GUI with templates, live preview, theme switching, and PNG/JPG/SVG export.\n\n**CLI**: `node cli.js` for scripted/batch generation.\n\n## When to Use / When Not to Use\n\n| Scenario | Use text2echart? |\n|----------|-----------------|\n| \"Make a bar chart from this CSV\" | ✅ Best fit |\n| \"Visualize my sales data\" | ✅ Natural language input works |\n| \"Compare trends across months\" | ✅ Line chart, multi-series |\n| \"Show market share distribution\" | ✅ Pie chart with % labels |\n| \"I need an interactive chart dashboard\" | ⚠️ Open text2echarts.html instead |\n| \"Animate this chart frame by frame\" | ❌ ECharts not designed for animation frames |\n| \"Generate 100 charts in batch\" | ✅ Use CLI: `for f in *.csv; do node cli.js \\$f; done` |\n| \"Real-time streaming data\" | ❌ Use ECharts live update API directly |\n\n## Quick Start\n\n```bash\n# Web App — open interactive GUI\nopen text2echarts.html\n\n# CLI — CSV → chart\nnode cli.js data.csv --open\n\n# CLI — JSON → SVG\nnode cli.js chart.json -o report.html\n```\n\n## Supported Inputs\n\n| Format | Example | Auto-detected |\n|--------|---------|---------------|\n| **CSV** | `Month,Sales\\nJan,1200\\nFeb,900` | ✅ yes (comma in first line) |\n| **JSON** | `{\"series\":[{\"type\":\"bar\",\"data\":[30,80]}]}` | ✅ yes (starts with `{`) |\n| **JSON (simple)** | `{\"type\":\"bar\",\"data\":[{\"name\":\"A\",\"value\":30}]}` | ✅ yes |\n| **Stdin pipe** | `cat data.csv \\| node cli.js -` | ✅ use `-` |\n\n## CLI Reference\n\n```bash\nnode cli.js [options]\n\nOptions:\n -o, --out Output file name\n --type Chart type for CSV: bar|line|pie|radar|wordcloud\n --theme dark|infographic|macarons|roma|shine|vintage\n --width / --height Chart dimensions\n --svg SVG renderer (default)\n --svg-output Output standalone .svg file (needs Playwright)\n --screenshot Output PNG screenshot (needs Playwright)\n --open Open in browser after generation\n --cdn Use CDN for ECharts lib (default)\n --embed Embed ECharts lib for offline (~1MB)\n --slide 960x540 PPT slide mode\n```\n\n## Chart Types\n\n| Type | CSV columns | Auto features |\n|------|-------------|---------------|\n| bar | col1=labels, col2+=values | Rounded corners, top labels |\n| line | col1=labels, col2+=values | Smooth curves, area fill |\n| pie | col1=name, col2=value | Donut chart, % labels |\n| scatter | col1=x, col2=y | Bubble symbols |\n| radar | col1=dimension, col2+=values | Polygon shape |\n| wordcloud | col1=word, col2=frequency | Diamond shape |\n\n## Themes\n\n| Theme | Style | Background |\n|-------|-------|------------|\n| dark | Tech, deep blue | #1a1a2e |\n| infographic | Clean report | #f5f5f5 |\n| macarons | Soft, business | #f5f5f5 |\n| vintage | Nostalgic | #f5f5f5 |\n| shine | Bright, vivid | #f5f5f5 |\n| roma | Professional | #f5f5f5 |\n\n## Few-Shot Examples\n\n### 1. CSV → Bar Chart\n\nUser: *\"Chart these monthly sales\"*\n\n```csv\nMonth,Sales\nJan,1200\nFeb,900\nMar,1600\n```\n\n→ CLI auto-detects CSV, generates bar chart with labels, tooltips, rounded corners.\n\n### 2. JSON → Pie with Percentages\n\n```json\n{\n \"series\": [{\n \"type\": \"pie\",\n \"radius\": [\"40%\", \"70%\"],\n \"data\": [\n {\"value\": 48, \"name\": \"Chrome\"},\n {\"value\": 22, \"name\": \"Firefox\"},\n {\"value\": 18, \"name\": \"Safari\"}\n ],\n \"label\": {\"formatter\": \"{b}\\n{d}%\"}\n }],\n \"title\": {\"text\": \"Market Share\"}\n}\n```\n\n### 3. CSV → Multi-series Line\n\n```csv\nDate,Revenue,Cost\nJan,1200,800\nFeb,1500,900\nMar,1800,1100\n```\n\n`node cli.js data.csv --type line --theme dark --open`\n\n## Architecture\n\n```\nInput (JSON/CSV)\n → cli.js parses & converts to ECharts option\n → Option JSON injected into HTML template\n → echarts.init(dom, theme, {renderer:\"svg\"})\n → Output: self-contained .html with CDN references (~1KB)\n → --embed flag: inline ECharts lib (~1MB, offline)\n → --screenshot flag: PNG via Playwright\n → --svg-output flag: standalone SVG via Playwright\n```\n\n## Dependencies\n\n- **CLI**: Node.js only (stdlib, no npm packages)\n- **Runtime**: Internet for ECharts CDN (or `--embed` for offline)\n- **Zero npm install required**\n\n## References\n\n| File | Content |\n|------|---------|\n| `prompt.md` | Prompt engineering guide: core pattern, chain-of-thought, 3 few-shot examples, 16 option references, end-user template |\n| `references/echarts-option-reference.md` | Full ECharts option API (EN, from official site) |\n| `references/echarts-option-zh.md` | Full ECharts option API (中文) |\n| `references/echarts-wordcloud.md` | Wordcloud extension docs |\n| `references/echarts-zh-title.md` | title 选项详细说明 |\n| `references/echarts-zh-grid.md` | grid 选项详细说明 |\n| `references/echarts-zh-xAxis.md` | xAxis 选项详细说明 |\n| `references/echarts-zh-yAxis.md` | yAxis 选项详细说明 |\n| `references/echarts-zh-series-bar.md` | series.bar 柱状图配置 |\n| `references/echarts-zh-series-line.md` | series.line 折线图配置 |\n| `references/echarts-zh-series-pie.md` | series.pie 饼图配置 |\n| `references/echarts-zh-series-scatter.md` | series.scatter 散点图 |\n| `references/echarts-zh-series-radar.md` | series.radar 雷达图 |\n| `references/echarts-zh-tooltip.md` | tooltip 提示框配置 |\n| `references/echarts-zh-legend.md` | legend 图例配置 |\n| `references/echarts-zh-color.md` | color 调色盘 |\n| `references/echarts-zh-label.md` | label 数据标签 |\n| `references/echarts-zh-emphasis.md` | emphasis 高亮状态 |\n| `references/echarts-zh-smooth.md` | smooth 平滑曲线 |\n| `references/echarts-zh-axisLabel.md` | axisLabel 坐标轴标签 |\n\n## Prompt Guide\n\nFor LLM-based chart generation, see `prompt.md` — a complete prompt engineering guide with:\n- Core prompt pattern for ECharts option generation\n- Chain-of-thought reasoning for chart type selection\n- 3 Few-Shot examples (bar, pie, line)\n- 16 detailed option references with JSON examples\n- Common mistakes checklist\n- Copyable end-user prompt template\n\n## Interactive Web App\n\nFor a full GUI experience, open `text2echarts.html` in your browser.\nFeatures: live preview, templates, theme switching, export PNG/JPG/SVG.\n\n```\nweb/\n├── text2echarts.html # English (default, lang toggle)\n├── app.js # Core logic (i18n via JSON)\n├── styles.css # Shared styles\n├── templates.js # Chart templates (CN/EN)\n└── lang/ # JSON language packs\n```\n\n## Key ECharts Options Reference\n\nRefer to these when constructing chart configurations. Official docs:\n\n| Option | What it does | Concrete example | Link |\n|--------|-------------|-----------------|------|\n| `title` | Chart title | `{\"text\":\"Sales\",\"left\":\"center\",\"textStyle\":{\"fontSize\":18}}` | [→ docs](https://echarts.apache.org/en/option.html#title) |\n| `grid` | Chart margins | `{\"left\":\"3%\",\"right\":\"4%\",\"bottom\":\"10%\",\"containLabel\":true}` — `containLabel` prevents axis labels from being clipped | [→ docs](https://echarts.apache.org/en/option.html#grid) |\n| `xAxis` | X axis | `{\"type\":\"category\",\"data\":[\"Jan\",\"Feb\"],\"axisLabel\":{\"rotate\":45}}` — `type` must be `category` or `value` | [→ docs](https://echarts.apache.org/en/option.html#xAxis) |\n| `yAxis` | Y axis | `{\"type\":\"value\",\"name\":\"Units\"}` — add `name` for axis label text | [→ docs](https://echarts.apache.org/en/option.html#yAxis) |\n| `series.type:'bar'` | Bar chart | `{\"type\":\"bar\",\"data\":[30,80],\"itemStyle\":{\"borderRadius\":[4,4,0,0]},\"label\":{\"show\":true,\"position\":\"top\"}}` | [→ docs](https://echarts.apache.org/en/option.html#series-bar) |\n| `series.type:'line'` | Line chart | `{\"type\":\"line\",\"data\":[22,25,23],\"smooth\":true,\"areaStyle\":{\"opacity\":0.1},\"lineStyle\":{\"width\":3,\"shadowBlur\":10}}` | [→ docs](https://echarts.apache.org/en/option.html#series-line) |\n| `series.type:'pie'` | Pie/donut | `{\"type\":\"pie\",\"radius\":[\"40%\",\"70%\"],\"data\":[{\"value\":48,\"name\":\"A\"}],\"label\":{\"formatter\":\"{b}\\\n{d}%\"},\"emphasis\":{\"label\":{\"fontSize\":16}}}` | [→ docs](https://echarts.apache.org/en/option.html#series-pie) |\n| `series.type:'scatter'` | Scatter | `{\"type\":\"scatter\",\"data\":[[160,55],[170,65]],\"symbolSize\":12}` | [→ docs](https://echarts.apache.org/en/option.html#series-scatter) |\n| `series.type:'radar'` | Radar | `{\"type\":\"radar\",\"data\":[{\"value\":[90,75],\"name\":\"Score\"}]}` + `radar.indicator` | [→ docs](https://echarts.apache.org/en/option.html#series-radar) |\n| `tooltip` | Hover info | `{\"trigger\":\"axis\"}` for bar/line (axis-level), `{\"trigger\":\"item\",\"formatter\":\"{b}:{c}\"}` for pie | [→ docs](https://echarts.apache.org/en/option.html#tooltip) |\n| `legend` | Series names | `{\"data\":[\"Sales\",\"Profit\"],\"bottom\":\"0\"}` — `data` must match series `name` | [→ docs](https://echarts.apache.org/en/option.html#legend) |\n| `color` | Color palette | `[\"#5470c6\",\"#91cc75\",\"#fac858\",\"#ee6666\",\"#73c0de\"]` — ECharts default 5-color palette | [→ docs](https://echarts.apache.org/en/option.html#color) |\n| `label` | Data labels | `{\"show\":true,\"position\":\"top\",\"formatter\":\"{c}\",\"fontSize\":14}` — `position`: top/inside/outside/bottom | [→ docs](https://echarts.apache.org/en/option.html#series-bar.label) |\n| `emphasis` | Highlight state | `{\"label\":{\"fontSize\":16,\"fontWeight\":\"bold\"}}` — triggered on hover | [→ docs](https://echarts.apache.org/en/option.html#series-pie.emphasis) |\n| `smooth` | Curve lines | `true` for curved line chart, `false` (default) for polyline | [→ docs](https://echarts.apache.org/en/option.html#series-line.smooth) |\n| `itemStyle.borderRadius` | Rounded bars | `[4,4,0,0]` — top-left, top-right, bottom-right, bottom-left | [→ docs](https://echarts.apache.org/en/option.html#series-bar.itemStyle) |\n| `axisLabel.rotate` | Rotate X labels | `45` degrees — useful when labels overlap (10+ categories) | [→ docs](https://echarts.apache.org/en/option.html#xAxis.axisLabel) |\n\nSee also: `references/echarts-option-reference.md` (EN) and `references/echarts-option-zh.md` (CN)\n\n## Common Issues\n\n| Problem | Cause | Fix |\n|---------|-------|-----|\n| Blank chart | CDN blocked or no internet | Use `--embed` flag for local libs (~1MB) |\n| SVG not rendering | Old browser version | Chrome/Firefox 2020+ required |\n| Wordcloud missing | Missing wordcloud extension | Included in `--embed` mode; CDN auto-loads |\n| Chinese garbled | File saved in wrong encoding | Save as UTF-8; `--embed` embeds correct charset |\n| CLI not found | Node.js not installed | Install from nodejs.org |\n| Screenshot fails | Playwright not installed | `npm install playwright && npx playwright install chromium`, or use `--svg-output` for vector format |\n\n## Verification\n\nAfter generating a chart:\n\n1. Open the .html file in a browser\n2. Confirm chart canvas/SVG renders\n3. Hover over data points — tooltip should appear\n4. Resize browser — chart should adapt\n5. Test with `--theme` to confirm theme switching\n\n## Other Advanced Capabilities\n\n### 1. Multi-Pattern Generation\n\nThe 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.\n\n**Bar Chart with multiple styles and palettes:**\n\nPrompt: *\"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)\"*\n\n**Word Cloud with multiple shapes and palettes:**\n\nPrompt: *\"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\"*\n\n### 2. Full ECharts Series Support\n\nThis 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:\n\n**Additional Series Types:**\n- **Candlestick** — financial OHLC (Open-High-Low-Close) charts, also known as K-line charts\n- **Boxplot** — statistical distribution visualization with quartiles and outliers\n- **Heatmap** — matrix-based heatmap and calendar heatmap\n- **Treemap** — hierarchical data displayed as nested rectangles\n- **Sunburst** — multi-level radial hierarchy chart\n- **Sankey** — flow diagrams for energy, budget, traffic, etc.\n- **Funnel** — conversion funnel for marketing and sales analytics\n- **Gauge** — dashboard-style speedometer gauges\n- **Graph** — force-directed node-edge network graphs\n- **Tree** — tree diagrams (left-to-right, top-to-bottom, radial)\n- **PictorialBar** — bars rendered using SVG symbols or icons\n- **ThemeRiver** — streamgraph / ribbon-style time series\n- **Lines** — flight/migration path lines (typically used with maps)\n- **EffectScatter** — scatter plot with ripple animation effects\n- **Map** — geo-map charts with region shading\n\n**Additional Components & Extensions:**\n- **Parallel** — parallel coordinates for multi-dimensional data\n- **Custom** — fully custom renderers via callback functions\n- **dataZoom** — interactive scrollable/zoomable axis (slider + inside)\n- **visualMap** — continuous or piecewise color mapping component\n- **brush** — rectangular/polygon region selection tool\n- **timeline** — animated time playback between chart states\n- **dataset** — declarative data transform pipeline (filter, sort, aggregate)\n- **markLine / markArea / markPoint** — annotation markers on series\n- **aria** — accessibility labels and descriptions\n- **3D Charts** — via echarts-gl extension: scatter3D, bar3D, surface, globe, lines3D\n\nFile v2.3.10:assets/README.md\n\n# Assets Directory\n\nScreenshot images (bar-chart.jpg, help-screen.jpg, pie-chart.jpg, wordcloud.jpg)\nare embedded as base64 data URIs in the project [README.md](../README.md).\n\nThis is necessary because ClawHub blocks binary image file uploads (.jpg, .png)\nat the server level — `.clawhubignore` negation patterns cannot override this filter.\n\nFile v2.3.10:_meta.json\n\n{\n \"ownerId\": \"kn763gq5kg4zre2btdb6rwgrwx88bwgs\",\n \"slug\": \"text2echart\",\n \"version\": \"2.3.10\",\n \"publishedAt\": 1781798670592\n}\n\nFile v2.3.10:references/echarts-option-reference.md\n\nOption API GL Tutorial\nsetOption({\nCollapse All\ntitle: {...} ,\nlegend: {...} ,\ngrid: {...} ,\nxAxis: {...} ,\nyAxis: {...} ,\npolar: {...} ,\nradiusAxis: {...} ,\nangleAxis: {...} ,\nradar: {...} ,\ndataZoom: [{...}] ,\nvisualMap: [{...}] ,\ntooltip: {...} ,\naxisPointer: {...} ,\ntoolbox: {...} ,\nbrush: {...} ,\ngeo: {...} ,\nparallel: {...} ,\nparallelAxis: {...} ,\nsingleAxis: {...} ,\ntimeline: {...} ,\ngraphic: {...} ,\ncalendar: {...} ,\nmatrix: {...} ,\nthumbnail: {...} ,\ndataset: {...} ,\naria: {...} ,\nseries: [{...}] ,\ndarkMode ... ,\ncolor ... ,\nbackgroundColor ... ,\ntextStyle: {...} ,\nanimation: true ,\nanimationThreshold: 2000 ,\nanimationDuration: 1000 ,\nanimationEasing: 'cubicOut' ,\nanimationDelay: 0 ,\nanimationDurationUpdate: 300 ,\nanimationEasingUpdate: 'cubicOut' ,\nanimationDelayUpdate: 0 ,\nstateAnimation: {...} ,\nblendMode: 'source-over' ,\nhoverLayerThreshold: 3000 ,\nuseUTC: false ,\nrichInheritPlainLabel: true ,\noptions ... ,\nmedia: [{...}] ,\ntitle\n\nTitle component, including main title and subtitle.\n\nIn ECharts 2.x, a single instance of ECharts could contains one title component at most. However, in ECharts 3, there could be one or more than one title components. It is more useful when multiple diagrams in one instance all need titles.\n\nHere are some instances of different animation easing functions, among which every instance has a title component:\n\nProperties\ntitle. id\nstring\n\nComponent ID, not specified by default. If specified, it can be used to refer the component in option or API.\n\ntitle. show = true\n Try It\nboolean\n\nSet this to false to prevent the title from showing\n\ntitle. text = ''\n Try It\nstring\n\nThe main title text, supporting for \\n for newlines.\n\n[WARNING]: When enabling toolbox.feature.saveAsImage, and toolbox.feature.saveAsImage.name is not provided, it has historically been using title[0].text instead. This usage is not recommended -- toolbox.feature.saveAsImage.name should always be specified explicitly; otherwise, correctness and security risks for a filename have to be considered in this title.text option. See document \"Security Guidelines\" for recommendations on safe usage.\ntitle. link = ''\nstring\n\nThe hyper link of main title text.\n\n[WARNING]: This URL string is accepted directly without any internal sanitization. Security risks must be considered if it comes from untrusted sources. See document \"Security Guidelines\" for recommendations on safe usage.\ntitle. target = 'blank'\nstring\n\nOpen the hyper link of main title in specified tab.\n\noptions:\n\n'self' opening it in current tab\n\n'blank' opening it in a new tab\n\n title. textStyle\nObject\n title.textStyle. color = '#333'\n Try It\nColor\n\nmain title text color.\n\n title.textStyle. fontStyle = 'normal'\n Try It\nstring\n\nmain title font style.\n\nOptions are:\n\n'normal'\n'italic'\n'oblique'\n title.textStyle. fontWeight = 'bolder'\n Try It\nstringnumber\n\nmain title font thick weight.\n\nOptions are:\n\n'normal'\n'bold'\n'bolder'\n'lighter'\n100 | 200 | 300 | 400...\n title.textStyle. fontFamily = 'sans-serif'\n Try It\nstring\n\nmain title font family.\n\nCan also be 'serif' , 'monospace', ...\n\n title.textStyle. fontSize = 18\n Try It\nnumber\n\nmain title font size.\n\n title.textStyle. lineHeight\n Try It\nnumber\n\nLine height of the text fragment.\n\nIf lineHeight is not set in rich, lineHeight in parent level will be used. For example:\n\n{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n\n title.textStyle. width\n Try It\nnumber\n\nWidth of text block.\n\n title.textStyle. height\n Try It\nnumber\n\nHeight of text block.\n\n title.textStyle. textBorderColor\n Try It\nColor\n\nStroke color of the text.\n\n title.textStyle. textBorderWidth\n Try It\nnumber\n\nStroke line width of the text.\n\n title.textStyle. textBorderType = 'solid'\n Try It\nstringnumberArray\n\nStroke line type of the text.\n\nPossible values are:\n\n'solid'\n'dashed'\n'dotted'\n\nSince v5.0.0, it can also be a number or a number array to specify the dash array of the line. With textBorderDashOffset , we can make the line style more flexible.\n\nFor example：\n\n{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n\n title.textStyle. textBorderDashOffset = 0\n Try It\nnumber\nSince v5.0.0\n\nTo set the line dash offset. With textBorderType , we can make the line style more flexible.\n\nRefer to MDN lineDashOffset for more details.\n\n title.textStyle. textShadowColor = 'transparent'\n Try It\nColor\n\nShadow color of the text itself.\n\n title.textStyle. textShadowBlur = 0\n Try It\nnumber\n\nShadow blue of the text itself.\n\n title.textStyle. textShadowOffsetX = 0\n Try It\nnumber\n\nShadow X offset of the text itself.\n\n title.textStyle. textShadowOffsetY = 0\n Try It\nnumber\n\nShadow Y offset of the text itself.\n\n title.textStyle. overflow = 'none'\n Try It\nstring\n\nDetermine how to display the text when it's overflow. Available when width is set.\n\n'truncate' Truncate the text and trailing with ellipsis.\n'break' Break by word\n'breakAll' Break by character.\n title.textStyle. ellipsis = '...'\nstring\n\nEllipsis to be displayed when overflow is set to truncate.\n\n'truncate' Truncate the overflow lines.\n title.textStyle. rich\nObject\n\n\"Rich text styles\" can be defined in this rich property. For example:\n\nlabel: {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style \"a\" is applied to this snippet}'\n '{b|Style \"b\" is applied to this snippet}This snippet use default style{x|use style \"x\"}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n\n\nFor more details, see Rich Text please.\n\nProperties\n{ }\n title.textStyle. richInheritPlainLabel = true\nboolean\nSince v6.0.0\n\nWhether rich text inherits plain text style.\n\nThis option is just for backward compatibility.\n\nThe label.rich / textStyle.rich fontStyle, fontWeight, fontSize, fontFamily, textShadowColor, textShadowBlur, textShadowOffsetX, textShadowOffsetY are changed to inherit the corresponding plain label styles since echarts v6. You can use richInheritPlainLabel: false to restore it. For example,\n\noption = {\n richInheritPlainLabel: false, // In most cases, this is enough.\n xxx1: {\n // Can also set it here to only control this label.\n label: {\n richInheritPlainLabel: false,\n rich: {/* ... */},\n }\n },\n xxx2: {\n textStyle: {\n richInheritPlainLabel: false,\n rich: {/* ... */},\n }\n }\n}\n\ntitle. subtext = ''\n Try It\nstring\n\nSubtitle text, supporting for \\n for newlines.\n\ntitle. sublink = ''\nstring\n\nThe hyper link of subtitle text.\n\n[WARNING]: This URL string is accepted directly without any internal sanitization. Security risks must be considered if it comes from untrusted sources. See document \"Security Guidelines\" for recommendations on safe usage.\ntitle. subtarget = 'blank'\nstring\n\nOpen the hyper link of subtitle in specified tab, options:\n\n'self' opening it in current tab\n\n'blank' opening it in a new tab\n\n title. subtextStyle\nObject\n title.subtextStyle. color = '#aaa'\n Try It\nColor\n\nsubtitle text color.\n\n title.subtextStyle. fontStyle = 'normal'\n Try It\nstring\n\nsubtitle font style.\n\nOptions are:\n\n'normal'\n'italic'\n'oblique'\n title.subtextStyle. fontWeight = 'normal'\n Try It\nstringnumber\n\nsubtitle font thick weight.\n\nOptions are:\n\n'normal'\n'bold'\n'bolder'\n'lighter'\n100 | 200 | 300 | 400...\n title.subtextStyle. fontFamily = 'sans-serif'\n Try It\nstring\n\nsubtitle font family.\n\nCan also be 'serif' , 'monospace', ...\n\n title.subtextStyle. fontSize = 12\n Try It\nnumber\n\nsubtitle font size.\n\n title.subtextStyle. align\n Try It\nstring\n\nHorizontal alignment of text, automatic by default.\n\nOptions are:\n\n'left'\n'center'\n'right'\n\nIf align is not set in rich, align in parent level will be used. For example:\n\n{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n\n title.subtextStyle. verticalAlign\n Try It\nstring\n\nVertical alignment of text, automatic by default.\n\nOptions are:\n\n'top'\n'middle'\n'bottom'\n\nIf verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:\n\n{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n\n title.subtextStyle. lineHeight\n Try It\nnumber\n\nLine height of the text fragment.\n\nIf lineHeight is not set in rich, lineHeight in parent level will be used. For example:\n\n{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n\n title.subtextStyle. width\n Try It\nnumber\n\nWidth of text block.\n\n title.subtextStyle. height\n Try It\nnumber\n\nHeight of text block.\n\n title.subtextStyle. textBorderColor\n Try It\nColor\n\nStroke color of the text.\n\n title.subtextStyle. textBorderWidth\n Try It\nnumber\n\nStroke line width of the text.\n\n title.subtextStyle. textBorderType = 'solid'\n Try It\nstringnumberArray\n\nStroke line type of the text.\n\nPossible values are:\n\n'solid'\n'dashed'\n'dotted'\n\nSince v5.0.0, it can also be a number or a number array to specify the dash array of the line. With textBorderDashOffset , we can make the line style more flexible.\n\nFor example：\n\n{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n\n title.subtextStyle. textBorderDashOffset = 0\n Try It\nnumber\nSince v5.0.0\n\nTo set the line dash offset. With textBorderType , we can make the line style more flexible.\n\nRefer to MDN lineDashOffset for more details.\n\n title.subtextStyle. textShadowColor = 'transparent'\n Try It\nColor\n\nShadow color of the text itself.\n\n title.subtextStyle. textShadowBlur = 0\n Try It\nnumber\n\nShadow blue of the text itself.\n\n title.subtextStyle. textShadowOffsetX = 0\n Try It\nnumber\n\nShadow X offset of the text itself.\n\n title.subtextStyle. textShadowOffsetY = 0\n Try It\nnumber\n\nShadow Y offset of the text itself.\n\n title.subtextStyle. overflow = 'none'\n Try It\nstring\n\nDetermine how to display the text when it's overflow. Available when width is set.\n\n'truncate' Truncate the text and trailing with ellipsis.\n'break' Break by word\n'breakAll' Break by character.\n title.subtextStyle. ellipsis = '...'\nstring\n\nEllipsis to be displayed when overflow is set to truncate.\n\n'truncate' Truncate the overflow lines.\n title.subtextStyle. rich\nObject\n\n\"Rich text styles\" can be defined in this rich property. For example:\n\nlabel: {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style \"a\" is applied to this snippet}'\n '{b|Style \"b\" is applied to this snippet}This snippet use default style{x|use style \"x\"}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n\n\nFor more details, see Rich Text please.\n\nProperties\n{ }\n title.subtextStyle. richInheritPlainLabel = true\nboolean\nSince v6.0.0\n\nWhether rich text inherits plain text style.\n\nThis option is just for backward compatibility.\n\nThe label.rich / textStyle.rich fontStyle, fontWeight, fontSize, fontFamily, textShadowColor, textShadowBlur, textShadowOffsetX, textShadowOffsetY are changed to inherit the corresponding plain label styles since echarts v6. You can use richInheritPlainLabel: false to restore it. For example,\n\noption = {\n richInheritPlainLabel: false, // In most cases, this is enough.\n xxx1: {\n // Can also set it here to only control this label.\n label: {\n richInheritPlainLabel: false,\n rich: {/* ... */},\n }\n },\n xxx2: {\n textStyle: {\n richInheritPlainLabel: false,\n rich: {/* ... */},\n }\n }\n}\n\ntitle. textAlign = 'auto'\n Try It\nstring\n\nThe horizontal align of the component (including \"text\" and \"subtext\").\n\nOptional values: 'auto', 'left', 'right', 'center'.\n\ntitle. textVerticalAlign = 'auto'\n Try It\nstring\n\nThe vertical align of the component (including \"text\" and \"subtext\").\n\nOptional values: 'auto', 'top', 'bottom', 'middle'.\n\ntitle. triggerEvent = false\n Try It\nboolean\n\nWhether to enable to dispatch mouse/touch events to user-registered listeners (i.e., chart.on('xxx', function (event) {})).\n\nSupported mouse/touch events are 'click', 'dblclick', 'mouseover', 'mouseout', 'mousemove', 'mousedown', 'mouseup', 'globalout', 'contextmenu'. Note, both mouse and touch events are unified to the event type 'mouse{xxx}'.\n\nValues:\n\ntrue: Enable to trigger events. But dispatching also requires option silent to be falsy.\nfalse: Disable to trigger mouse/touch events, even if option silent is falsy.\n\nThe parameters of the event:\n\n{\n componentType: 'title';\n // The index of the title component (base on echarts option)\n componentIndex: number;\n}\n\ntitle. padding = 5\n Try It\nnumberArray\n\ntitle space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.\n\nExamples:\n\n// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n\ntitle. itemGap = 10\n Try It\nnumber\n\nThe gap between the main title and subtitle.\n\ntitle. zlevel = 0\nnumber\n\nzlevel value of all graphical elements in .\n\nzlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.\n\nCanvases with bigger zlevel will be placed on Canvases with smaller zlevel.\n\ntitle. z = 2\nnumber\n\nz value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.\n\nz has a lower priority to zlevel, and will not create new Canvas.\n\ntitle. left = 'auto'\n Try It\nstringnumber\n\nDistance between title component and the left side of the container.\n\nleft can be a pixel value like 20; it can also be a percentage value relative to the container width like '20%'; and it can also be 'left', 'center', or 'right'.\n\nIf the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.\n\ntitle. top = 'auto'\n Try It\nstringnumber\n\nDistance between title component and the top side of the container.\n\ntop can be a pixel value like 20; it can also be a percentage value relative to the container height like '20%'; and it can also be 'top', 'middle', or 'bottom'.\n\nIf the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.\n\ntitle. right = 'auto'\n Try It\nstringnumber\n\nDistance between title component and the right side of the container.\n\nright can be a pixel value like 20; it can also be a percentage value relative to the container width like '20%'.\n\nAdaptive by default.\n\ntitle. bottom = 'auto'\n Try It\nstringnumber\n\nDistance between title component and the bottom side of the container.\n\nbottom can be a pixel value like 20; it can also be a percentage value relative to the container height like '20%'.\n\nAdaptive by default.\n\ntitle. coordinateSystem = 'none'\nstring\nSince v6.0.0\n\nSpecifies another coordinate system component on which this title is laid out.\n\nOptions:\n\nnull/undefined/'none'\n\nNot laid out in any coordinate system; instead, laid out independently.\n\n'calendar'\n\nLay out based on a calendar coordinate system. When multiple calendar coordinate systems exist within an ECharts instance, the corresponding system should be specified using calendarIndex or calendarId.\n\n'matrix'\n\nLay out based on a matrix coordinate system. When multiple matrix coordinate systems exist within an ECharts instance, the corresponding system should be specified using matrixIndex or matrixId.\n\nSupport for series and component layout on coordinate systems:\n\nThe leftmost column lists the series and components that will be laid out (coordinate systems themselves are also components), and the topmost row lists the coordinate systems that can be laid out on.\n\n\tno coord sys\tgrid (cartesian2d)\tpolar\tgeo\tsingleAxis\tradar\tparallel\tcalendar\tmatrix\ngrid (cartesian2d)\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\npolar\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ngeo\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nsingleAxis\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ncalendar\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t❌\t❌\nmatrix\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t❌\t❌\nseries-line\t❌\t✅\t✅\t❌\t❌\t❌\t❌\t❌ (✅ if via another coord sys like grid)\t❌ (✅ if via another coord sys like grid)\nseries-bar\t❌\t✅\t✅\t❌\t❌\t❌\t❌\t❌ (✅ if via another coord sys like grid)\t❌ (✅ if via another coord sys like grid)\nseries-pie\t✅\t✅\t✅\t✅\t✅\t❌\t❌\t✅\t✅\nseries-scatter\t❌\t✅\t✅\t✅\t✅\t❌\t❌\t✅\t✅\nseries-effectScatter\t❌\t✅\t✅\t✅\t✅\t❌\t❌\t✅\t✅\nseries-radar\t❌\t❌\t❌\t❌\t❌\t✅\t❌\t❌ (✅ if via radar coord sys)\t❌ (✅ if via radar coord sys)\nseries-tree\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-treemap\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-sunburst\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-boxplot\t❌\t✅\t❌\t❌\t❌\t❌\t❌\t❌ (✅ if via another coord sys like grid)\t❌ (✅ if via another coord sys like grid)\nseries-candlestick\t❌\t✅\t❌\t❌\t❌\t❌\t❌\t❌ (✅ if via another coord sys like grid)\t❌ (✅ if via another coord sys like grid)\nseries-heatmap\t❌\t✅\t❌\t✅\t❌\t❌\t❌\t✅\t✅\nseries-map\t✅ (create a geo coord sys exclusively)\t❌\t❌\t✅\t❌\t❌\t❌\t✅\t✅\nseries-parallel\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t❌ (✅ if via parallel coord sys)\t❌ (✅ if via parallel coord sys)\nseries-lines\t❌\t✅\t✅\t✅\t✅\t❌\t❌\t❌ (✅ if via another coord sys like geo)\t❌ (✅ if via another coord sys like geo)\nseries-graph\t✅ (create a \"view\" coord sys exclusively)\t✅\t✅\t✅\t❌\t❌\t❌\t✅\t✅\nseries-sankey\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-funnel\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-gauge\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-pictorialBar\t❌\t✅\t✅\t❌\t❌\t❌\t❌\t❌ (✅ if via another coord sys like grid)\t❌ (✅ if via another coord sys like grid)\nseries-themeRiver\t❌\t❌\t❌\t❌\t✅\t❌\t❌\t❌ (✅ if via another coord sys like singleAxis)\t❌ (✅ if via another coord sys like singleAxis)\nseries-chord\t✅\t✅\t✅\t✅\t✅\t❌\t❌\t✅\t✅\ntitle\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nlegend\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ndataZoom\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nvisualMap\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ntoolbox\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ntimeline\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nthumbnail\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\n\nSee also title.coordinateSystemUsage.\n\ntitle. coordinateSystemUsage = 'box'\nstring\nSince v6.0.0\n\nSpecify how to lay out this title based on the specified coordinateSystem.\n\nIn most cases, there is no need to specify coordinateSystemUsage, unless the default behavior is unexpected.\n\nOptions:\n\n'data': (Not applicable in title)\n\nEach data item of a series (e.g., each series.data[i]) is laid out separately based on the specified coordinate system. Currently no non-series component supports coordinateSystemUsage: 'data'.\n\n'box':\n\nThe entire series or component is laid out as a whole based on the specified coordinate system - that is, the overall bounding rect or basic anchor point is calculated relative to the system.\n\nFor example, a grid component can be laid out in a matrix coordinate system or a calendar coordinate system, where its layout rectangle is calculated by the specified title.coords in that system. See example sparkline in matrix.\nFor example, a pie series or a chord series can be laid out in a geo coordinate system or a cartesian2d coordinate system, where the center is calculated by the specified series-pie.coords or series-pie.center in that system. See example pie in geo.\n\nSee also title.coordinateSystem.\n\ntitle. coord\nArraynumberstring\nSince v6.0.0\n\nWhen coordinateSystemUsage is 'box', coord is used as the input to the coordinate system and calculate the layout rectangle or anchor point.\n\nExamples: sparkline in matrix, grpah in matrix.\n\nNote: when coordinateSystemUsage is 'data', the input of coordinate system is series.data[i] rather than this coord.\n\nThe format this coord is defined by each coordinate system, and it's the same as the second parameter of chart.convertToPixel.\n\ntitle. calendarIndex = 0\nnumber\nSince v6.0.0\n\nThe index of the calendar coordinate system to base on. When mutiple calendar exist within an ECharts instance, use this to specify the corresponding calendar.\n\ntitle. calendarId = undefined\nnumber\nSince v6.0.0\n\nThe id of the calendar coordinate system to base on. When mutiple calendar exist within an ECharts instance, use this to specify the corresponding calendar.\n\ntitle. matrixIndex = 0\nnumber\nSince v6.0.0\n\nThe index of the matrix coordinate system to base on. When mutiple matrix exist within an ECharts instance, use this to specify the corresponding matrix.\n\ntitle. matrixId = undefined\nnumber\nSince v6.0.0\n\nThe id of the matrix coordinate system to base on. When mutiple matrix exist within an ECharts instance, use this to specify the corresponding matrix.\n\ntitle. backgroundColor = 'transparent'\n Try It\nColor\n\nBackground color of title, which is transparent by default.\n\nColor can be represented in RGB, for example 'rgb(128, 128, 128)'. RGBA can be used when you need alpha channel, for example 'rgba(128, 128, 128, 0.5)'. You may also use hexadecimal format, for example '#ccc'.\n\ntitle. borderColor = '#ccc'\n Try It\nColor\n\nBorder color of title. Support the same color format as backgroundColor.\n\ntitle. borderWidth = 1\n Try It\nnumber\n\nBorder width of title.\n\ntitle. borderRadius = 0\n Try It\nnumberArray\n\nThe radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.\n\nFor example:\n\nborderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n\ntitle. shadowBlur\n Try It\nnumber\n\nSize of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.\n\nFor example:\n\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n\n\nAttention: This property works only if show: true is configured and backgroundColor is defined other than transparent.\n\ntitle. shadowColor\n Try It\nColor\n\nShadow color. Support same format as color.\n\nAttention: This property works only if show: true configured.\n\ntitle. shadowOffsetX = 0\n Try It\nnumber\n\nOffset distance on the horizontal direction of shadow.\n\nAttention: This property works only if show: true configured.\n\ntitle. shadowOffsetY = 0\n Try It\nnumber\n\nOffset distance on the vertical direction of shadow.\n\nAttention: This property works only if show: true configured.\n\n Preview\n\nFile v2.3.10:references/echarts-option-zh.md\n\n配置项 API GL配置 教程\nsetOption({\n收起所有\ntitle: {...} ,\nlegend: {...} ,\ngrid: {...} ,\nxAxis: {...} ,\nyAxis: {...} ,\npolar: {...} ,\nradiusAxis: {...} ,\nangleAxis: {...} ,\nradar: {...} ,\ndataZoom: [{...}] ,\nvisualMap: [{...}] ,\ntooltip: {...} ,\naxisPointer: {...} ,\ntoolbox: {...} ,\nbrush: {...} ,\ngeo: {...} ,\nparallel: {...} ,\nparallelAxis: {...} ,\nsingleAxis: {...} ,\ntimeline: {...} ,\ngraphic: {...} ,\ncalendar: {...} ,\nmatrix: {...} ,\nthumbnail: {...} ,\ndataset: {...} ,\naria: {...} ,\nseries: [{...}] ,\ndarkMode ... ,\ncolor ... ,\nbackgroundColor: 'transparent' ,\ntextStyle: {...} ,\nanimation: true ,\nanimationThreshold: 2000 ,\nanimationDuration: 1000 ,\nanimationEasing: 'cubicOut' ,\nanimationDelay: 0 ,\nanimationDurationUpdate: 300 ,\nanimationEasingUpdate: 'cubicInOut' ,\nanimationDelayUpdate: 0 ,\nstateAnimation: {...} ,\nblendMode: 'source-over' ,\nhoverLayerThreshold: 3000 ,\nuseUTC: false ,\nrichInheritPlainLabel: true ,\noptions ... ,\nmedia: [{...}] ,\ntitle\n\n标题组件，包含主标题和副标题。\n\n在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件，这在需要标题进行排版，或者单个实例中的多个图表都需要标题时会比较有用。\n\n例如下面不同缓动函数效果的示例，每一个缓动效果图都带有一个标题组件：\n\n所有属性\ntitle. id\nstring\n\n组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。\n\ntitle. show = true\n 试一试\nboolean\n\n是否显示标题组件。\n\ntitle. text = ''\n 试一试\nstring\n\n主标题文本，支持使用 \\n 换行。\n\n[警告]: 如果使用了 toolbox.feature.saveAsImage，并且没有设置 toolbox.feature.saveAsImage.name，会用 title[0].text 替代。这种用法是历史实现但并不推荐，应该总是显式指定toolbox.feature.saveAsImage.name；否则，不得不考虑 title.text 是否是个正确的文件名，以及其 安全性。文档 “安全指南” 给出了安全使用建议。\ntitle. link = ''\nstring\n\n主标题文本超链接。\n\n[警告]: 此 URL 字符串直接被使用，并未在内部做其他净化处理（sanitization） 如果他们来自于“不受信任”的来源，必须考虑 安全风险。文档 “安全指南” 给出了安全使用建议。\ntitle. target = 'blank'\nstring\n\n指定窗口打开主标题超链接。\n\n可选：\n\n'self' 当前窗口打开\n\n'blank' 新窗口打开\n\n title. textStyle\nObject\n title.textStyle. color = '#333'\n 试一试\nColor\n\n主标题文字的颜色。\n\n title.textStyle. fontStyle = 'normal'\n 试一试\nstring\n\n主标题文字字体的风格。\n\n可选：\n\n'normal'\n'italic'\n'oblique'\n title.textStyle. fontWeight = 'bolder'\n 试一试\nstringnumber\n\n主标题文字字体的粗细。\n\n可选：\n\n'normal'\n'bold'\n'bolder'\n'lighter'\n100 | 200 | 300 | 400...\n title.textStyle. fontFamily = 'sans-serif'\n 试一试\nstring\n\n主标题文字的字体系列。\n\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...\n\n title.textStyle. fontSize = 18\n 试一试\nnumber\n\n主标题文字的字体大小。\n\n title.textStyle. lineHeight\n 试一试\nnumber\n\n行高。\n\nrich 中如果没有设置 lineHeight，则会取父层级的 lineHeight。例如：\n\n{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n\n title.textStyle. width\n 试一试\nnumber\n\n文本显示宽度。\n\n title.textStyle. height\n 试一试\nnumber\n\n文本显示高度。\n\n title.textStyle. textBorderColor\n 试一试\nColor\n\n文字本身的描边颜色。\n\n title.textStyle. textBorderWidth\n 试一试\nnumber\n\n文字本身的描边宽度。\n\n title.textStyle. textBorderType = 'solid'\n 试一试\nstringnumberArray\n\n文字本身的描边类型。\n\n可选：\n\n'solid'\n'dashed'\n'dotted'\n\n自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 textBorderDashOffset 可实现更灵活的虚线效果。\n\n例如：\n\n{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n\n title.textStyle. textBorderDashOffset = 0\n 试一试\nnumber\n从 v5.0.0 开始支持\n\n用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。\n\n更多详情可以参考 MDN lineDashOffset。\n\n title.textStyle. textShadowColor = 'transparent'\n 试一试\nColor\n\n文字本身的阴影颜色。\n\n title.textStyle. textShadowBlur = 0\n 试一试\nnumber\n\n文字本身的阴影长度。\n\n title.textStyle. textShadowOffsetX = 0\n 试一试\nnumber\n\n文字本身的阴影 X 偏移。\n\n title.textStyle. textShadowOffsetY = 0\n 试一试\nnumber\n\n文字本身的阴影 Y 偏移。\n\n title.textStyle. overflow = 'none'\n 试一试\nstring\n\n文字超出宽度是否截断或者换行。配置width时有效\n\n'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...\n'break' 换行\n'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行\n title.textStyle. ellipsis = '...'\nstring\n\n在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。\n\n title.textStyle. rich\nObject\n\n在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。\n\n例如：\n\nlabel: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n\n\n详情参见教程：富文本标签\n\n所有属性\n{ }\n title.textStyle. richInheritPlainLabel = true\nboolean\n从 v6.0.0 开始支持\n\n富文本样式是否继承普通文本样式。\n\n此配置项用于向历史兼容。\n\n从 v6 版本开始，富文本标签 (label.rich / textStyle.rich) 部分样式（fontStyle, fontWeight, fontSize, fontFamily, textShadowColor, textShadowBlur, textShadowOffsetX, textShadowOffsetY）默认继承 普通文本样式 (label / textStyle)。你可以设置 richInheritPlainLabel: false （可在最外层配置项或与同级文本样式配置项）来禁用此行为。\n\noption = {\n richInheritPlainLabel: false, // In most cases, this is enough.\n xxx1: {\n // Can also set it here to only control this label.\n label: {\n richInheritPlainLabel: false,\n rich: {/* ... */},\n }\n },\n xxx2: {\n textStyle: {\n richInheritPlainLabel: false,\n rich: {/* ... */},\n }\n }\n}\n\ntitle. subtext = ''\n 试一试\nstring\n\n副标题文本，支持使用 \\n 换行。\n\ntitle. sublink = ''\nstring\n\n副标题文本超链接。\n\n[警告]: 此 URL 字符串直接被使用，并未在内部做其他净化处理（sanitization） 如果他们来自于“不受信任”的来源，必须考虑 安全风险。文档 “安全指南” 给出了安全使用建议。\ntitle. subtarget = 'blank'\nstring\n\n指定窗口打开副标题超链接，可选：\n\n'self' 当前窗口打开\n\n'blank' 新窗口打开\n\n title. subtextStyle\nObject\n title.subtextStyle. color = '#aaa'\n 试一试\nColor\n\n副标题文字的颜色。\n\n title.subtextStyle. fontStyle = 'normal'\n 试一试\nstring\n\n副标题文字字体的风格。\n\n可选：\n\n'normal'\n'italic'\n'oblique'\n title.subtextStyle. fontWeight = 'normal'\n 试一试\nstringnumber\n\n副标题文字字体的粗细。\n\n可选：\n\n'normal'\n'bold'\n'bolder'\n'lighter'\n100 | 200 | 300 | 400...\n title.subtextStyle. fontFamily = 'sans-serif'\n 试一试\nstring\n\n副标题文字的字体系列。\n\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...\n\n title.subtextStyle. fontSize = 12\n 试一试\nnumber\n\n副标题文字的字体大小。\n\n title.subtextStyle. align\n 试一试\nstring\n\n文字水平对齐方式，默认自动。\n\n可选：\n\n'left'\n'center'\n'right'\n\nrich 中如果没有设置 align，则会取父层级的 align。例如：\n\n{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n\n title.subtextStyle. verticalAlign\n 试一试\nstring\n\n文字垂直对齐方式，默认自动。\n\n可选：\n\n'top'\n'middle'\n'bottom'\n\nrich 中如果没有设置 verticalAlign，则会取父层级的 verticalAlign。例如：\n\n{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n\n title.subtextStyle. lineHeight\n 试一试\nnumber\n\n行高。\n\nrich 中如果没有设置 lineHeight，则会取父层级的 lineHeight。例如：\n\n{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n\n title.subtextStyle. width\n 试一试\nnumber\n\n文本显示宽度。\n\n title.subtextStyle. height\n 试一试\nnumber\n\n文本显示高度。\n\n title.subtextStyle. textBorderColor\n 试一试\nColor\n\n文字本身的描边颜色。\n\n title.subtextStyle. textBorderWidth\n 试一试\nnumber\n\n文字本身的描边宽度。\n\n title.subtextStyle. textBorderType = 'solid'\n 试一试\nstringnumberArray\n\n文字本身的描边类型。\n\n可选：\n\n'solid'\n'dashed'\n'dotted'\n\n自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 textBorderDashOffset 可实现更灵活的虚线效果。\n\n例如：\n\n{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n\n title.subtextStyle. textBorderDashOffset = 0\n 试一试\nnumber\n从 v5.0.0 开始支持\n\n用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。\n\n更多详情可以参考 MDN lineDashOffset。\n\n title.subtextStyle. textShadowColor = 'transparent'\n 试一试\nColor\n\n文字本身的阴影颜色。\n\n title.subtextStyle. textShadowBlur = 0\n 试一试\nnumber\n\n文字本身的阴影长度。\n\n title.subtextStyle. textShadowOffsetX = 0\n 试一试\nnumber\n\n文字本身的阴影 X 偏移。\n\n title.subtextStyle. textShadowOffsetY = 0\n 试一试\nnumber\n\n文字本身的阴影 Y 偏移。\n\n title.subtextStyle. overflow = 'none'\n 试一试\nstring\n\n文字超出宽度是否截断或者换行。配置width时有效\n\n'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...\n'break' 换行\n'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行\n title.subtextStyle. ellipsis = '...'\nstring\n\n在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。\n\n title.subtextStyle. rich\nObject\n\n在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。\n\n例如：\n\nlabel: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n\n\n详情参见教程：富文本标签\n\n所有属性\n{ }\n title.subtextStyle. richInheritPlainLabel = true\nboolean\n从 v6.0.0 开始支持\n\n富文本样式是否继承普通文本样式。\n\n此配置项用于向历史兼容。\n\n从 v6 版本开始，富文本标签 (label.rich / textStyle.rich) 部分样式（fontStyle, fontWeight, fontSize, fontFamily, textShadowColor, textShadowBlur, textShadowOffsetX, textShadowOffsetY）默认继承 普通文本样式 (label / textStyle)。你可以设置 richInheritPlainLabel: false （可在最外层配置项或与同级文本样式配置项）来禁用此行为。\n\noption = {\n richInheritPlainLabel: false, // In most cases, this is enough.\n xxx1: {\n // Can also set it here to only control this label.\n label: {\n richInheritPlainLabel: false,\n rich: {/* ... */},\n }\n },\n xxx2: {\n textStyle: {\n richInheritPlainLabel: false,\n rich: {/* ... */},\n }\n }\n}\n\ntitle. textAlign = 'auto'\n 试一试\nstring\n\n整体（包括 text 和 subtext）的水平对齐。\n\n可选值：'auto'、'left'、'right'、'center'。\n\ntitle. textVerticalAlign = 'auto'\n 试一试\nstring\n\n整体（包括 text 和 subtext）的垂直对齐。\n\n可选值：'auto'、'top'、'bottom'、'middle'。\n\ntitle. triggerEvent = false\n 试一试\nboolean\n\n鼠标和触摸事件是否发送给开发者注册的监听器（chart.on('xxx', function (event) {})）。\n\n支持的鼠标和触摸事件为 'click'、'dblclick'、'mouseover'、'mouseout'、'mousemove'、'mousedown'、'mouseup'、'globalout'、'contextmenu'。注意，鼠标和触摸事件都统一使用名字 'mouse{xxx}'。\n\n可取值：\n\ntrue: 允许对外发送事件。但是它也需要 silent 配置项为 false 才能真正发送事件。\nfalse: 禁止对外发送事件，哪怕 silent 配置项为 false。\n\n事件对象的内容为：\n\n{\n componentType: 'title';\n // title 组件的 index（基于 echarts option）。\n componentIndex: number;\n}\n\ntitle. padding = 5\n 试一试\nnumberArray\n\n标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。\n\n使用示例：\n\n// 设置内边距为 5\npadding: 5\n// 设置上下的内边距为 5，左右的内边距为 10\npadding: [5, 10]\n// 分别设置四个方向的内边距\npadding: [\n 5, // 上\n 10, // 右\n 5, // 下\n 10, // 左\n]\n\ntitle. itemGap = 10\n 试一试\nnumber\n\n主副标题之间的间距。\n\ntitle. zlevel = 0\nnumber\n\n所有图形的 zlevel 值。\n\nzlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。\n\nzlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。\n\ntitle. z = 2\nnumber\n\n组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。\n\nz相比zlevel优先级更低，而且不会创建新的 Canvas。\n\ntitle. left = 'auto'\n 试一试\nstringnumber\n\n标题（title）组件离容器左侧的距离。\n\nleft 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器宽度的百分比，也可以是 'left', 'center', 'right'。\n\n如果 left 的值为 'left', 'center', 'right'，组件会根据相应的位置自动对齐。\n\ntitle. top = 'auto'\n 试一试\nstringnumber\n\n标题（title）组件离容器上侧的距离。\n\ntop 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高度的百分比，也可以是 'top', 'middle', 'bottom'。\n\n如果 top 的值为 'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。\n\ntitle. right = 'auto'\n 试一试\nstringnumber\n\n标题（title）组件离容器右侧的距离。\n\nright 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器宽度的百分比。\n\n默认自适应。\n\ntitle. bottom = 'auto'\n 试一试\nstringnumber\n\n标题（title）组件离容器下侧的距离。\n\nbottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高度的百分比。\n\n默认自适应。\n\ntitle. coordinateSystem = 'none'\nstring\n从 v6.0.0 开始支持\n\n指定另一个坐标系组件，本 title 布局在那个坐标系中。\n\n可选值：\n\nnull、undefined 或者 'none'\n\n不布局在任何坐标系中。自己独立完成布局。\n\n'calendar'\n\n布局在一个 日历坐标系 中。当一个 ECharts 实例中存在多个日历坐标系时，须通过 calendarIndex 或 calendarId 指定所使用的日历坐标系。\n\n'matrix'\n\n布局在一个 矩阵坐标系中。当一个 ECharts 实例中存在多个矩阵坐标系时，须通过 matrixIndex 或 matrixId 指定所使用的矩阵坐标系。\n\n下表总结了“某系列或组件是否支持布局在某坐标系上”：\n\n最左列列出了要布局的系列和组件（坐标系本身也是组件），最上行列出了所基于的坐标系。\n\n\tno coord sys\tgrid (cartesian2d)\tpolar\tgeo\tsingleAxis\tradar\tparallel\tcalendar\tmatrix\ngrid (cartesian2d)\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\npolar\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ngeo\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nsingleAxis\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ncalendar\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nmatrix\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-line\t❌\t✅\t✅\t❌\t❌\t❌\t❌\t❌ (✅ 如果通过其他坐标系，如 grid)\t❌ (✅ 如果通过其他坐标系，如 grid)\nseries-bar\t❌\t✅\t✅\t❌\t❌\t❌\t❌\t❌ (✅ 如果通过其他坐标系，如 grid)\t❌ (✅ 如果通过其他坐标系，如 grid)\nseries-pie\t✅\t✅\t✅\t✅\t✅\t❌\t❌\t✅\t✅\nseries-scatter\t❌\t✅\t✅\t✅\t✅\t❌\t❌\t✅\t✅\nseries-effectScatter\t❌\t✅\t✅\t✅\t✅\t❌\t❌\t✅\t✅\nseries-radar\t❌\t❌\t❌\t❌\t❌\t✅\t❌\t❌ (✅ 如果通过 radar 坐标系)\t❌ (✅ 如果通过 radar 坐标系)\nseries-tree\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-treemap\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-sunburst\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-boxplot\t❌\t✅\t❌\t❌\t❌\t❌\t❌\t❌ (✅ 如果通过其他坐标系，如 grid)\t❌ (✅ 如果通过其他坐标系，如 grid)\nseries-candlestick\t❌\t✅\t❌\t❌\t❌\t❌\t❌\t❌ (✅ 如果通过其他坐标系，如 grid)\t❌ (✅ 如果通过其他坐标系，如 grid)\nseries-heatmap\t❌\t✅\t❌\t✅\t❌\t❌\t❌\t✅\t✅\nseries-map\t✅ (create a geo coord sys exclusively)\t❌\t❌\t✅\t❌\t❌\t❌\t✅\t✅\nseries-parallel\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t❌ (✅ 如果通过 parallel 坐标系)\t❌ (✅ 如果通过 parallel 坐标系)\nseries-lines\t❌\t✅\t✅\t✅\t✅\t❌\t❌\t❌ (✅ 如果通过其他坐标系，如 geo)\t❌ (✅ 如果通过其他坐标系，如 geo)\nseries-graph\t✅ (create a \"view\" coord sys exclusively)\t✅\t✅\t✅\t❌\t❌\t❌\t✅\t✅\nseries-sankey\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-funnel\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-gauge\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nseries-pictorialBar\t❌\t✅\t✅\t❌\t❌\t❌\t❌\t❌ (✅ 如果通过其他坐标系，如 grid)\t❌ (✅ 如果通过其他坐标系，如 grid)\nseries-themeRiver\t❌\t❌\t❌\t❌\t✅\t❌\t❌\t❌ (✅ 如果通过其他坐标系，如 singleAxis)\t❌ (✅ 如果通过其他坐标系，如 singleAxis)\nseries-chord\t✅\t✅\t✅\t✅\t✅\t❌\t❌\t✅\t✅\ntitle\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nlegend\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ndataZoom\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nvisualMap\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ntoolbox\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\ntimeline\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\nthumbnail\t✅\t❌\t❌\t❌\t❌\t❌\t❌\t✅\t✅\n\n也参见 title.coordinateSystemUsage。\n\ntitle. coordinateSystemUsage = 'box'\nstring\n从 v6.0.0 开始支持\n\n如何在指定的 坐标系 上布局本 title。\n\n在大多数情况下，无需显式指定 coordinateSystemUsage，除非默认行为不符合预期。\n\n可选值：\n\n'data'：（不适用于 title）\n\n此系列的每个数据项（例如，每个 series.data[i]）将独立地在指定的坐标系进行布局。 注：当前没有任何“非系列组件”支持 coordinateSystemUsage: 'data'。\n\n'box'：\n\n此系列或组件作为一个整体，在指定的坐标系中进行布局——即根据坐标系计算整体的包围盒或基础锚点。\n\n例如，grid 组件 可以布局在 matrix 坐标系 或 calendar 坐标系 中，这时其布局矩形是由 title.coords 在坐标系中计算出来的。参见示例：矩阵中的微型折线图。\n又如，饼图系列 或 和弦图系列 可以布局在 geo 坐标系 或 cartesian2d 坐标系 中，这时其中心点是由 series-pie.coords 或 series-pie.center 在坐标系中计算出来的。参见示例：地理坐标系中的饼图。\n\n另参考：title.coordinateSystem。\n\ntitle. coord\nArraynumberstring\n从 v6.0.0 开始支持\n\n当 coordinateSystemUsage 为 'box' 时, coord 被输入给坐标系，计算得到布局位置（布局盒或者中心点）。\n\n例子：矩阵中的微型折线图, 矩阵中的关系图.\n\n注：当 coordinateSystemUsage 为 'data' 时，输入给坐标系的是 series.data[i] 而非此 coord。\n\ncoord 的具体格式定义，取决于每个坐标系，并且，和 chart.convertToPixel 的第二个参数相同。\n\ntitle. calendarIndex = 0\nnumber\n从 v6.0.0 开始支持\n\n布局时所基于的 日历坐标系 的 index。当一个 ECharts 实例中存在多个日历坐标系时，用其指定所使用的坐标系。\n\ntitle. calendarId = undefined\nnumber\n从 v6.0.0 开始支持\n\n布局时所基于的 日历坐标系 的 id。当一个 ECharts 实例中存在多个日历坐标系时，用其指定所使用的坐标系。\n\ntitle. matrixIndex = 0\nnumber\n从 v6.0.0 开始支持\n\n布局时所基于的 矩阵坐标系 的 index。当一个 ECharts 实例中存在多个矩阵坐标系时，用其指定所使用的坐标系。\n\ntitle. matrixId = undefined\nnumber\n从 v6.0.0 开始支持\n\n布局时所基于的 矩阵坐标系 的 id。当一个 ECharts 实例中存在多个矩阵坐标系时，用其指定所使用的坐标系。\n\ntitle. backgroundColor = 'transparent'\n 试一试\nColor\n\n标题背景色，默认透明。\n\n颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)' ，如果想要加上 alpha 通道，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'\n\ntitle. borderColor = '#ccc'\n 试一试\nColor\n\n标题的边框颜色。支持的颜色格式同 backgroundColor。\n\ntitle. borderWidth = 0\n 试一试\nnumber\n\n标题的边框线宽。\n\ntitle. borderRadius = 0\n 试一试\nnumberArray\n\n圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。 如:\n\nborderRadius: 5, // 统一设置四个角的圆角大小\nborderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）\n\ntitle. shadowBlur\n 试一试\nnumber\n\n图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。\n\n示例：\n\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n\n\n注意：此配置项生效的前提是，设置了 show: true 以及值不为 transparent 的背景色 backgroundColor。\n\ntitle. shadowColor\n 试一试\nColor\n\n阴影颜色。支持的格式同color。\n\n注意：此配置项生效的前提是，设置了 show: true。\n\ntitle. shadowOffsetX = 0\n 试一试\nnumber\n\n阴影水平方向上的偏移距离。\n\n注意：此配置项生效的前提是，设置了 show: true。\n\ntitle. shadowOffsetY = 0\n 试一试\nnumber\n\n阴影垂直方向上的偏移距离。\n\n注意：此配置项生效的前提是，设置了 show: true。\n\n 预览\n\nFile v2.3.10:references/echarts-wordcloud.md\n\n# echarts-wordcloud\n\nThird-party Wordcloud extension based on [wordcloud2.js](https://github.com/timdream/wordcloud2.js) for [Apache ECharts](https://github.com/apache/echarts).\n\n![](./example/word-cloud.png)\n\n## Examples\n\n[Google Trends](https://ecomfe.github.io/echarts-wordcloud/example/wordCloud.html)\n\n[ECharts Option Keywords](https://ecomfe.github.io/echarts-wordcloud/example/optionKeywords.html)\n\n## Install\n\n```html\n\n\n```\n\nOr\n\n```shell\nnpm install echarts\nnpm install echarts-wordcloud\n```\n\n```js\nimport * as echarts from 'echarts';\nimport 'echarts-wordcloud';\n```\n\n⚠️ NOTE:\n\necharts-wordcloud@2 is for echarts@5\n\necharts-wordcloud@1 is for echarts@4\n\n## Usage\n\n```js\nvar chart = echarts.init(document.getElementById('main'));\n\nchart.setOption({\n ...\n series: [{\n type: 'wordCloud',\n\n // The shape of the \"cloud\" to draw. Can be any polar equation represented as a\n // callback function, or a keyword present. Available presents are circle (default),\n // cardioid (apple or heart shape curve, the most known polar equation), diamond (\n // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.\n\n shape: 'circle',\n\n // Keep aspect ratio of maskImage or 1:1 for shapes\n // This option is supported since echarts-wordcloud@2.1.0\n keepAspect: false,\n\n // A silhouette image which the white area will be excluded from drawing texts.\n // The shape option will continue to apply as the shape of the cloud to grow.\n\n maskImage: maskImage,\n\n // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud\n // Default to be put in the center and has 75% x 80% size.\n\n left: 'center',\n top: 'center',\n width: '70%',\n height: '80%',\n right: null,\n bottom: null,\n\n // Text size range which the value in data will be mapped to.\n // Default to have minimum 12px and maximum 60px size.\n\n sizeRange: [12, 60],\n\n // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45\n\n rotationRange: [-90, 90],\n rotationStep: 45,\n\n // size of the grid in pixels for marking the availability of the canvas\n // the larger the grid size, the bigger the gap between words.\n\n gridSize: 8,\n\n // set to true to allow word to be drawn partly outside of the canvas.\n // Allow word bigger than the size of the canvas to be drawn\n // This option is supported since echarts-wordcloud@2.1.0\n drawOutOfBound: false,\n\n // if the font size is too large for the text to be displayed,\n // whether to shrink the text. If it is set to false, the text will\n // not be rendered. If it is set to true, the text will be shrinked.\n // This option is supported since echarts-wordcloud@2.1.0\n shrinkToFit: false,\n\n // If perform layout animation.\n // NOTE disable it will lead to UI blocking when there is lots of words.\n layoutAnimation: true,\n\n // Global text style\n textStyle: {\n fontFamily: 'sans-serif',\n fontWeight: 'bold',\n // Color can be a callback function or a color string\n color: function () {\n // Random color\n return 'rgb(' + [\n Math.round(Math.random() * 160),\n Math.round(Math.random() * 160),\n Math.round(Math.random() * 160)\n ].join(',') + ')';\n }\n },\n emphasis: {\n focus: 'self',\n\n textStyle: {\n textShadowBlur: 10,\n textShadowColor: '#333'\n }\n },\n\n // Data is an array. Each array item must have name and value property.\n data: [{\n name: 'Farrah Abraham',\n value: 366,\n // Style of single text\n textStyle: {\n }\n }]\n }]\n});\n```\n\n## Changelog\n\n### 2.1.0\n\n- [chore] Update Apache ECharts version\n- [chore] Sync with the latest wordcloud2.js and use prettier to format the code\n- [feature] Add `keepAspect` option to keep aspect ratio of maskImage or 1:1 for shapes\n- [feature] Add `drawOutOfBound` option to allow words to be drawn partly outside of the canvas\n- [feature] Add `shrinkToFit` option to shrink the text if the font size is too large for the text to be displayed\n\n## Notice\n\nThe Apache Software Foundation [Apache ECharts, ECharts](https://echarts.apache.org/), Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the [Apache Software Foundation](https://www.apache.org/).\n\nFile v2.3.10:references/echarts-zh-axisLabel.md\n\n# axisLabel - 坐标轴标签\nSource: https://echarts.apache.org/zh/option.html#xAxis.axisLabel\n\n坐标轴刻度标签的样式和格式。\n\n示例:\n```json\n{\"rotate\": 45, \"interval\": 0, \"fontSize\": 12}\n```\n\nrotate: 旋转角度，数据多时防重叠\ninterval: 显示间隔，0=全部显示\n\nFile v2.3.10:references/echarts-zh-color.md\n\n# color - 调色盘\nSource: https://echarts.apache.org/zh/option.html#color\n\n全局调色盘，系列自动按顺序取色。\n\n示例:\n```json\n[\"#5470c6\", \"#91cc75\", \"#fac858\", \"#ee6666\", \"#73c0de\"]\n```\n\n默认5色盘。系列超过5个时循环使用。\n\nFile v2.3.10:references/echarts-zh-emphasis.md\n\n# emphasis - 高亮状态\nSource: https://echarts.apache.org/zh/option.html#series-pie.emphasis\n\n鼠标悬停时的高亮样式。\n\n示例:\n```json\n{\"label\": {\"fontSize\": 16, \"fontWeight\": \"bold\"},\n \"itemStyle\": {\"shadowBlur\": 10}}\n```\n\n可配置 label / itemStyle / lineStyle\n\nFile v2.3.10:references/echarts-zh-grid.md\n\n# grid - 网格边距\nSource: https://echarts.apache.org/zh/option.html#grid\n\n直角坐标系内绘图网格，控制图表在容器中的位置和边距。\n\n示例:\n```json\n{\"left\": \"3%\", \"right\": \"4%\", \"bottom\": \"10%\", \"containLabel\": true}\n```\n\n⚠️ containLabel: true 防止轴标签被裁剪\n属性: left/right/top/bottom - 距离容器边界的距离\n\nFile v2.3.10:references/echarts-zh-label.md\n\n# label - 数据标签\nSource: https://echarts.apache.org/zh/option.html#series-bar.label\n\n在数据点上显示文本标签。\n\n示例:\n```json\n{\"show\": true, \"position\": \"top\", \"formatter\": \"{c}\", \"fontSize\": 14}\n```\n\nposition: top(柱顶) | inside(内部) | outside(饼图外部)\n\nFile v2.3.10:references/echarts-zh-legend.md\n\n# legend - 图例\nSource: https://echarts.apache.org/zh/option.html#legend\n\n图例组件，标识不同系列。\n\n示例:\n```json\n{\"data\": [\"销售额\", \"利润\"], \"bottom\": \"0\"}\n```\n\ndata: series 的 name 列表，必须匹配\nbottom: 位置\n\nArchive v2.3.9: 41 files, 773782 bytes\n\nFiles: cli.js (13414b), lib/echarts-5.6.min.js (1034102b), lib/echarts-theme-dark.js (5981b), lib/echarts-theme-infographic.js (5829b), lib/echarts-theme-macarons.js (5869b), lib/echarts-theme-roma.js (3044b), lib/echarts-theme-shine.js (4412b), lib/echarts-theme-vintage.js (1922b), lib/echarts-wordcloud-2.1.min.js (16552b), package.json (400b), prompt.md (11407b), README.md (578973b), references/echarts-option-reference.md (24157b), references/echarts-option-zh.md (24117b), references/echarts-wordcloud.md (4854b), references/echarts-zh-axisLabel.md (293b), references/echarts-zh-color.md (255b), references/echarts-zh-emphasis.md (277b), references/echarts-zh-grid.md (359b), references/echarts-zh-label.md (283b), references/echarts-zh-legend.md (243b), references/echarts-zh-series-bar.md (373b), references/echarts-zh-series-line.md (325b), references/echarts-zh-series-pie.md (450b), references/echarts-zh-series-radar.md (357b), references/echarts-zh-series-scatter.md (260b), references/echarts-zh-smooth.md (227b), references/echarts-zh-title.md (434b), references/echarts-zh-tooltip.md (303b), references/echarts-zh-xAxis.md (334b), references/echarts-zh-yAxis.md (221b), skill-card.md (2970b), SKILL.md (17363b), static/app.js (29242b), static/lang/en.json (971b), static/lang/zh.json (1052b), static/styles.css (6925b), static/templates-en.js (15288b), static/templates.js (15267b), text2echarts.html (10185b), _meta.json (130b)\n\nFile v2.3.9:SKILL.md\n\n---\nname: text2echart\nname-zh: Data to Chart\nprovider: openclaw\ndescription: >\n Chart generator skill. When triggered:\n - Default: CONSTRUCT ECharts option JSON and output HTML string directly and render by mermaid and support preview.\n - Image / vector (图片/矢量图): use CLI with --svg-output (or --svg --embed for offline).\n - Screenshot (截图): use CLI with --screenshot (needs Playwright).\n - Fine-tuning (微调/修改): open browser for interactive adjustment.\n Supports 6 chart types: bar, line, pie, scatter, radar, wordcloud (via JSON).\n Trigger words: chart, graph, visualize, plot, draw, wordcloud, vent draw图表, 画图, 可视化, 图片, 矢量图, 词云.\nmetadata:\n version: \"2.3.2\"\n launch: \"text2echarts.html\"\n trigger-keywords:\n - chart\n - graph\n - visualize\n - plot\n - make a chart\n - draw a graph\n - 图表\n - 画图\n - 可视化\n - 柱状图\n - 饼图\n - 图片\n - 矢量图\n - wordcloud\n - vent draw\n - 词云\n tags:\n - visualization\n - echarts\n - chart\n - data-viz\n - svg\n---\n\n# text2echart — Data to Chart\n\n## ⚡ Routing\n\ncase when: user asks for a chart / graph / visualization (default):\n - Construct ECharts option JSON\n - Output HTML string directly, render with ```html code block\n - Support preview by opening in browser or screenshot\n\n **Default route — direct HTML generation in chat.**\n Example prompt: *\"Give me a pie chart of browser market share — Chrome 65%, Safari 18%, Edge 8%, Firefox 5%, Other 4%\"*\n → The model outputs a complete HTML file with an interactive ECharts pie chart.\n\ncase when: user asks for an image / picture / vector graphic (图片/矢量图):\n - Use CLI with SVG output: `node cli.js data.json --svg-output -o chart.svg`\n - `--svg-output` extracts standalone .svg file (requires Playwright)\n - Add `--embed` to bundle ECharts lib for fully offline use\n - SVG is vector format — sharp at any resolution, ideal for documents\n - Also send PNG screenshot for instant preview\n\ncase when: user asks for a screenshot / snapshot (截图):\n - Use CLI with screenshot: `node cli.js data.json --screenshot -o chart.png`\n - This generates high-quality raster PNG via Playwright\n - If Playwright is not installed, falls back with clear error + install instructions\n\ncase when: user wants to fine-tune / adjust / modify the chart (微调/修改):\n - Open browser: `node cli.js data.json --open`\n - Or open the generated HTML directly for interactive editing\n\ncase when: user asks to save to file / run locally:\n - Use CLI: `node cli.js data.json -o chart.html` (CDN mode, ~1KB)\n - For offline use: add `--embed` (~1MB)\n - Can combine with --open or --screenshot\n\ncase when: user asks for word cloud (词云):\n - Need word frequency data first (分词 + 词频统计)\n - Generate ECharts wordcloud option JSON with type:'wordCloud'\n - Then follow image/vector or html/web route based on output format request\n - Point to `text2echarts.html`\n - Open in browser, use templates and export\n\n---\n\n## Output Format\n\n```html\n...echarts CDN...
\n```\n\n---\n\n## Overview\n\nGenerate ECharts SVG charts from JSON/CSV. Two entry points:\n\n**Web App**: Open `text2echarts.html` in browser for interactive GUI with templates, live preview, theme switching, and PNG/JPG/SVG export.\n\n**CLI**: `node cli.js` for scripted/batch generation.\n\n## When to Use / When Not to Use\n\n| Scenario | Use text2echart? |\n|----------|-----------------|\n| \"Make a bar chart from this CSV\" | ✅ Best fit |\n| \"Visualize my sales data\" | ✅ Natural language input works |\n| \"Compare trends across months\" | ✅ Line chart, multi-series |\n| \"Show market share distribution\" | ✅ Pie chart with % labels |\n| \"I need an interactive chart dashboard\" | ⚠️ Open text2echarts.html instead |\n| \"Animate this chart frame by frame\" | ❌ ECharts not designed for animation frames |\n| \"Generate 100 charts in batch\" | ✅ Use CLI: `for f in *.csv; do node cli.js \\$f; done` |\n| \"Real-time streaming data\" | ❌ Use ECharts live update API directly |\n\n## Quick Start\n\n```bash\n# Web App — open interactive GUI\nopen text2echarts.html\n\n# CLI — CSV → chart\nnode cli.js data.csv --open\n\n# CLI — JSON → SVG\nnode cli.js chart.json -o report.html\n```\n\n## Supported Inputs\n\n| Format | Example | Auto-detected |\n|--------|---------|---------------|\n| **CSV** | `Month,Sales\\nJan,1200\\nFeb,900` | ✅ yes (comma in first line) |\n| **JSON** | `{\"series\":[{\"type\":\"bar\",\"data\":[30,80]}]}` | ✅ yes (starts with `{`) |\n| **JSON (simple)** | `{\"type\":\"bar\",\"data\":[{\"name\":\"A\",\"value\":30}]}` | ✅ yes |\n| **Stdin pipe** | `cat data.csv \\| node cli.js -` | ✅ use `-` |\n\n## CLI Reference\n\n```bash\nnode cli.js [options]\n\nOptions:\n -o, --out Output file name\n --type Chart type for CSV: bar|line|pie|radar|wordcloud\n --theme dark|infographic|macarons|roma|shine|vintage\n --width / --height Chart dimensions\n --svg SVG renderer (default)\n --svg-output Output standalone .svg file (needs Playwright)\n --screenshot Output PNG screenshot (needs Playwright)\n --open Open in browser after generation\n --cdn Use CDN for ECharts lib (default)\n --embed Embed ECharts lib for offline (~1MB)\n --slide 960x540 PPT slide mode\n```\n\n## Chart Types\n\n| Type | CSV columns | Auto features |\n|------|-------------|---------------|\n| bar | col1=labels, col2+=values | Rounded corners, top labels |\n| line | col1=labels, col2+=values | Smooth curves, area fill |\n| pie | col1=name, col2=value | Donut chart, % labels |\n| scatter | col1=x, col2=y | Bubble symbols |\n| radar | col1=dimension, col2+=values | Polygon shape |\n| wordcloud | col1=word, col2=frequency | Diamond shape |\n\n## Themes\n\n| Theme | Style | Background |\n|-------|-------|------------|\n| dark | Tech, deep blue | #1a1a2e |\n| infographic | Clean report | #f5f5f5 |\n| macarons | Soft, business | #f5f5f5 |\n| vintage | Nostalgic | #f5f5f5 |\n| shine | Bright, vivid | #f5f5f5 |\n| roma | Professional | #f5f5f5 |\n\n## Few-Shot Examples\n\n### 1. CSV → Bar Chart\n\nUser: *\"Chart these monthly sales\"*\n\n```csv\nMonth,Sales\nJan,1200\nFeb,900\nMar,1600\n```\n\n→ CLI auto-detects CSV, generates bar chart with labels, tooltips, rounded corners.\n\n### 2. JSON → Pie with Percentages\n\n```json\n{\n \"series\": [{\n \"type\": \"pie\",\n \"radius\": [\"40%\", \"70%\"],\n \"data\": [\n {\"value\": 48, \"name\": \"Chrome\"},\n {\"value\": 22, \"name\": \"Firefox\"},\n {\"value\": 18, \"name\": \"Safari\"}\n ],\n \"label\": {\"formatter\": \"{b}\\n{d}%\"}\n }],\n \"title\": {\"text\": \"Market Share\"}\n}\n```\n\n### 3. CSV → Multi-series Line\n\n```csv\nDate,Revenue,Cost\nJan,1200,800\nFeb,1500,900\nMar,1800,1100\n```\n\n`node cli.js data.csv --type line --theme dark --open`\n\n## Architecture\n\n```\nInput (JSON/CSV)\n → cli.js parses & converts to ECharts option\n → Option JSON injected into HTML template\n → echarts.init(dom, theme, {renderer:\"svg\"})\n → Output: self-contained .html with CDN references (~1KB)\n → --embed flag: inline ECharts lib (~1MB, offline)\n → --screenshot flag: PNG via Playwright\n → --svg-output flag: standalone SVG via Playwright\n```\n\n## Dependencies\n\n- **CLI**: Node.js only (stdlib, no npm packages)\n- **Runtime**: Internet for ECharts CDN (or `--embed` for offline)\n- **Zero npm install required**\n\n## References\n\n| File | Content |\n|------|---------|\n| `prompt.md` | Prompt engineering guide: core pattern, chain-of-thought, 3 few-shot examples, 16 option references, end-user template |\n| `references/echarts-option-reference.md` | Full ECharts option API (EN, from official site) |\n| `references/echarts-option-zh.md` | Full ECharts option API (中文) |\n| `references/echarts-wordcloud.md` | Wordcloud extension docs |\n| `references/echarts-zh-title.md` | title 选项详细说明 |\n| `references/echarts-zh-grid.md` | grid 选项详细说明 |\n| `references/echarts-zh-xAxis.md` | xAxis 选项详细说明 |\n| `references/echarts-zh-yAxis.md` | yAxis 选项详细说明 |\n| `references/echarts-zh-series-bar.md` | series.bar 柱状图配置 |\n| `references/echarts-zh-series-line.md` | series.line 折线图配置 |\n| `references/echarts-zh-series-pie.md` | series.pie 饼图配置 |\n| `references/echarts-zh-series-scatter.md` | series.scatter 散点图 |\n| `references/echarts-zh-series-radar.md` | series.radar 雷达图 |\n| `references/echarts-zh-tooltip.md` | tooltip 提示框配置 |\n| `references/echarts-zh-legend.md` | legend 图例配置 |\n| `references/echarts-zh-color.md` | color 调色盘 |\n| `references/echarts-zh-label.md` | label 数据标签 |\n| `references/echarts-zh-emphasis.md` | emphasis 高亮状态 |\n| `references/echarts-zh-smooth.md` | smooth 平滑曲线 |\n| `references/echarts-zh-axisLabel.md` | axisLabel 坐标轴标签 |\n\n## Prompt Guide\n\nFor LLM-based chart generation, see `prompt.md` — a complete prompt engineering guide with:\n- Core prompt pattern for ECharts option generation\n- Chain-of-thought reasoning for chart type selection\n- 3 Few-Shot examples (bar, pie, line)\n- 16 detailed option references with JSON examples\n- Common mistakes checklist\n- Copyable end-user prompt template\n\n## Interactive Web App\n\nFor a full GUI experience, open `text2echarts.html` in your browser.\nFeatures: live preview, templates, theme switching, export PNG/JPG/SVG.\n\n```\nweb/\n├── text2echarts.html # English (default, lang toggle)\n├── app.js # Core logic (i18n via JSON)\n├── styles.css # Shared styles\n├── templates.js # Chart templates (CN/EN)\n└── lang/ # JSON language packs\n```\n\n## Key ECharts Options Reference\n\nRefer to these when constructing chart configurations. Official docs:\n\n| Option | What it does | Concrete example | Link |\n|--------|-------------|-----------------|------|\n| `title` | Chart title | `{\"text\":\"Sales\",\"left\":\"center\",\"textStyle\":{\"fontSize\":18}}` | [→ docs](https://echarts.apache.org/en/option.html#title) |\n| `grid` | Chart margins | `{\"left\":\"3%\",\"right\":\"4%\",\"bottom\":\"10%\",\"containLabel\":true}` — `containLabel` prevents axis labels from being clipped | [→ docs](https://echarts.apache.org/en/option.html#grid) |\n| `xAxis` | X axis | `{\"type\":\"category\",\"data\":[\"Jan\",\"Feb\"],\"axisLabel\":{\"rotate\":45}}` — `type` must be `category` or `value` | [→ docs](https://echarts.apache.org/en/option.html#xAxis) |\n| `yAxis` | Y axis | `{\"type\":\"value\",\"name\":\"Units\"}` — add `name` for axis label text | [→ docs](https://echarts.apache.org/en/option.html#yAxis) |\n| `series.type:'bar'` | Bar chart | `{\"type\":\"bar\",\"data\":[30,80],\"itemStyle\":{\"borderRadius\":[4,4,0,0]},\"label\":{\"show\":true,\"position\":\"top\"}}` | [→ docs](https://echarts.apache.org/en/option.html#series-bar) |\n| `series.type:'line'` | Line chart | `{\"type\":\"line\",\"data\":[22,25,23],\"smooth\":true,\"areaStyle\":{\"opacity\":0.1},\"lineStyle\":{\"width\":3,\"shadowBlur\":10}}` | [→ docs](https://echarts.apache.org/en/option.html#series-line) |\n| `series.type:'pie'` | Pie/donut | `{\"type\":\"pie\",\"radius\":[\"40%\",\"70%\"],\"data\":[{\"value\":48,\"name\":\"A\"}],\"label\":{\"formatter\":\"{b}\\\n{d}%\"},\"emphasis\":{\"label\":{\"fontSize\":16}}}` | [→ docs](https://echarts.apache.org/en/option.html#series-pie) |\n| `series.type:'scatter'` | Scatter | `{\"type\":\"scatter\",\"data\":[[160,55],[170,65]],\"symbolSize\":12}` | [→ docs](https://echarts.apache.org/en/option.html#series-scatter) |\n| `series.type:'radar'` | Radar | `{\"type\":\"radar\",\"data\":[{\"value\":[90,75],\"name\":\"Score\"}]}` + `radar.indicator` | [→ docs](https://echarts.apache.org/en/option.html#series-radar) |\n| `tooltip` | Hover info | `{\"trigger\":\"axis\"}` for bar/line (axis-level), `{\"trigger\":\"item\",\"formatter\":\"{b}:{c}\"}` for pie | [→ docs](https://echarts.apache.org/en/option.html#tooltip) |\n| `legend` | Series names | `{\"data\":[\"Sales\",\"Profit\"],\"bottom\":\"0\"}` — `data` must match series `name` | [→ docs](https://echarts.apache.org/en/option.html#legend) |\n| `color` | Color palette | `[\"#5470c6\",\"#91cc75\",\"#fac858\",\"#ee6666\",\"#73c0de\"]` — ECharts default 5-color palette | [→ docs](https://echarts.apache.org/en/option.html#color) |\n| `label` | Data labels | `{\"show\":true,\"position\":\"top\",\"formatter\":\"{c}\",\"fontSize\":14}` — `position`: top/inside/outside/bottom | [→ docs](https://echarts.apache.org/en/option.html#series-bar.label) |\n| `emphasis` | Highlight state | `{\"label\":{\"fontSize\":16,\"fontWeight\":\"bold\"}}` — triggered on hover | [→ docs](https://echarts.apache.org/en/option.html#series-pie.emphasis) |\n| `smooth` | Curve lines | `true` for curved line chart, `false` (default) for polyline | [→ docs](https://echarts.apache.org/en/option.html#series-line.smooth) |\n| `itemStyle.borderRadius` | Rounded bars | `[4,4,0,0]` — top-left, top-right, bottom-right, bottom-left | [→ docs](https://echarts.apache.org/en/option.html#series-bar.itemStyle) |\n| `axisLabel.rotate` | Rotate X labels | `45` degrees — useful when labels overlap (10+ categories) | [→ docs](https://echarts.apache.org/en/option.html#xAxis.axisLabel) |\n\nSee also: `references/echarts-option-reference.md` (EN) and `references/echarts-option-zh.md` (CN)\n\n## Common Issues\n\n| Problem | Cause | Fix |\n|---------|-------|-----|\n| Blank chart | CDN blocked or no internet | Use `--embed` flag for local libs (~1MB) |\n| SVG not rendering | Old browser version | Chrome/Firefox 2020+ required |\n| Wordcloud missing | Missing wordcloud extension | Included in `--embed` mode; CDN auto-loads |\n| Chinese garbled | File saved in wrong encoding | Save as UTF-8; `--embed` embeds correct charset |\n| CLI not found | Node.js not installed | Install from nodejs.org |\n| Screenshot fails | Playwright not installed | `npm install playwright && npx playwright install chromium`, or use `--svg-output` for vector format |\n\n## Verification\n\nAfter generating a chart:\n\n1. Open the .html file in a browser\n2. Confirm chart canvas/SVG renders\n3. Hover over data points — tooltip should appear\n4. Resize browser — chart should adapt\n5. Test with `--theme` to confirm theme switching\n\n## Other Advanced Capabilities\n\n### 1. Multi-Pattern Generation\n\nThe model can generate m\n\nArchive v2.3.8: 41 files, 425519 bytes\n\nFiles: cli.js (13414b), lib/echarts-5.6.min.js (1034102b), lib/echarts-theme-dark.js (5981b), lib/echarts-theme-infographic.js (5829b), lib/echarts-theme-macarons.js (5869b), lib/echarts-theme-roma.js (3044b), lib/echarts-theme-shine.js (4412b), lib/echarts-theme-vintage.js (1922b), lib/echarts-wordcloud-2.1.min.js (16552b), package.json (400b), prompt.md (11407b), README.md (5332b), references/echarts-option-reference.md (24157b), references/echarts-option-zh.md (24117b), references/echarts-wordcloud.md (4854b), references/echarts-zh-axisLabel.md (293b), references/echarts-zh-color.md (255b), references/echarts-zh-emphasis.md (277b), references/echarts-zh-grid.md (359b), references/echarts-zh-label.md (283b), references/echarts-zh-legend.md (243b), references/echarts-zh-series-bar.md (373b), references/echarts-zh-series-line.md (325b), references/echarts-zh-series-pie.md (450b), references/echarts-zh-series-radar.md (357b), references/echarts-zh-series-scatter.md (260b), references/echarts-zh-smooth.md (227b), references/echarts-zh-title.md (434b), references/echarts-zh-tooltip.md (303b), references/echarts-zh-xAxis.md (334b), references/echarts-zh-yAxis.md (221b), skill-card.md (2693b), SKILL.md (17363b), static/app.js (29242b), static/lang/en.json (971b), static/lang/zh.json (1052b), static/styles.css (6925b), static/templates-en.js (15288b), static/templates.js (15267b), text2echarts.html (10185b), _meta.json (130b)\n\nArchive v2.3.7: 41 files, 425628 bytes\n\nFiles: cli.js (13414b), lib/echarts-5.6.min.js (1034102b), lib/echarts-theme-dark.js (5981b), lib/echarts-theme-infographic.js (5829b), lib/echarts-theme-macarons.js (5869b), lib/echarts-theme-roma.js (3044b), lib/echarts-theme-shine.js (4412b), lib/echarts-theme-vintage.js (1922b), lib/echarts-wordcloud-2.1.min.js (16552b), package.json (400b), prompt.md (11407b), README.md (5332b), references/echarts-option-reference.md (24157b), references/echarts-option-zh.md (24117b), references/echarts-wordcloud.md (4854b), references/echarts-zh-axisLabel.md (293b), references/echarts-zh-color.md (255b), references/echarts-zh-emphasis.md (277b), references/echarts-zh-grid.md (359b), references/echarts-zh-label.md (283b), references/echarts-zh-legend.md (243b), references/echarts-zh-series-bar.md (373b), references/echarts-zh-series-line.md (325b), references/echarts-zh-series-pie.md (450b), references/echarts-zh-series-radar.md (357b), references/echarts-zh-series-scatter.md (260b), references/echarts-zh-smooth.md (227b), references/echarts-zh-title.md (434b), references/echarts-zh-tooltip.md (303b), references/echarts-zh-xAxis.md (334b), references/echarts-zh-yAxis.md (221b), skill-card.md (2912b), SKILL.md (17363b), static/app.js (29242b), static/lang/en.json (971b), static/lang/zh.json (1052b), static/styles.css (6925b), static/templates-en.js (15288b), static/templates.js (15267b), text2echarts.html (10185b), _meta.json (130b)","readmeExcerpt":"Skill: text2echart Owner: ifeel-is-a-mouse Summary: Chart generator skill. When triggered: - Default: CONSTRUCT ECharts option JSON and output HTML string directly and render by mermaid and support preview. -... Tags: latest:2.3.11 Version history: v2.3.11 | 2026-07-03T14:09:46.481Z | user Add disable-model-invocation and user-invocable parameters with English documentation v2.3.10 | 2026-06-18T16:04:30.592Z | user F","codeSnippets":[],"executableExamples":[{"language":"html","snippet":"...echarts CDN...
"},{"language":"bash","snippet":"# Web App — open interactive GUI\nopen text2echarts.html\n\n# CLI — CSV → chart\nnode cli.js data.csv --open\n\n# CLI — JSON → SVG\nnode cli.js chart.json -o report.html"},{"language":"bash","snippet":"node cli.js [options]\n\nOptions:\n -o, --out Output file name\n --type Chart type for CSV: bar|line|pie|radar|wordcloud\n --theme dark|infographic|macarons|roma|shine|vintage\n --width / --height Chart dimensions\n --svg SVG renderer (default)\n --svg-output Output standalone .svg file (needs Playwright)\n --screenshot Output PNG screenshot (needs Playwright)\n --open Open in browser after generation\n --cdn Use CDN for ECharts lib (default)\n --embed Embed ECharts lib for offline (~1MB)\n --slide 960x540 PPT slide mode"},{"language":"csv","snippet":"Month,Sales\nJan,1200\nFeb,900\nMar,1600"},{"language":"json","snippet":"{\n \"series\": [{\n \"type\": \"pie\",\n \"radius\": [\"40%\", \"70%\"],\n \"data\": [\n {\"value\": 48, \"name\": \"Chrome\"},\n {\"value\": 22, \"name\": \"Firefox\"},\n {\"value\": 18, \"name\": \"Safari\"}\n ],\n \"label\": {\"formatter\": \"{b}\\n{d}%\"}\n }],\n \"title\": {\"text\": \"Market Share\"}\n}"},{"language":"csv","snippet":"Date,Revenue,Cost\nJan,1200,800\nFeb,1500,900\nMar,1800,1100"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: text2echart\nname-zh: Data to Chart\nprovider: openclaw\ndescription: >\n Chart generator skill. When triggered:\n - Default: CONSTRUCT ECharts option JSON and output HTML string directly and render by mermaid and support preview.\n - Image / vector (图片/矢量图): use CLI with --svg-output (or --svg --embed for offline).\n - Screenshot (截图): use CLI with --screenshot (needs Playwright).\n - Fine-tuning (微调/修改): open browser for interactive adjustment.\n Supports 6 chart types: bar, line, pie, scatter, radar, wordcloud (via JSON).\n Trigger words: chart, graph, visualize, plot, draw, wordcloud, vent draw图表, 画图, 可视化, 图片, 矢量图, 词云.\ndisable-model-invocation: true\nuser-invocable: true\nmetadata:\n version: \"2.3.11\"\n launch: \"text2echarts.html\"\n trigger-keywords:\n - chart\n - graph\n - visualize\n - plot\n - make a chart\n - draw a graph\n - 图表\n - 画图\n - 可视化\n - 柱状图\n - 饼图\n - 图片\n - 矢量图\n - wordcloud\n - vent draw\n - 词云\n tags:\n - visualization\n - echarts\n - chart\n - data-viz\n - svg\n---\n\n# text2echart — Data to Chart\n\n## Invocation Model\n\ntext2echart is a chart-generation skill configured with safety-first invocation settings:\n\n- **`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.\n\n- **`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.\n\n**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.\n\n## ⚡ Routing\n\ncase when: user asks for a chart / graph / visualization (default):\n - Construct ECharts option JSON\n - Output HTML string directly, render with ```html code block\n - Support preview by opening in browser or screenshot\n\n **Default route — direct HTML generation in chat.**\n Example prompt: *\"Give me a pie chart of browser market share — Chrome 65%, Safari 18%, Edge 8%, Firefox 5%, Other 4%\"*\n → The model outputs a complete HTML file with an interactive ECharts pie chart.\n\ncase when: user asks for an image / picture / vector graphic (图片/矢量图):\n - Use CLI with SVG output: `node cli.js data.json --svg-output -o chart.svg`\n - `--svg-output` extracts standalone .svg file (requires Playwright)\n - Add `--embed` to bundle ECharts lib for fully offline use\n - SVG is vector format — sharp at any resolution, ideal for documents\n - Also send PNG screenshot for instant preview\n\ncase when: user"},{"path":"assets/README.md","content":"# Assets Directory\n\nScreenshot images (bar-chart.jpg, help-screen.jpg, pie-chart.jpg, wordcloud.jpg)\nare embedded as base64 data URIs in the project [README.md](../README.md).\n\nThis is necessary because ClawHub blocks binary image file uploads (.jpg, .png)\nat the server level — `.clawhubignore` negation patterns cannot override this filter."},{"path":"_meta.json","content":"{\n \"ownerId\": \"kn763gq5kg4zre2btdb6rwgrwx88bwgs\",\n \"slug\": \"text2echart\",\n \"version\": \"2.3.11\",\n \"publishedAt\": 1783087786481\n}"},{"path":"references/echarts-option-reference.md","content":"Option API GL Tutorial\nsetOption({\nCollapse All\ntitle: {...} ,\nlegend: {...} ,\ngrid: {...} ,\nxAxis: {...} ,\nyAxis: {...} ,\npolar: {...} ,\nradiusAxis: {...} ,\nangleAxis: {...} ,\nradar: {...} ,\ndataZoom: [{...}] ,\nvisualMap: [{...}] ,\ntooltip: {...} ,\naxisPointer: {...} ,\ntoolbox: {...} ,\nbrush: {...} ,\ngeo: {...} ,\nparallel: {...} ,\nparallelAxis: {...} ,\nsingleAxis: {...} ,\ntimeline: {...} ,\ngraphic: {...} ,\ncalendar: {...} ,\nmatrix: {...} ,\nthumbnail: {...} ,\ndataset: {...} ,\naria: {...} ,\nseries: [{...}] ,\ndarkMode ... ,\ncolor ... ,\nbackgroundColor ... ,\ntextStyle: {...} ,\nanimation: true ,\nanimationThreshold: 2000 ,\nanimationDuration: 1000 ,\nanimationEasing: 'cubicOut' ,\nanimationDelay: 0 ,\nanimationDurationUpdate: 300 ,\nanimationEasingUpdate: 'cubicOut' ,\nanimationDelayUpdate: 0 ,\nstateAnimation: {...} ,\nblendMode: 'source-over' ,\nhoverLayerThreshold: 3000 ,\nuseUTC: false ,\nrichInheritPlainLabel: true ,\noptions ... ,\nmedia: [{...}] ,\ntitle\n\nTitle component, including main title and subtitle.\n\nIn ECharts 2.x, a single instance of ECharts could contains one title component at most. However, in ECharts 3, there could be one or more than one title components. It is more useful when multiple diagrams in one instance all need titles.\n\nHere are some instances of different animation easing functions, among which every instance has a title component:\n\nProperties\ntitle. id\nstring\n\nComponent ID, not specified by default. If specified, it can be used to refer the component in option or API.\n\ntitle. show = true\n Try It\nboolean\n\nSet this to false to prevent the title from showing\n\ntitle. text = ''\n Try It\nstring\n\nThe main title text, supporting for \\n for newlines.\n\n[WARNING]: When enabling toolbox.feature.saveAsImage, and toolbox.feature.saveAsImage.name is not provided, it has historically been using title[0].text instead. This usage is not recommended -- toolbox.feature.saveAsImage.name should always be specified explicitly; otherwise, correctness and security risks for a filename have to be considered in this title.text option. See document \"Security Guidelines\" for recommendations on safe usage.\ntitle. link = ''\nstring\n\nThe hyper link of main title text.\n\n[WARNING]: This URL string is accepted directly without any internal sanitization. Security risks must be considered if it comes from untrusted sources. See document \"Security Guidelines\" for recommendations on safe usage.\ntitle. target = 'blank'\nstring\n\nOpen the hyper link of main title in specified tab.\n\noptions:\n\n'self' opening it in current tab\n\n'blank' opening it in a new tab\n\n title. textStyle\nObject\n title.textStyle. color = '#333'\n Try It\nColor\n\nmain title text color.\n\n title.textStyle. fontStyle = 'normal'\n Try It\nstring\n\nmain title font style.\n\nOptions are:\n\n'normal'\n'italic'\n'oblique'\n title.textStyle. fontWeight = 'bolder'\n Try It\nstringnumber\n\nmain title font thick weight.\n\nOptions are:\n\n'normal'\n'bold'\n'bolder'\n'lighter'\n100 | 200 | 300 | 400...\n title.textStyle. fontFamily = 'sans-"},{"path":"references/echarts-option-zh.md","content":"配置项 API GL配置 教程\nsetOption({\n收起所有\ntitle: {...} ,\nlegend: {...} ,\ngrid: {...} ,\nxAxis: {...} ,\nyAxis: {...} ,\npolar: {...} ,\nradiusAxis: {...} ,\nangleAxis: {...} ,\nradar: {...} ,\ndataZoom: [{...}] ,\nvisualMap: [{...}] ,\ntooltip: {...} ,\naxisPointer: {...} ,\ntoolbox: {...} ,\nbrush: {...} ,\ngeo: {...} ,\nparallel: {...} ,\nparallelAxis: {...} ,\nsingleAxis: {...} ,\ntimeline: {...} ,\ngraphic: {...} ,\ncalendar: {...} ,\nmatrix: {...} ,\nthumbnail: {...} ,\ndataset: {...} ,\naria: {...} ,\nseries: [{...}] ,\ndarkMode ... ,\ncolor ... ,\nbackgroundColor: 'transparent' ,\ntextStyle: {...} ,\nanimation: true ,\nanimationThreshold: 2000 ,\nanimationDuration: 1000 ,\nanimationEasing: 'cubicOut' ,\nanimationDelay: 0 ,\nanimationDurationUpdate: 300 ,\nanimationEasingUpdate: 'cubicInOut' ,\nanimationDelayUpdate: 0 ,\nstateAnimation: {...} ,\nblendMode: 'source-over' ,\nhoverLayerThreshold: 3000 ,\nuseUTC: false ,\nrichInheritPlainLabel: true ,\noptions ... ,\nmedia: [{...}] ,\ntitle\n\n标题组件，包含主标题和副标题。\n\n在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件，这在需要标题进行排版，或者单个实例中的多个图表都需要标题时会比较有用。\n\n例如下面不同缓动函数效果的示例，每一个缓动效果图都带有一个标题组件：\n\n所有属性\ntitle. id\nstring\n\n组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。\n\ntitle. show = true\n 试一试\nboolean\n\n是否显示标题组件。\n\ntitle. text = ''\n 试一试\nstring\n\n主标题文本，支持使用 \\n 换行。\n\n[警告]: 如果使用了 toolbox.feature.saveAsImage，并且没有设置 toolbox.feature.saveAsImage.name，会用 title[0].text 替代。这种用法是历史实现但并不推荐，应该总是显式指定toolbox.feature.saveAsImage.name；否则，不得不考虑 title.text 是否是个正确的文件名，以及其 安全性。文档 “安全指南” 给出了安全使用建议。\ntitle. link = ''\nstring\n\n主标题文本超链接。\n\n[警告]: 此 URL 字符串直接被使用，并未在内部做其他净化处理（sanitization） 如果他们来自于“不受信任”的来源，必须考虑 安全风险。文档 “安全指南” 给出了安全使用建议。\ntitle. target = 'blank'\nstring\n\n指定窗口打开主标题超链接。\n\n可选：\n\n'self' 当前窗口打开\n\n'blank' 新窗口打开\n\n title. textStyle\nObject\n title.textStyle. color = '#333'\n 试一试\nColor\n\n主标题文字的颜色。\n\n title.textStyle. fontStyle = 'normal'\n 试一试\nstring\n\n主标题文字字体的风格。\n\n可选：\n\n'normal'\n'italic'\n'oblique'\n title.textStyle. fontWeight = 'bolder'\n 试一试\nstringnumber\n\n主标题文字字体的粗细。\n\n可选：\n\n'normal'\n'bold'\n'bolder'\n'lighter'\n100 | 200 | 300 | 400...\n title.textStyle. fontFamily = 'sans-serif'\n 试一试\nstring\n\n主标题文字的字体系列。\n\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...\n\n title.textStyle. fontSize = 18\n 试一试\nnumber\n\n主标题文字的字体大小。\n\n title.textStyle. lineHeight\n 试一试\nnumber\n\n行高。\n\nrich 中如果没有设置 lineHeight，则会取父层级的 lineHeight。例如：\n\n{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n\n title.textStyle. width\n 试一试\nnumber\n\n文本显示宽度。\n\n title.textStyle. height\n 试一试\nnumber\n\n文本显示高度。\n\n title.textStyle. textBorderColor\n 试一试\nColor\n\n文字本身的描边颜色。\n\n title.textStyle. textBorderWidth\n 试一试\nnumber\n\n文字本身的描边宽度。\n\n title.textStyle. textBorderType = 'solid'\n 试一试\nstringnumberArray\n\n文字本身的描边类型。\n\n可选：\n\n'solid'\n'dashed'\n'dotted'\n\n自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 textBorderDashOffset 可实现更灵活的虚线效果。\n\n例如：\n\n{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n\n title.textStyle. textBorderDashOffset = 0\n 试一试\nnumber\n从 v5.0.0 开始支持\n\n用于设"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Chart generator skill. When triggered: - Default: CONSTRUCT ECharts option JSON and output HTML string directly and render by mermaid and support preview. -... Skill: text2echart Owner: ifeel-is-a-mouse Summary: Chart generator skill. When triggered: - Default: CONSTRUCT ECharts option JSON and output HTML string directly and render by mermaid and support preview. -... Tags: latest:2.3.11 Version history: v2.3.11 | 2026-07-03T14:09:46.481Z | user Add disable-model-invocation and user-invocable parameters with English documentation v2.3.10 | 2026-06-18T16:04:30.592Z | user F","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1442,"uniquenessScore":48,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T20:09:34.957Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-11T20:09:34.957Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-12T08:01:26.891Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}