# Экстрактор токенов темы ECharts

Извлекает дизайн-токены — цвета, числа, размеры шрифтов и строки — из JSON темы ECharts и экспортирует их прямо в вашу дизайн-систему. Вставьте объект темы (тот, что регистрируется и передаётся в echarts.init(dom, themeName)) — инструмент обойдёт каждый лист, пометит каждый цвет (с опциональной нормализацией имя/rgb → hex), числовой отступ, размер шрифта и строку, затем выдаст чистые CSS-переменные, конфиг theme.extend для Tailwind, tokens.json Style Dictionary или SCSS-переменные. Мост между темой визуализации ECharts и дизайн-токенами Figma/CSS/Tailwind без копирования каждого значения вручную.

> Каноническая страница: https://elysiatools.com/ru/tools/echarts-theme-token-extractor

- **Категория:** Design

- **Ключевые слова:** echarts, тема, дизайн-токены, css-переменные, tailwind, style dictionary, figma, дизайн-система, палитра, извлечь, json, визуализация, тема графика, scss, мост токенов

## Обзор

Мост от тем визуализации ECharts к вашей дизайн-системе:

1. Вставьте JSON темы ECharts — объект, который вы регистрируете и передаёте в echarts.init(dom, themeName). Это может быть компактная форма (только массив "color") или полная тема с series/axis/textStyle.
2. Экстрактор обходит каждый лист и помечает его: цвета (#hex, rgb()/rgba(), именованные), числовые отступы/размеры, строки размеров шрифта (12px, 1.2rem) и обычные строки. Логические значения, форматёры и z-уровни отсеиваются.
3. При желании нормализуйте цвета: именованные и rgb()/rgba() в hex, чтобы каждый цветной токен был единообразен.
4. Выберите формат вывода и префикс токенов:
   - CSS-переменные → блок :root { --prefix-…: …; } для вставки в стили.
   - Tailwind → объект theme.extend { colors, spacing, fontSize } для tailwind.config.js.
   - Style Dictionary → вложенный tokens.json (каждый токен несёт value + type) для конвейера Style Dictionary.
   - SCSS → переменные $prefix_…: …;.
5. Таблица токенов показывает каждый извлечённый токен с типом, образцом цвета (где применимо) и путём в теме — для аудита перед использованием.

Офлайн и детерминированно: чистый обход JSON, без внешних зависимостей.

## Входные данные

- **JSON темы ECharts** (textarea): { "color": \["#5470c6", "#91cc75", "#fac858"\], "backgroundColor": "#ffffff", "textStyle": { "fontSize": 12, "color": "#333" } }
- **Формат вывода** (select)
- **Префикс токена** (text): e.g. chart (→ --chart-color-1)
- **Нормализация цвета** (select)

## Когда использовать

- При переносе цветовой палитры и стилей графиков ECharts в общую дизайн-систему веб-приложения.
- Для автоматической генерации CSS-переменных или SCSS-кода на основе существующей темы визуализации.
- При необходимости синхронизировать конфигурацию Tailwind CSS или Style Dictionary с настройками графиков без ручного копирования.

## Как это работает

- Вставьте JSON-объект темы ECharts в текстовое поле ввода.
- Выберите желаемый формат вывода (CSS-переменные, Tailwind, Style Dictionary или SCSS) и укажите префикс для токенов.
- Настройте режим нормализации цвета, выбрав преобразование именованных цветов и RGB в HEX или сохранение исходного формата.
- Скопируйте сгенерированный код экспорта и просмотрите таблицу извлеченных токенов для проверки путей и значений.

## Сценарии использования

- Экспорт палитры цветов графика ECharts в CSS-переменные для стилизации окружающего интерфейса дашборда.
- Интеграция шрифтовых настроек и отступов из темы ECharts в конфигурационный файл Tailwind CSS.
- Создание единого файла tokens.json для Style Dictionary на основе конфигурации визуализации данных.

## Частые вопросы

### Какие форматы экспорта поддерживает инструмент?

Инструмент поддерживает экспорт в CSS-переменные, конфигурацию Tailwind (theme.extend), JSON для Style Dictionary и переменные SCSS.

### Можно ли нормализовать цвета при извлечении?

Да, вы можете включить преобразование именованных цветов и значений RGB/RGBA в единый формат HEX.

### Какие типы данных извлекаются из темы ECharts?

Извлекаются цвета, числовые значения отступов и размеров, строки размеров шрифтов и текстовые значения.

### Безопасно ли использовать этот инструмент с конфиденциальными темами?

Да, обработка JSON выполняется полностью в браузере локально, без отправки ваших данных на внешние серверы.

### Что происходит с функциями-форматировщиками и логическими значениями?

Логические значения, функции форматирования и служебные параметры (например, z-уровни) автоматически отфильтровываются при анализе.

## Связанные инструменты

- [Палитра из изображения в design-токены](https://elysiatools.com/ru/tools/image-to-design-tokens): Извлекает доминирующие цвета из изображения методом k-средних и экспортирует их как CSS-переменные / SCSS / конфиг Tailwind / JSON-токены с именами и шкалой оттенков
- [Извлекатель ключей JSON](https://elysiatools.com/ru/tools/json-key-extractor): Извлекает все ключи из объектов JSON с множественными форматами вывода. Идеально для анализа структуры JSON, генерации документации и понимания сложных вложенных объектов.
- [Генератор Диапазонного Графика](https://elysiatools.com/ru/tools/range-chart-generator): Создание диапазонных графиков для визуализации диапазонов мин-макс значений с маркерами медианы и обнаружением выбросов
- [Удалитель BOM Символов](https://elysiatools.com/ru/tools/data-bom-remover): Удаление BOM (Byte Order Mark) символов из текстового и файлового содержимого. Идеально для очистки текстовых файлов с проблемами кодировки.
- [Конструктор текстового конвейера](https://elysiatools.com/ru/tools/text-pipeline-builder): Выполняет переносимый рецепт очистки текста и показывает diff, время и изменения символов на каждом шаге.
- [Декодер QR-кода](https://elysiatools.com/ru/tools/qr-code-decoder): Декодирует QR-коды из изображений и извлекает содержащийся текст или URL
- [Визуализатор спортивных JSON-данных](https://elysiatools.com/ru/tools/sports-data-json-visualizer): Вставьте JSON-пейлоад любого спортивного API (ESPN, TheSportsDB, balldontlie, football-data.org, api-sports.io) — получите аккуратное табло с выделенными победителями и статусами матчей.
- [Массовый Извлекатель Электронной Почты](https://elysiatools.com/ru/tools/bulk-email-extractor): Извлеките все адреса электронной почты из входного текста, статей, веб-исходного кода или смешанного содержимого. Поддерживает дедупликацию и экспорт в JSON.

## Примеры

- [Примеры JWT](https://elysiatools.com/ru/samples/jwt-samples): Полные примеры JWT от базовой структуры токенов до продвинутых реализаций безопасности
- [JSON Примеры Terraform Plan](https://elysiatools.com/ru/samples/terraform-plan-json-samples): Файлы Terraform plan JSON для визуализации зависимостей и проверки изменений, похожие на terraform show -json
- [Примеры Распределенного Трейсинга](https://elysiatools.com/ru/samples/distributed-tracing-samples): Комплексные примеры распределенного трейсинга с использованием Jaeger, OpenTelemetry и современных инструментов
- [PDF Примеры](https://elysiatools.com/ru/samples/pdf-samples): PDF примеры, созданные инструментами 2026-02-01..2026-02-10

## Связанные материалы

- [Инструменты JSON-обмена и перевода форматов](https://elysiatools.com/ru/hubs/json-convert): Сравните инструменты преобразования JSON для CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN и других структурированных форматов в одном хабе.
- [Инструменты конвертации регистра, кодировки и нормализации текста](https://elysiatools.com/ru/hubs/text-convert): Сравните в одном хабе конвертацию регистра, ширины символов, кодировок, работу с quoted-printable и встроенную нормализацию текста.
- [Инструменты для проверки, diff и преобразования JSON](https://elysiatools.com/ru/hubs/json-utility): Соберите в одном хабе инструменты для форматирования JSON, сравнения версий, проверки путей, валидации схем, объединения файлов и преобразования данных для API и data workflows.
- [Инструменты Text](https://elysiatools.com/ru/hubs/text-utility): Изучите 33 инструментов text для сценариев utility и быстро сравните близкие утилиты.