¿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.

Elysia Tools

Navegación

Design

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.

Detalles

Qué te ayuda a hacer esta herramienta

Un puente desde los temas de visualización de ECharts a tu design system:

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.
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.
Normaliza opcionalmente los colores: convierte colores nombrados y rgb()/rgba() a hex para que cada token de color sea uniforme.
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.

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.

Ejecución

Ejecutar esta herramienta

Completa el formulario, ejecuta la herramienta y revisa el resultado en un solo lugar.

Ejecuciones de ejemplo preparadas

Haz clic en un ejemplo para completar el formulario automáticamente. Los archivos aún deben subirse.

2 ejemplos

Tema tipo ECharts por defecto → variables CSS

Un tema pequeño con una paleta de 3 colores, fondo y estilo de texto, exportado como propiedades personalizadas CSS :root con colores normalizados a hex y prefijo "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>

Tema rico → Tailwind theme.extend

Un tema más completo (paleta de 5 colores, tamaños de fuente, espaciado) exportado como un bloque theme.extend listo para pegar en 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>

Entradas

Completa los campos necesarios y ejecuta la herramienta.

4 opciones

ContenidoPega o escribe los valores principales.2

JSON del tema de EChartstextareaObligatorioPrefijo de tokentextOpcional

AjustesAjusta formatos, rangos, números y modos.2

Formato de salidaselectOpcionalNormalización de colorselectOpcional

Resultado

Listo para ejecutar

Al ejecutar la herramienta, aquí verás archivos, texto, datos estructurados o salida en streaming.

Ejemplos

Ejemplos que encajan con esta herramienta

Relacionado

Extractor de tokens de tema ECharts

Qué te ayuda a hacer esta herramienta

Ejecutar esta herramienta

Ejecuciones de ejemplo preparadas

Entradas

Resultado

Ejemplos que encajan con esta herramienta

Continuar con herramientas y temas relacionados

Ejecuciones de ejemplo preparadas

Entradas

Resultado

Conoce cuándo usar esta herramienta, qué admite y cómo la aplican los usuarios.

Datos clave

Resumen

Cuándo usarlo

Cómo funciona

Casos de uso

Ejemplos

1. Conversión de tema básico a variables CSS

2. Integración de tema complejo en Tailwind CSS

Preguntas frecuentes

Muestras JWT

Muestras JSON de Terraform Plan

Muestras de Trazado Distribuido

Muestras PDF

De paleta de imagen a design tokens

Extractor de Claves JSON

Generador de Gráfico de Rango

Removedor de Caracteres BOM

Herramientas de intercambio JSON y traduccion de formatos

Herramientas de conversión de texto, codificación y normalización

Herramientas de inspeccion, diff y transformacion JSON

Herramientas de Text