Quels formats d'exportation sont pris en charge ?

L'outil prend en charge les variables CSS (:root), les variables SCSS, la configuration theme.extend de Tailwind CSS et le format JSON pour Style Dictionary.

Comment fonctionne la normalisation des couleurs ?

Elle convertit automatiquement les formats de couleur nommés (ex. 'red') ou RGB/RGBA en codes hexadécimaux standardisés (#hex).

Puis-je ajouter un préfixe personnalisé à mes variables ?

Oui, vous pouvez définir un préfixe dans les options pour éviter tout conflit de nommage dans votre feuille de style.

Quels types de données sont extraits du JSON ECharts ?

L'outil extrait les codes couleur, les valeurs numériques d'espacement, les tailles de police et les chaînes de caractères associées aux styles.

Mes données de thème sont-elles envoyées à un serveur ?

Non, l'extraction s'effectue localement dans votre navigateur de manière totalement sécurisée et déterministe.

Elysia Tools

Navigation mobile

Design

Extracteur de tokens de thème ECharts

Extrait des design tokens — couleurs, nombres, tailles de police et chaînes — d'un JSON de thème ECharts et les exporte directement dans votre design system. Collez un objet thème (celui enregistré et passé à echarts.init(dom, themeName)) et l'outil parcourt chaque feuille, étiquetant chaque couleur (avec normalisation optionnelle nommé/rgb → hex), nombre d'espacement, taille de police et chaîne, puis émet des variables CSS propres, un thème.extend Tailwind, un tokens.json Style Dictionary ou des variables SCSS. Pont entre un thème de visualisation ECharts et les tokens de design Figma/CSS/Tailwind sans recopier chaque valeur à la main.

Détails

Ce que cet outil vous aide à faire

Un pont depuis les thèmes de visualisation ECharts vers votre design system :

Collez un JSON de thème ECharts — l'objet que vous enregistrez et passez à echarts.init(dom, themeName). Ce peut être la forme compacte (juste un tableau "color") ou un thème complet avec series/axis/textStyle.
L'extracteur parcourt chaque valeur feuille et l'étiquette : couleurs (#hex, rgb()/rgba(), nommées), nombres d'espacement/tailles, chaînes de taille de police (12px, 1.2rem) et chaînes simples. Les booléens, formateurs et z-level sont filtrés.
Normalisez optionnellement les couleurs : convertissez les couleurs nommées et rgb()/rgba() en hex pour que chaque token couleur soit uniforme.
Choisissez le format de sortie et un préfixe de token :

Variables CSS → un bloc :root { --prefix-…: …; } à coller dans une feuille de style.
Tailwind → un objet theme.extend { colors, spacing, fontSize } pour tailwind.config.js.
Style Dictionary → un tokens.json imbriqué (chaque token porte value + type) pour le pipeline Style Dictionary.
SCSS → variables $prefix_…: …;.

La table des tokens montre chaque token extrait avec son type, un échantillon de couleur le cas échéant et le chemin source dans le thème, pour auditer l'extraction avant de lui faire confiance.

Hors ligne et déterministe : parcours JSON pur, sans dépendance externe.

Exécution

Exécuter cet outil

Remplissez le formulaire, lancez l’outil et consultez le résultat au même endroit.

Exécutions d’exemple préparées

Cliquez sur un exemple pour remplir automatiquement le formulaire. Les fichiers doivent toujours être téléversés.

2 exemples

Thème type ECharts par défaut → variables CSS

Un petit thème avec une palette série de 3 couleurs, un fond et un style de texte, exporté en propriétés personnalisées CSS :root avec normalisation hex et préfixe « 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>

Thème riche → Tailwind theme.extend

Un thème plus complet (palette 5 couleurs, tailles de police, espacement) exporté comme bloc theme.extend prêt à coller dans 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>

Entrées

Renseignez les champs nécessaires, puis lancez l’outil.

4 réglages

ContenuCollez ou saisissez les valeurs principales.2

JSON du thème EChartstextareaRequisPréfixe de tokentextOptionnel

RéglagesAjustez formats, plages, nombres et modes.2

Format de sortieselectOptionnelNormalisation des couleursselectOptionnel

Résultat

Prêt à exécuter

Après exécution, les fichiers, textes, données structurées ou sorties en flux apparaîtront ici.

Exemples

Exemples adaptés à cet outil

Associé

Extracteur de tokens de thème ECharts

Ce que cet outil vous aide à faire

Exécuter cet outil

Exécutions d’exemple préparées

Entrées

Résultat

Exemples adaptés à cet outil

Continuer avec des outils et dossiers associés

Exécutions d’exemple préparées

Entrées

Résultat

Découvrez quand utiliser cet outil, ce qu'il prend en charge et comment les utilisateurs l'appliquent.

Points clés

Aperçu

Quand l’utiliser

Fonctionnement

Cas d’usage

Exemples

1. Conversion d'un thème ECharts basique en variables CSS

2. Intégration d'un thème riche dans Tailwind CSS

FAQ

Exemples JWT

Exemples JSON de Terraform Plan

Exemples de Traçage Distribué

Exemples PDF

De la palette d’image aux design tokens

JSON Key Extractor

Générateur de Graphique d'Intervalle

Suppresseur de Caractères BOM

Outils d interchange JSON et de traduction de formats

Outils de conversion de casse, d’encodage et de normalisation de texte

Outils d inspection, de diff et de transformation JSON

Outils Text