# ECharts-Theme-Token-Extraktor

Extrahiert Design-Tokens — Farben, Zahlen, Schriftgrößen und Strings — aus einem ECharts-Theme-JSON und exportiert sie direkt in Ihr Design-System. Fügen Sie ein Theme-Objekt ein (das per echarts.init(dom, themeName) registriert wird) und das Werkzeug durchläuft jedes Leaf, taggt jede Farbe (optional Named/rgb → hex normalisiert), jeden Abstand, jede Schriftgröße und jeden String und gibt saubere CSS-Variablen, ein Tailwind theme.extend, ein Style Dictionary tokens.json oder SCSS-Variablen aus. Überbrückt die Lücke zwischen einem ECharts-Visualisierungs-Theme und Figma/CSS/Tailwind-Design-Tokens, ohne jeden Wert von Hand zu kopieren.

> Kanonische Seite: https://elysiatools.com/de/tools/echarts-theme-token-extractor

- **Kategorie:** Design

- **Schlagwörter:** echarts, theme, design-tokens, css-variablen, tailwind, style dictionary, figma, design-system, farbpalette, extrahieren, json, visualisierung, diagramm-theme, scss, token-brücke

## Überblick

Eine Brücke von ECharts-Visualisierungs-Themes zu Ihrem Design-System:

1. Fügen Sie ein ECharts-Theme-JSON ein — das Objekt, das Sie registrieren und an echarts.init(dom, themeName) übergeben. Es kann die kompakte Form (nur ein "color"-Array) oder ein volles Theme mit series/axis/textStyle sein.
2. Der Extraktor durchläuft jeden Leaf-Wert und taggt ihn: Farben (#hex, rgb()/rgba(), benannte), numerische Abstände/Größen, Schriftgrößen-Strings (12px, 1.2rem) und einfache Strings. Boolesche Werte, Formatter und z-Level werden herausgefiltert.
3. Normalisieren Sie optional Farben: benannte Farben und rgb()/rgba() in hex, damit jeder Farb-Token einheitlich ist.
4. Wählen Sie Ausgabeformat und Token-Präfix:
   - CSS-Variablen → ein :root { --prefix-…: …; }-Block zum Einfügen in ein Stylesheet.
   - Tailwind → ein theme.extend { colors, spacing, fontSize }-Objekt für tailwind.config.js.
   - Style Dictionary → ein verschachteltes tokens.json (jeder Token trägt value + type) für die Style-Dictionary-Pipeline.
   - SCSS → $prefix_…: …;-Variablen.
5. Die Token-Tabelle zeigt jeden extrahierten Token mit Art, Farb-Muster falls zutreffend und dem Quellpfad im Theme, um die Extraktion vor der Vertrauensübernahme zu prüfen.

Offline und deterministisch: reiner JSON-Walk, keine externe Abhängigkeit.

## Eingaben

- **ECharts-Theme-JSON** (textarea): { "color": \["#5470c6", "#91cc75", "#fac858"\], "backgroundColor": "#ffffff", "textStyle": { "fontSize": 12, "color": "#333" } }
- **Ausgabeformat** (select)
- **Token-Präfix** (text): e.g. chart (→ --chart-color-1)
- **Farbnormalisierung** (select)

## Wann verwenden

- Wenn Sie ein bestehendes ECharts-Diagramm-Theme nahtlos in das globale CSS- oder Tailwind-Design-System Ihrer Webanwendung integrieren möchten.
- Wenn Sie Farbwerte aus ECharts-Konfigurationen wie RGB- oder Named-Colors einheitlich in standardisierte Hex-Werte normalisieren müssen.
- Wenn Sie Design-Tokens für Style Dictionary oder SCSS-Pipelines automatisiert aus einer zentralen ECharts-Theme-Datei generieren wollen.

## Funktionsweise

- Fügen Sie das ECharts-Theme-JSON in das Eingabefeld ein.
- Wählen Sie das gewünschte Ausgabeformat wie CSS-Variablen, Tailwind, Style Dictionary oder SCSS und legen Sie optional ein Token-Präfix fest.
- Aktivieren Sie bei Bedarf die Farbnormalisierung, um RGB- und Farbnamen automatisch in einheitliche Hex-Codes umzuwandeln.
- Kopieren Sie den generierten Code direkt aus der Vorschau oder prüfen Sie die extrahierten Tokens in der tabellarischen Übersicht.

## Anwendungsfälle

- Synchronisierung der Farbpalette eines ECharts-Dashboards mit den Tailwind-CSS-Klassen einer React- oder Vue-Anwendung.
- Erstellung einer zentralen SCSS-Variablendatei aus einem ECharts-Theme für Legacy-Webprojekte.
- Einspeisung von Diagramm-Design-Tokens in eine Style-Dictionary-Pipeline zur plattformübergreifenden Bereitstellung.

## Häufig gestellte Fragen

### Welche ECharts-Theme-Formate werden unterstützt?

Es werden sowohl kompakte JSON-Objekte mit einfachen Farb-Arrays als auch vollständige ECharts-Themes inklusive Achsen-, Text- und Seriendefinitionen unterstützt.

### Können RGB- und benannte Farben automatisch konvertiert werden?

Ja, über die Option zur Farbnormalisierung werden RGB-, RGBA- und CSS-Farbnamen automatisch in standardisierte Hex-Werte umgewandelt.

### Welche Exportformate stehen zur Verfügung?

Sie können die extrahierten Tokens als CSS-Variablen, Tailwind-Konfigurationen (theme.extend), Style Dictionary JSON oder SCSS-Variablen exportieren.

### Werden Funktionen oder Formatierer aus dem JSON extrahiert?

Nein, JavaScript-Funktionen, Formatierer, boolesche Werte und z-Level-Eigenschaften werden bei der Extraktion gefiltert, da sie keine statischen Design-Tokens darstellen.

### Läuft die Extraktion sicher ab?

Ja, die Verarbeitung erfolgt vollständig lokal im Browser. Es werden keine Daten an externe Server übertragen.

## Ähnliche Tools

- [Bild-Palette zu Design-Tokens](https://elysiatools.com/de/tools/image-to-design-tokens): Extrahiert dominante Farben per k-Means und exportiert sie als CSS-/SCSS-Variablen, Tailwind-Config oder JSON-Tokens mit Namen und Farbskala
- [JSON Key Extractor](https://elysiatools.com/de/tools/json-key-extractor): Extract all keys from JSON objects with multiple output formats. Perfect for analyzing JSON structure, documentation generation, and understanding complex nested objects.
- [Bereichsdiagramm-Generator](https://elysiatools.com/de/tools/range-chart-generator): Erstellen Sie Bereichsdiagramme zur Visualisierung von Min-Max-Wertbereichen mit Medianmarkierungen und Ausreißer-Erkennung
- [BOM-Zeichen-Entferner](https://elysiatools.com/de/tools/data-bom-remover): BOM (Byte Order Mark) Zeichen aus Text- und Dateiinhalten entfernen. Perfekt zum Bereinigen von Textdateien mit Codierungsproblemen.
- [Text-Pipeline-Builder](https://elysiatools.com/de/tools/text-pipeline-builder): Führt eine portable Textbereinigungsrezeptur aus und zeigt jeden Diff, Zeitaufwand und Zeichenänderungen.
- [QR-Code-Decoder](https://elysiatools.com/de/tools/qr-code-decoder): Dekodiert QR-Codes aus Bildern und extrahiert den enthaltenen Text oder URL
- [Sportdaten-JSON-Visualizer](https://elysiatools.com/de/tools/sports-data-json-visualizer): Fügen Sie einen JSON-Payload einer beliebigen Sport-API (ESPN, TheSportsDB, balldontlie, football-data.org, api-sports.io) ein und erhalten Sie eine übersichtliche Anzeigetafel mit hervorgehobenen Siegern und Spielständen.
- [Massen-E-Mail-Extraktor](https://elysiatools.com/de/tools/bulk-email-extractor): Extrahieren Sie alle E-Mail-Adressen aus Eingabetext, Artikeln, Web-Quellcode oder gemischtem Inhalt. Unterstützt Deduplizierung und Export nach JSON.

## Beispiele

- [JWT-Beispiele](https://elysiatools.com/de/samples/jwt-samples): Umfassende JWT-Beispiele von der grundlegenden Token-Struktur bis zu fortgeschrittenen Sicherheitsimplementierungen
- [Terraform-Plan-JSON-Beispiele](https://elysiatools.com/de/samples/terraform-plan-json-samples): Terraform-Plan-JSON-Dateien fuer Abhaengigkeitsvisualisierung und Change-Review, passend zu terraform show -json
- [Distributed Tracing Beispiele](https://elysiatools.com/de/samples/distributed-tracing-samples): Umfassende Beispiele für verteiltes Tracing mit Jaeger, OpenTelemetry und modernen Observability Tools
- [PDF-Beispiele](https://elysiatools.com/de/samples/pdf-samples): Generierte PDF-Beispiele von Tools zwischen 2026-02-01 und 2026-02-10

## Verwandte Inhalte

- [Tools fur JSON-Austausch und Format-Ubersetzung](https://elysiatools.com/de/hubs/json-convert): Vergleiche JSON-Konvertierungswerkzeuge fur CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN und ahnliche strukturierte Formate in einem Hub.
- [Textfall-, Encoding- und Normalisierungs-Konvertierungs-Tools](https://elysiatools.com/de/hubs/text-convert): Vergleichen Sie Textfall-Konvertierung, Zeichenbreiten-Konvertierung, Encoding-Konvertierung, Quoted-Printable-Verarbeitung und Inline-Textnormalisierung in einem Hub.
- [Werkzeuge fur JSON-Inspektion, Diff und Transformation](https://elysiatools.com/de/hubs/json-utility): Bunde JSON-Formatierung, Diff, Pfad-Inspektion, Schema-Prufung, Merge und Transformation in einem Hub fur API- und Daten-Workflows.
- [Text-Tools](https://elysiatools.com/de/hubs/text-utility): Entdecken Sie 33 text-Tools für utility-Workflows und vergleichen Sie ähnliche Utilities schnell.