MCP ECharts MCP — Anwendungsfälle, Installieren & Live-Demo

Warum nutzen

Hauptfunktionen

Über 15 Diagrammtools für die ECharts-Familie
Vollständige ECharts-Syntaxunterstützung – Agenten können jede Serienoption verwenden
Exportieren Sie PNG, SVG oder die Rohoption JSON
Keine Cloud-Abhängigkeiten – lokales Rendern
Optionaler MinIO-Speicher für teilbare URLs

Live-Demo

In der Praxis

mcp-echarts.replay ▶ bereit

0/0

Installieren

Wählen Sie Ihren Client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "mcp-echarts",
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  ]
}

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json

{
  "context_servers": {
    "mcp-echarts": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "mcp-echarts"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

claude mcp add mcp-echarts -- npx -y mcp-echarts

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: MCP ECharts

Verwandeln Sie eine Zahlentabelle mit einem einzigen Tool-Aufruf in ein Diagramm

👤 Analysten, PMs und Ingenieure arbeiten im Chat ⏱ ~5 min beginner

Wann einsetzen: Sie haben einen kleinen Datensatz und möchten eine visuelle Darstellung, ohne eine Tabelle öffnen zu müssen.

Voraussetzungen

Knoten 18+ — NVM-Installation 18

Ablauf

Beschreiben Sie das Diagramm

Balkendiagramm der wöchentlichen aktiven Benutzer: Mo 820, Di 905, Mi 1120, Do 980, Fr 1340, Sa 780, So 610. Benennen Sie es „WAU nach Tag“.✓ Kopiert

→ Der Agent wählt „generate_bar_chart“ mit den korrekten Beschriftungen und Werten für die x-Achse aus
Exportieren Sie das PNG

Als PNG exportieren und unter ~/charts/wau.png speichern.✓ Kopiert

→ Datei zurückgegeben; png_path im Tool-Ergebnis

Ergebnis: Ein Diagramm, das Sie in ein Deck oder Dokument einfügen können, ohne den Chat zu verlassen.

Fallstricke

Ich frage nach einem Kreisdiagramm für einen Datensatz mit mehr als 30 Kategorien — Der Agent sollte stattdessen eine Leiste/Heatmap vorschlagen; erzwinge es mit „Balkendiagramm verwenden, Kreis ist nicht lesbar“

Kombinieren mit: filesystem

Holen Sie sich die rohe ECharts-Option zum Einfügen in ein React/Vue-Dashboard

👤 Frontend-Entwickler erstellen interne Tools ⏱ ~15 min intermediate

Wann einsetzen: Sie möchten, dass Claude die Diagrammkonfiguration entwirft, sodass Sie sie nur in Ihrer App anpassen müssen.

Voraussetzungen

Ein Frontend mit ECharts — npm installiere echarts

Ablauf

Fragen Sie nach der JSON-Option

Generieren Sie eine ECharts-Option für ein gestapeltes Flächendiagramm: drei Serien (direkt, organisch, bezahlt), monatlich für 2025.✓ Kopiert

→ Die Rückgabeform ist ein Optionsobjekt mit series[].type:'line', areaStyle und stack:'total'
Drop in Ihre Komponente

Geben Sie es nun als TypeScript-Konstante mit dem Namen exportOption aus.✓ Kopiert

→ TS const bereit zum Einfügen

Ergebnis: Produktionsbereite ECharts-Konfiguration ohne manuelle Erstellung des Boilerplates.

Fallstricke

Der Agent hat PNG zurückgegeben, als Sie die Option wollten — Sagen Sie „Rückgabeoption nur JSON – kein Rendering“

Kombinieren mit: antv-chart

Visualisieren Sie einen Fluss (Trichter, Reise, Conversion) als Sankey

👤 Wachstums-/Produktanalysten ⏱ ~10 min beginner

Wann einsetzen: Sie benötigen ein Flussdiagramm für ein Deck und Sankey ist das richtige Werkzeug.

Ablauf

Beschreiben Sie Knoten und Flüsse

Sankey: Landung (1000) → Anmeldung (420) → Aktiviert (310) → Bezahlt (95). Drop-Off-Prozentsätze anzeigen.✓ Kopiert

→ Korrekte Knoten-/Linkstruktur; Etiketten enthalten die Anzahl
SVG exportieren

Exportieren Sie SVG, damit es in Keynote skaliert wird.✓ Kopiert

→ SVG-Pfad gespeichert

Ergebnis: Ein knackiger Sankey für eine Funnel-Rezension, ohne Figma.

Kombinieren mit: markmap-mcp-server

Veröffentlichen Sie generierte Diagramme zur Weitergabe auf MinIO

👤 Teams, die einen selbstgehosteten Objektspeicher betreiben ⏱ ~20 min intermediate

Wann einsetzen: Sie benötigen reproduzierbare URLs für Diagramme, auf die Sie in Slack/Notion verweisen.

Voraussetzungen

MinIO-Endpunkt + Anmeldeinformationen — Stellen Sie MINIO_*-Umgebungsvariablen in Ihrer MCP-Client-Konfiguration bereit

Ablauf

Umgebung konfigurieren

Legen Sie MINIO_ENDPOINT, MINIO_ACCESS_KEY, MINIO_SECRET_KEY, MINIO_BUCKET_NAME in der MCP-Konfiguration fest.✓ Kopiert

→ Der Server meldet, dass MinIO beim Start aktiviert ist
Generieren und hochladen

Diagramm der Einnahmen nach Region; Laden Sie es auf MinIO hoch und geben Sie mir die URL.✓ Kopiert

→ Öffentliche (oder vorsignierte) URL zurückgegeben

Ergebnis: Stabile Links für Diagramme, die nach Chat-Rolls nicht kaputt gehen.

Fallstricke

Offene Anmeldeinformationen in der Konfiguration — Verwenden Sie einen dedizierten IAM-Benutzer mit Bucket-Bereich, nicht den MinIO-Root-Schlüssel

Kombinieren mit: s3-like MCPs

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

mcp-echarts + filesystem

Lesen Sie eine CSV-Datei, extrahieren Sie Spalten und erstellen Sie ein Diagramm

Lesen Sie data/sales.csv und stellen Sie die Spalte „Umsatz“ nach „Region“ als Balkendiagramm dar.✓ Kopiert

mcp-echarts + bigquery-server

Führen Sie SQL aus und zeichnen Sie dann das Ergebnis auf

Abfrage der letzten 30 Tage der Anmeldungen von BigQuery; Der tägliche Plot zählt als Linie.✓ Kopiert

mcp-echarts + antv-chart

Wählen Sie je nach Anwendungsfall zwischen ECharts und AntV

Für ein Dashboard für chinesische Zielgruppen bevorzugen Sie ECharts; für data-ink-minimal wählen Sie AntV aus.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

Werkzeug	Eingaben	Wann aufrufen
generate_line_chart	xAxis: array, series: array<number[]>, title?: str	Trend über eine geordnete Achse (Zeit, Position)
generate_bar_chart	categories, values, stack?: bool	Vergleichen Sie diskrete Kategorien
generate_pie_chart	items: [{name, value}]	Anteil am Gesamtergebnis mit ≤8 Slices
generate_scatter_chart	points: [[x,y]]	Korrelations- oder Cluster-Visualisierungen
generate_heatmap	matrix: number[][], rows, cols	Dichte- oder Verwirrungsmatrizen
generate_sankey	nodes, links	Fluss/Trichter zwischen diskreten Zuständen
generate_echarts_option	free-form option object	Wenn Sie die vollständige ECharts-Syntax und kein Vorlagendiagramm wünschen

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: Keine – lokales Rendern
Tokens pro Aufruf: Klein: Option Objekt rein, Pfad raus
Kosten in €: Frei
Tipp: Fragen Sie nach der JSON-Option, wenn Sie sie häufig wiederverwenden möchten. Fragen Sie nach PNG für einmalige Aktien.

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: MinIO-Creds nur in Umgebungsvariablen. Keine serverseitige Speicherung Ihrer Daten über das gerenderte Diagramm hinaus.

Datenabfluss: Standardmäßig kein Ausgang. Der MinIO-Export lädt nur auf Ihren konfigurierten Endpunkt hoch.

Diagrammbilder können vertrauliche Daten enthalten. Überprüfen Sie dies, bevor Sie es in einem freigegebenen MinIO-Bucket veröffentlichen.

Fehlerbehebung

Häufige Fehler und Lösungen

PNG-Rendering ist leer

Stellen Sie sicher, dass die Datentypen der Serien übereinstimmen (Zahlen, keine Zeichenfolgen) und die Länge der x-Achse der Serienlänge entspricht.

Prüfen: Inspect the option JSON; types should be number arrays

MinIO-Upload fehlgeschlagen: Signatur stimmt nicht überein

Überprüfen Sie MINIO_USE_SSL, MINIO_PORT und ob Zugriffs-/Geheimschlüssel zur gleichen MinIO-Instanz gehören.

Prüfen: mc admin info myminio/

Schriftarten fehlen / CJK-Zeichen als Kästchen

Installieren Sie eine CJK-fähige Schriftart in der Umgebung, in der der MCP-Server ausgeführt wird (z. B. Noto Sans CJK).

Prüfen: fc-list | grep -i cjk

Alternativen

MCP ECharts vs. andere

Alternative	Wann stattdessen	Kompromiss
antv-chart	Sie bevorzugen die eigensinnigen Standardeinstellungen und chinesischen Dokumente von AntV	Kleineres Diagrammvokabular
markmap-mcp-server	Sie benötigen eine Hierarchie, keine statistischen Diagramme	Andere Ausgabeklasse
mermaid-skill	Sie benötigen Flussdiagramme/Sequenzdiagramme, keine Datendiagramme	Diagramme ≠ Diagramme

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen