# 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. > Page canonique: https://elysiatools.com/fr/tools/echarts-theme-token-extractor - **Catégorie:** Design - **Mots-clés:** echarts, thème, design tokens, variables css, tailwind, style dictionary, figma, design system, palette, extraire, json, visualisation, thème de graphique, scss, pont de tokens ## Présentation Un pont depuis les thèmes de visualisation ECharts vers votre design system : 1. 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. 2. 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. 3. Normalisez optionnellement les couleurs : convertissez les couleurs nommées et rgb()/rgba() en hex pour que chaque token couleur soit uniforme. 4. 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_…: …;. 5. 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. ## Entrées - **JSON du thème ECharts** (textarea): { "color": \["#5470c6", "#91cc75", "#fac858"\], "backgroundColor": "#ffffff", "textStyle": { "fontSize": 12, "color": "#333" } } - **Format de sortie** (select) - **Préfixe de token** (text): e.g. chart (→ --chart-color-1) - **Normalisation des couleurs** (select) ## Quand l'utiliser - Lorsque vous devez synchroniser la palette de couleurs et la typographie d'un graphique ECharts avec la charte graphique globale de votre application. - Pour automatiser la conversion des couleurs nommées ou RGB d'un thème ECharts en valeurs hexadécimales standardisées. - Lors de l'intégration d'un thème de visualisation de données dans un pipeline Style Dictionary ou une configuration Tailwind CSS. ## Fonctionnement - Collez le code JSON de votre thème ECharts (contenant la palette de couleurs, le style de texte ou les configurations d'axes) dans le champ de saisie. - Configurez vos préférences d'exportation, notamment le format de sortie (CSS, SCSS, Tailwind, Style Dictionary), le préfixe des variables et la normalisation des couleurs en hexadécimal. - L'outil analyse récursivement le JSON, filtre les valeurs non pertinentes (comme les booléens ou les fonctions) et génère le code prêt à l'emploi ainsi qu'un tableau récapitulatif des tokens extraits. ## Cas d'usage - Génération rapide de variables CSS personnalisées à partir d'une palette de couleurs ECharts existante. - Alignement d'un thème de tableau de bord ECharts avec un design system basé sur Tailwind CSS. - Exportation de tokens de visualisation vers Style Dictionary pour une distribution multi-plateforme. ## Questions fréquentes ### 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. ## Outils associés - [De la palette d’image aux design tokens](https://elysiatools.com/fr/tools/image-to-design-tokens): Extrait les couleurs dominantes d’une image par k-means et les exporte en variables CSS / SCSS / config Tailwind / tokens JSON, avec noms et échelle de teintes - [JSON Key Extractor](https://elysiatools.com/fr/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. - [Générateur de Graphique d'Intervalle](https://elysiatools.com/fr/tools/range-chart-generator): Créer des graphiques d'intervalles pour visualiser les plages de valeurs min-max avec marqueurs de médiane et détection de valeurs aberrantes - [Suppresseur de Caractères BOM](https://elysiatools.com/fr/tools/data-bom-remover): Supprimer les caractères BOM (Byte Order Mark) du contenu textuel et des fichiers. Parfait pour nettoyer les fichiers texte avec des problèmes d'encodage. - [Constructeur de pipeline texte](https://elysiatools.com/fr/tools/text-pipeline-builder): Exécute une recette portable de nettoyage et affiche chaque diff, durée et variation de caractères. - [Décodeur de Code QR](https://elysiatools.com/fr/tools/qr-code-decoder): Décode les codes QR des images et extrait le texte ou URL contenu - [Visualiseur JSON de données sportives](https://elysiatools.com/fr/tools/sports-data-json-visualizer): Collez un payload JSON de n’importe quelle API sportive (ESPN, TheSportsDB, balldontlie, football-data.org, api-sports.io) et obtenez un tableau de score clair avec vainqueurs en évidence et statuts des matchs. - [Extracteur d'Emails en Vrac](https://elysiatools.com/fr/tools/bulk-email-extractor): Extrayez toutes les adresses e-mail du texte saisi, des articles, du code source Web ou de contenu mixte. Prend en charge la déduplication et l'exportation vers JSON. ## Exemples - [Exemples JWT](https://elysiatools.com/fr/samples/jwt-samples): Exemples complets de JWT de la structure de base des tokens aux implémentations de sécurité avancées - [Exemples JSON de Terraform Plan](https://elysiatools.com/fr/samples/terraform-plan-json-samples): Fichiers Terraform plan JSON pour visualiser les dependances et revoir les changements, proches de terraform show -json - [Exemples de Traçage Distribué](https://elysiatools.com/fr/samples/distributed-tracing-samples): Exemples complets de traçage distribué utilisant Jaeger, OpenTelemetry et outils d'observabilité modernes - [Exemples PDF](https://elysiatools.com/fr/samples/pdf-samples): Exemples PDF generes par les outils du 2026-02-01 au 2026-02-10 ## Contenu associé - [Outils d interchange JSON et de traduction de formats](https://elysiatools.com/fr/hubs/json-convert): Comparez les outils de conversion JSON pour CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN et d autres formats structures dans un meme hub. - [Outils de conversion de casse, d’encodage et de normalisation de texte](https://elysiatools.com/fr/hubs/text-convert): Comparez les outils de conversion de casse, de largeur de caractères, d’encodage, de quoted-printable et de normalisation de texte dans un hub unique. - [Outils d inspection, de diff et de transformation JSON](https://elysiatools.com/fr/hubs/json-utility): Regroupe dans un meme hub les outils de formatage JSON, comparaison, inspection de chemins, validation de schema, fusion et transformation pour les workflows API et donnees. - [Outils Text](https://elysiatools.com/fr/hubs/text-utility): Découvrez 33 outils text pour des workflows de utility et comparez rapidement des utilitaires proches.