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.

Elysia Tools

Mobile Navigation

Design

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.

Einzelheiten

Wobei dieses Tool hilft

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

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.
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.
Normalisieren Sie optional Farben: benannte Farben und rgb()/rgba() in hex, damit jeder Farb-Token einheitlich ist.
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.

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.

Ausführung

Dieses Tool ausführen

Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.

Vorbereitete Beispielausführungen

Klicken Sie auf ein Beispiel, um das Formular automatisch auszufüllen. Dateien müssen weiterhin hochgeladen werden.

2 Beispiele

ECharts-Standardthema → CSS-Variablen

Ein kleines Theme mit 3-Farben-Serienpalette, Hintergrund und Textstil, exportiert als :root CSS Custom Properties mit hex-Normierung und Präfix "chart".

<div class="ec-wrap">…8 tokens: 5 colors (chart-color-1…3, chart-background-color, chart-text-style-color) + 1 number (chart-text-style-font-size)… :root { --chart-color-1: #5470c6; … }…</div>

Reichhaltiges Theme → Tailwind theme.extend

Ein volleres Theme (5-Farben-Palette, Schriftgrößen, Abstände), exportiert als theme.extend-Block zum Einfügen in tailwind.config.js.

<div class="ec-wrap">…colors grouped under theme.extend.colors, font sizes under theme.extend.fontSize, ready to paste into tailwind.config.js…</div>

Eingaben

Fülle die erforderlichen Felder aus und starte das Tool.

4 Optionen

InhaltHaupteingaben einfügen oder eingeben.2

ECharts-Theme-JSONtextareaPflichtToken-PräfixtextOptionales Feld

EinstellungenFormate, Bereiche, Zahlen und Modi anpassen.2

AusgabeformatselectOptionales FeldFarbnormalisierungselectOptionales Feld

Ergebnis

Bereit zum Start

Nach dem Ausführen erscheinen hier Dateien, Text, strukturierte Daten oder Stream-Ausgaben.

Beispiele

Beispiele zu diesem Tool

Verwandt

ECharts-Theme-Token-Extraktor

Wobei dieses Tool hilft

Dieses Tool ausführen

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Beispiele zu diesem Tool

Mit verwandten Tools und Themen fortfahren

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Überblick

Wann verwenden

So funktioniert es

Anwendungsfälle

Beispiele

1. ECharts-Standardthema in CSS-Variablen umwandeln

2. Diagramm-Theme in Tailwind-Konfiguration integrieren

FAQ

JWT-Beispiele

Terraform-Plan-JSON-Beispiele

Distributed Tracing Beispiele

PDF-Beispiele

Bild-Palette zu Design-Tokens

JSON Key Extractor

Bereichsdiagramm-Generator

BOM-Zeichen-Entferner

Tools fur JSON-Austausch und Format-Ubersetzung

Textfall-, Encoding- und Normalisierungs-Konvertierungs-Tools

Werkzeuge fur JSON-Inspektion, Diff und Transformation

Text-Tools