# Extractor de tokens de tema ECharts Extrae design tokens — colores, números, tamaños de fuente y cadenas — de un JSON de tema ECharts y expórtalos directamente a tu design system. Pega un objeto de tema (el que registras y pasas a echarts.init(dom, themeName)) y la herramienta recorre cada hoja, etiquetando cada color (con normalización opcional nombrado/rgb → hex), número de espaciado, tamaño de fuente y cadena, para luego emitir variables CSS limpias, una configuración theme.extend de Tailwind, tokens.json de Style Dictionary o variables SCSS. Tiende el puente entre un tema de visualización ECharts y los tokens de diseño Figma/CSS/Tailwind sin copiar cada valor a mano. > Página canónica: https://elysiatools.com/es/tools/echarts-theme-token-extractor - **Categoría:** Design - **Palabras clave:** echarts, tema, design tokens, variables css, tailwind, style dictionary, figma, design system, paleta de colores, extraer, json, visualización, tema de gráfico, scss, puente de tokens ## Descripción general Un puente desde los temas de visualización de ECharts a tu design system: 1. Pega un JSON de tema de ECharts — el objeto que registras y pasas a echarts.init(dom, themeName). Puede ser la forma compacta (solo un array "color") o un tema completo con series/axis/textStyle. 2. El extractor recorre cada valor hoja y lo etiqueta: colores (#hex, rgb()/rgba(), nombrados), números de espaciado/tamaño, strings de tamaño de fuente (12px, 1.2rem) y strings simples. Booleanos, formateadores y z-level se filtran. 3. Normaliza opcionalmente los colores: convierte colores nombrados y rgb()/rgba() a hex para que cada token de color sea uniforme. 4. Elige el formato de salida y un prefijo de token: - Variables CSS → un bloque :root { --prefix-…: …; } que puedes pegar en una hoja de estilos. - Tailwind → un objeto theme.extend { colors, spacing, fontSize } para tailwind.config.js. - Style Dictionary → un tokens.json anidado (cada token lleva value + type) para el pipeline de Style Dictionary. - SCSS → $prefix_…: …; variables. 5. La tabla de tokens muestra cada token extraído con su tipo, una muestra de color cuando aplica y la ruta fuente en el tema, para auditar la extracción antes de confiar. Offline y determinista: recorrido JSON puro, sin dependencias externas. ## Entradas - **JSON del tema de ECharts** (textarea): { "color": \["#5470c6", "#91cc75", "#fac858"\], "backgroundColor": "#ffffff", "textStyle": { "fontSize": 12, "color": "#333" } } - **Formato de salida** (select) - **Prefijo de token** (text): e.g. chart (→ --chart-color-1) - **Normalización de color** (select) ## Cuándo usarlo - Cuando necesita sincronizar la paleta de colores y tipografías de sus gráficos de ECharts con el sistema de diseño global de su aplicación. - Al migrar un tema visual de ECharts a variables CSS reutilizables o configuraciones de Tailwind CSS sin copiar valores manualmente. - Para normalizar formatos de color heterogéneos, como nombres de color o valores RGB, de un tema de gráficos a formato hexadecimal uniforme. ## Cómo funciona - Pegue el objeto JSON del tema de ECharts que utiliza para inicializar sus gráficos en el campo de entrada. - Configure las opciones de extracción, incluyendo el formato de salida (CSS, Tailwind, SCSS o Style Dictionary), el prefijo de los tokens y la normalización de color a HEX. - La herramienta analiza de forma recursiva el JSON, filtra elementos no deseados como funciones o booleanos, y genera el código estructurado correspondiente. - Copie el código generado o revise la tabla detallada de tokens extraídos con sus respectivas rutas de origen. ## Casos de uso - Exportación de la paleta de colores de un gráfico ECharts a variables CSS personalizadas para mantener la coherencia visual en el sitio web. - Integración de los tamaños de fuente y espaciados de un tema de ECharts en el archivo de configuración tailwind.config.js. - Generación de un archivo tokens.json compatible con Style Dictionary para automatizar la distribución de tokens multiplataforma. ## Preguntas frecuentes ### ¿Qué formatos de salida admite la herramienta? Admite variables CSS (:root), configuraciones extendidas de Tailwind CSS, archivos JSON para Style Dictionary y variables SCSS. ### ¿Cómo maneja la herramienta los diferentes formatos de color? Puede mantener los colores en su formato original o normalizar automáticamente valores RGB, RGBA y nombres de color a formato hexadecimal (HEX). ### ¿Qué elementos del JSON de ECharts se descartan durante la extracción? Se omiten valores booleanos, funciones formateadoras, niveles Z (z-level) y otras propiedades de configuración que no representan tokens de diseño. ### ¿Es seguro procesar mis archivos de tema en esta página? Sí, el procesamiento se realiza completamente en su navegador de forma local y determinista, sin enviar datos a servidores externos. ### ¿Para qué sirve la opción de prefijo de token? Permite añadir un prefijo personalizado a los nombres de las variables generadas para evitar colisiones en su hoja de estilos. ## Herramientas relacionadas - [De paleta de imagen a design tokens](https://elysiatools.com/es/tools/image-to-design-tokens): Extrae los colores dominantes de una imagen con k-means y expórtalos como variables CSS / SCSS / configuración Tailwind / tokens JSON, con nombres y escala de tonos - [Extractor de Claves JSON](https://elysiatools.com/es/tools/json-key-extractor): Extrae todas las claves de objetos JSON con múltiples formatos de salida. Perfecto para analizar estructura JSON, generación de documentación y entender objetos anidados complejos. - [Generador de Gráfico de Rango](https://elysiatools.com/es/tools/range-chart-generator): Crear gráficos de rango para visualizar rangos de valores mín-máx con marcadores de mediana y detección de valores atípicos - [Removedor de Caracteres BOM](https://elysiatools.com/es/tools/data-bom-remover): Eliminar caracteres BOM (Byte Order Mark) de contenido de texto y archivos. Perfecto para limpiar archivos de texto con problemas de codificación. - [Constructor de canalización de texto](https://elysiatools.com/es/tools/text-pipeline-builder): Ejecuta una receta portátil de limpieza de texto y muestra cada diff, tiempo y cambio de caracteres. - [Decodificador de Código QR](https://elysiatools.com/es/tools/qr-code-decoder): Decodifica códigos QR de imágenes y extrae el texto o URL contenido - [Visualizador JSON de datos deportivos](https://elysiatools.com/es/tools/sports-data-json-visualizer): Pega un payload JSON de cualquier API deportiva (ESPN, TheSportsDB, balldontlie, football-data.org, api-sports.io) y obtén un marcador limpio con ganadores destacados y estados de partido. - [Extractor de Correo Electrónico Masivo](https://elysiatools.com/es/tools/bulk-email-extractor): Extrae todas las direcciones de correo electrónico de texto de entrada, artículos, código fuente web o contenido mixto. Soporta deduplicación y exportación a JSON. ## Ejemplos - [Muestras JWT](https://elysiatools.com/es/samples/jwt-samples): Ejemplos completos de JWT desde la estructura básica de tokens hasta implementaciones de seguridad avanzadas - [Muestras JSON de Terraform Plan](https://elysiatools.com/es/samples/terraform-plan-json-samples): Archivos Terraform plan JSON para visualizacion de dependencias y revision de cambios, similares a terraform show -json - [Muestras de Trazado Distribuido](https://elysiatools.com/es/samples/distributed-tracing-samples): Ejemplos completos de trazado distribuido usando Jaeger, OpenTelemetry y herramientas de observabilidad modernas - [Muestras PDF](https://elysiatools.com/es/samples/pdf-samples): Muestras PDF generadas por herramientas 2026-02-01 a 2026-02-10 ## Contenido relacionado - [Herramientas de intercambio JSON y traduccion de formatos](https://elysiatools.com/es/hubs/json-convert): Compara herramientas de conversion JSON para CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN y otros formatos estructurados en un solo hub. - [Herramientas de conversión de texto, codificación y normalización](https://elysiatools.com/es/hubs/text-convert): Compara conversión de mayúsculas y minúsculas, conversión de ancho de caracteres, conversión de codificación, manejo de quoted-printable y normalización de texto en un solo hub. - [Herramientas de inspeccion, diff y transformacion JSON](https://elysiatools.com/es/hubs/json-utility): Reune en un solo hub herramientas para formatear JSON, comparar cambios, inspeccionar rutas, validar esquemas, combinar archivos y transformar datos para flujos de API y datos. - [Herramientas de Text](https://elysiatools.com/es/hubs/text-utility): Explora 33 herramientas de text para flujos de utility y encuentra utilidades cercanas con rapidez.