# Extrator de tokens de tema ECharts

Extrai design tokens — cores, números, tamanhos de fonte e strings — de um JSON de tema ECharts e os exporta direto no seu design system. Cole um objeto de tema (o registrado e passado a echarts.init(dom, themeName)) e a ferramenta percorre cada folha, marcando cada cor (com normalização opcional nomeada/rgb → hex), número de espaçamento, tamanho de fonte e string, depois emite variáveis CSS limpas, um config theme.extend do Tailwind, tokens.json do Style Dictionary ou variáveis SCSS. Faz a ponte entre um tema de visualização ECharts e os tokens de design Figma/CSS/Tailwind sem copiar cada valor à mão.

> Página canônica: https://elysiatools.com/pt/tools/echarts-theme-token-extractor

- **Categoria:** Design

- **Palavras-chave:** echarts, tema, design tokens, variáveis css, tailwind, style dictionary, figma, design system, paleta de cores, extrair, json, visualização, tema de gráfico, scss, ponte de tokens

## Visão geral

Uma ponte dos temas de visualização do ECharts para o seu design system:

1. Cole um JSON de tema ECharts — o objeto que você registra e passa a echarts.init(dom, themeName). Pode ser a forma compacta (só um array "color") ou um tema completo com series/axis/textStyle.
2. O extrator percorre cada valor folha e o marca: cores (#hex, rgb()/rgba(), nomes), números de espaçamento/tamanho, strings de tamanho de fonte (12px, 1.2rem) e strings simples. Booleanos, formatadores e z-level são filtrados.
3. Normalize opcionalmente as cores: converta cores nomeadas e rgb()/rgba() para hex, para que cada token de cor seja uniforme.
4. Escolha o formato de saída e um prefixo de token:
   - Variáveis CSS → um bloco :root { --prefix-…: …; } para colar numa folha de estilo.
   - Tailwind → um objeto theme.extend { colors, spacing, fontSize } para tailwind.config.js.
   - Style Dictionary → um tokens.json aninhado (cada token traz value + type) para o pipeline Style Dictionary.
   - SCSS → variáveis $prefix_…: …;.
5. A tabela de tokens mostra cada token extraído com seu tipo, uma amostra de cor quando aplicável e o caminho-fonte no tema, para auditar a extração antes de confiar.

Offline e determinístico: percurso JSON puro, sem dependência externa.

## Entradas

- **JSON do tema ECharts** (textarea): { "color": \["#5470c6", "#91cc75", "#fac858"\], "backgroundColor": "#ffffff", "textStyle": { "fontSize": 12, "color": "#333" } }
- **Formato de saída** (select)
- **Prefixo do token** (text): e.g. chart (→ --chart-color-1)
- **Normalização de cor** (select)

## Quando usar

- Quando você precisa sincronizar a paleta de cores e tipografia de um gráfico do ECharts com o design system global da sua aplicação.
- Ao migrar temas legados do ECharts para variáveis CSS modernas ou configurações do Tailwind CSS sem precisar copiar valores manualmente.
- Durante a automação de pipelines de design tokens que utilizam o Style Dictionary para manter a consistência visual entre gráficos e componentes de interface.

## Como funciona

- Cole o JSON do tema do ECharts (o objeto registrado no echarts.init) no campo de entrada.
- Configure o formato de saída desejado (CSS, Tailwind, SCSS ou Style Dictionary) e defina um prefixo opcional para os tokens.
- Escolha se deseja normalizar as cores convertendo formatos nomeados ou RGB/RGBA diretamente para hexadecimal.
- Copie o código gerado e visualize a tabela detalhada com a origem de cada token extraído.

## Casos de uso

- Exportação de paletas de cores de gráficos para variáveis CSS globais de um projeto web.
- Integração de temas do ECharts em arquivos de configuração tailwind.config.js para estilização consistente.
- Geração de arquivos tokens.json estruturados para consumo em pipelines multiplataforma com Style Dictionary.

## Perguntas frequentes

### Quais formatos de exportação são suportados?

A ferramenta suporta variáveis CSS (:root), configurações do Tailwind (theme.extend), tokens.json do Style Dictionary e variáveis SCSS.

### Posso converter cores em formato RGB ou nomes para Hexadecimal?

Sim, basta selecionar a opção de normalização de cor para converter automaticamente formatos nomeados e RGB/RGBA para Hexadecimal.

### O que acontece com funções de formatação ou booleanos do tema?

Valores booleanos, funções formatadoras e propriedades de nível Z (z-level) são filtrados automaticamente, extraindo apenas tokens de design válidos.

### É necessário instalar alguma dependência para usar o extrator?

Não, a extração é feita de forma totalmente offline e determinística diretamente no seu navegador.

### Como funciona o prefixo de token?

O prefixo adiciona um identificador no início de cada variável gerada (por exemplo, transformando um token de cor em `--prefixo-color-1`), facilitando a organização no seu código.

## Ferramentas relacionadas

- [De paleta de imagem para design tokens](https://elysiatools.com/pt/tools/image-to-design-tokens): Extrai cores dominantes da imagem por k-means e exporta como variáveis CSS / SCSS / config Tailwind / tokens JSON, com nomes e escala de tons
- [JSON Key Extractor](https://elysiatools.com/pt/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.
- [Gerador de Gráfico de Intervalo](https://elysiatools.com/pt/tools/range-chart-generator): Criar gráficos de intervalo para visualizar intervalos de valores mínimo-máximo com marcadores de mediana e detecção de outliers
- [Removedor de Caracteres BOM](https://elysiatools.com/pt/tools/data-bom-remover): Remover caracteres BOM (Byte Order Mark) de conteúdo de texto e arquivos. Perfeito para limpar arquivos de texto com problemas de codificação.
- [Construtor de pipeline de texto](https://elysiatools.com/pt/tools/text-pipeline-builder): Executa uma receita portátil de limpeza de texto e mostra cada diff, duração e mudança de caracteres.
- [Decodificador de Código QR](https://elysiatools.com/pt/tools/qr-code-decoder): Decodifica códigos QR de imagens e extrai o texto ou URL contido
- [Visualizador JSON de dados desportivos](https://elysiatools.com/pt/tools/sports-data-json-visualizer): Cole um payload JSON de qualquer API desportiva (ESPN, TheSportsDB, balldontlie, football-data.org, api-sports.io) e obtenha um placar limpo com vencedores destacados e estados dos jogos.
- [Extrator de Emails em Massa](https://elysiatools.com/pt/tools/bulk-email-extractor): Extraia todos os endereços de e-mail de texto de entrada, artigos, código-fonte da web ou conteúdo misto. Suporta desduplicação e exportação para JSON.

## Exemplos

- [Exemplos JWT](https://elysiatools.com/pt/samples/jwt-samples): Exemplos completos de JWT da estrutura básica de tokens às implementações de segurança avançadas
- [Amostras JSON de Terraform Plan](https://elysiatools.com/pt/samples/terraform-plan-json-samples): Arquivos Terraform plan JSON para visualizacao de dependencias e revisao de mudancas, no estilo terraform show -json
- [Exemplos de Rastreamento Distribuído](https://elysiatools.com/pt/samples/distributed-tracing-samples): Exemplos completos de rastreamento distribuído usando Jaeger, OpenTelemetry e ferramentas modernas de observabilidade
- [Exemplos PDF](https://elysiatools.com/pt/samples/pdf-samples): Exemplos PDF gerados por ferramentas de 2026-02-01 a 2026-02-10

## Conteúdo relacionado

- [Ferramentas de intercambio JSON e traducao de formatos](https://elysiatools.com/pt/hubs/json-convert): Compare ferramentas de conversao JSON para CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN e outros formatos estruturados em um unico hub.
- [Ferramentas de conversão de caixa, codificação e normalização de texto](https://elysiatools.com/pt/hubs/text-convert): Compare conversão de caixa de texto, conversão de largura de caracteres, conversão de codificação, tratamento de quoted-printable e normalização de texto em um único hub.
- [Ferramentas de inspecao, diff e transformacao JSON](https://elysiatools.com/pt/hubs/json-utility): Reune em um so hub ferramentas para formatar JSON, comparar mudancas, inspecionar caminhos, validar schema, mesclar arquivos e transformar dados para fluxos de API e dados.
- [Ferramentas de Text](https://elysiatools.com/pt/hubs/text-utility): Explore 33 ferramentas de text para fluxos de utility e encontre utilitários próximos com rapidez.