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

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

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

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

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

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

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

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

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

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

Elysia Tools

Навигация

Design

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

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

Детали

С чем помогает этот инструмент

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

Вставьте JSON темы ECharts — объект, который вы регистрируете и передаёте в echarts.init(dom, themeName). Это может быть компактная форма (только массив "color") или полная тема с series/axis/textStyle.
Экстрактор обходит каждый лист и помечает его: цвета (#hex, rgb()/rgba(), именованные), числовые отступы/размеры, строки размеров шрифта (12px, 1.2rem) и обычные строки. Логические значения, форматёры и z-уровни отсеиваются.
При желании нормализуйте цвета: именованные и rgb()/rgba() в hex, чтобы каждый цветной токен был единообразен.
Выберите формат вывода и префикс токенов:

CSS-переменные → блок :root { --prefix-…: …; } для вставки в стили.
Tailwind → объект theme.extend { colors, spacing, fontSize } для tailwind.config.js.
Style Dictionary → вложенный tokens.json (каждый токен несёт value + type) для конвейера Style Dictionary.
SCSS → переменные $prefix_…: …;.

Таблица токенов показывает каждый извлечённый токен с типом, образцом цвета (где применимо) и путём в теме — для аудита перед использованием.

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

Запуск

Запустить этот инструмент

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

Подготовленные примеры запуска

Нажмите пример, чтобы автоматически заполнить форму. Файлы по-прежнему нужно загрузить.

2 примеров

Тема в стиле ECharts по умолчанию → CSS-переменные

Небольшая тема с 3-цветной палитрой серии, фоном и стилем текста, экспортированная как :root CSS custom properties с нормализацией цветов в hex и префиксом "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>

Богатая тема → Tailwind theme.extend

Более полный тема (5-цветная палитра, размеры шрифта, отступы), экспортированная как блок theme.extend, готовый вставить в 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>

Ввод

Заполните нужные поля и запустите инструмент.

4 параметров

СодержимоеВставьте или введите основные значения.2

JSON темы EChartstextareaОбязательноПрефикс токенаtextНеобязательно

НастройкиНастройте форматы, диапазоны, числа и режимы.2

Формат выводаselectНеобязательноНормализация цветаselectНеобязательно

Результат

Готово к запуску

После запуска здесь появятся файлы, текст, структурированные данные или потоковый вывод.

Примеры

Примеры для этого инструмента

Связано

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

С чем помогает этот инструмент

Запустить этот инструмент

Подготовленные примеры запуска

Ввод

Результат

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Подготовленные примеры запуска

Ввод

Результат

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Обзор

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

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

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

Примеры

1. Экспорт базовой темы ECharts в CSS-переменные

2. Интеграция темы ECharts в Tailwind CSS

FAQ

Примеры JWT

JSON Примеры Terraform Plan

Примеры Распределенного Трейсинга

PDF Примеры

Палитра из изображения в design-токены

Извлекатель ключей JSON

Генератор Диапазонного Графика

Удалитель BOM Символов

Инструменты JSON-обмена и перевода форматов

Инструменты конвертации регистра, кодировки и нормализации текста

Инструменты для проверки, diff и преобразования JSON

Инструменты Text