text2echart — Data to Chart

⚡ Instruction for LLM

When the user asks you to make a chart:

1. Understand the data from the user's description
2. Choose the right chart type (bar/line/pie/scatter/radar/wordcloud)
3. Construct a complete ECharts option JSON
4. OUTPUT the HTML directly — a single line of HTML string like the example below
5. Tell the user to save it as .html and open in browser

DO NOT use CLI. DO NOT take screenshots. DO NOT describe the chart in words and ask the user to build it. Just output the HTML.

Example output format (minified, one line):
\x3C!DOCTYPE html>\x3Chtml lang="en">\x3Chead>...echarts CDN...\x3Cstyle>...\x3C/style>\x3C/head>\x3Cbody>\x3Cdiv id="chart">\x3C/div>\x3Cscript>...echarts option...\x3C/script>\x3C/body>\x3C/html>

Overview

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

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

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

When to Use / When Not to Use

Quick Start

# Web App — open interactive GUI
open web/text2echarts.html

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

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

Supported Inputs

CLI Reference

node cli.js \x3Cinput> [options]

Options:
  -o, --out \x3Cfile>   Output file name
  --type \x3Ctype>      Chart type for CSV: bar|line|pie|radar
  --theme \x3Cname>     dark|infographic|macarons|roma|shine|vintage
  --width / --height Chart dimensions
  --svg              SVG renderer (default)
  --open             Open in browser after generation
  --embed            Embed ECharts lib for offline (~1MB)
  --slide            960x540 PPT slide mode

Chart Types

Themes

Few-Shot Examples

1. CSV → Bar Chart

User: "Chart these monthly sales"

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

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

2. JSON → Pie with Percentages

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

3. CSV → Multi-series Line

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

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

Architecture

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

Dependencies

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

References

Prompt Guide

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

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

Interactive Web App

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

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

Key ECharts Options Reference

Refer to these when constructing chart configurations. Official docs:

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

Common Issues

Verification

After generating a chart:

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