# ECharts 主题 Token 抽取器

从 ECharts 主题 JSON 抽取设计 token——颜色、数字、字号与字符串——并直接导出到你的设计系统。粘贴一个主题对象（即通过 echarts.init(dom, themeName) 注册的那种），工具遍历每个叶子节点，为每个颜色（可选地将命名色/rgb 规范化为 hex）、间距数字、字号与字符串打标，然后输出干净的 CSS 变量、Tailwind theme.extend 配置、Style Dictionary tokens.json 或 SCSS 变量。在 ECharts 可视化主题与 Figma/CSS/Tailwind 设计 token 之间架桥，无需逐个手抄。

> 标准页面: https://elysiatools.com/zh/tools/echarts-theme-token-extractor

- **分类:** Design

- **关键词:** echarts, 主题, 设计 token, css 变量, tailwind, style dictionary, figma, 设计系统, 调色板, 抽取, json, 可视化, 图表主题, scss, token 桥接

## 概述

从 ECharts 可视化主题到你的设计系统的桥梁：

1. 粘贴 ECharts 主题 JSON——即你注册并传给 echarts.init(dom, themeName) 的对象。可以是紧凑形式（仅一个 "color" 数组），也可以是含 series/axis/textStyle 的完整主题。
2. 抽取器遍历每个叶子值并打标：颜色（#hex、rgb()/rgba()、命名色）、数字间距/尺寸、字号字符串（12px、1.2rem）与普通字符串。布尔值、格式化函数、z 层级会被过滤掉。
3. 可选规范化颜色：将命名色与 rgb()/rgba() 转为 hex，使每个颜色 token 统一。
4. 选择输出格式与 token 前缀：
   - CSS 变量 → 可直接放进样式表的 :root { --prefix-…: …; } 块。
   - Tailwind → 用于 tailwind.config.js 的 theme.extend { colors, spacing, fontSize } 对象。
   - Style Dictionary → 嵌套 tokens.json（每个 token 带 value + type），供 Style Dictionary 流水线使用。
   - SCSS → $prefix_…: …; 变量。
5. token 表显示每个抽取的 token 的类型、颜色色板（适用时）以及主题中的源路径，便于在信任前审计抽取结果。

离线且确定：纯 JSON 遍历，无外部依赖。

## 输入项

- **ECharts 主题 JSON** (textarea): { "color": \["#5470c6", "#91cc75", "#fac858"\], "backgroundColor": "#ffffff", "textStyle": { "fontSize": 12, "color": "#333" } }
- **输出格式** (select)
- **Token 前缀** (text): e.g. chart (→ --chart-color-1)
- **颜色规范化** (select)

## 适用场景

- 需要将现有的 ECharts 图表主题配色与前端项目的 CSS 变量或 Tailwind 配置文件进行同步时。
- 在构建统一的设计系统时，需要从图表主题中批量提取颜色、字号等 Token，避免手动复制。
- 需要规范化 ECharts 主题中的颜色格式，将命名颜色或 RGB 格式统一转换为标准的十六进制（Hex）格式时。

## 工作原理

- 在输入框中粘贴您的 ECharts 主题 JSON 配置对象。
- 选择所需的输出格式（如 CSS 变量、Tailwind、Style Dictionary 或 SCSS）并设置可选的 Token 前缀与颜色规范化模式。
- 工具将自动遍历 JSON 树的叶子节点，过滤掉函数和布尔值，提取出颜色、数字和字号，并即时生成对应的格式化代码与 Token 审计表。

## 使用案例

- 快速将 ECharts 官方或自定义主题的调色板转换为 Tailwind CSS 的颜色扩展配置。
- 提取图表主题中的文字大小和间距数字，生成符合 Style Dictionary 规范的 tokens.json 文件。
- 将复杂的图表主题 JSON 扁平化为 CSS 自定义属性（:root 变量），便于在全局样式表中直接引用。

## 常见问题

### 这个工具支持哪些输出格式？

支持 CSS 变量、Tailwind 配置 (theme.extend)、Style Dictionary (tokens.json) 以及 SCSS 变量。

### 颜色规范化功能有什么作用？

它可以自动将 ECharts 主题中的命名颜色（如 'red'）或 rgb/rgba 颜色转换为统一的 Hex 十六进制格式。

### 哪些类型的数据会被过滤掉？

工具会自动过滤掉布尔值、格式化函数（formatter）以及 z 轴层级等非设计 Token 属性。

### 我可以为提取的 Token 添加自定义前缀吗？

可以，在“Token 前缀”输入框中填写前缀（例如 chart），生成的变量名将自动带上该前缀。

### 数据处理是在服务器端进行的吗？

不是，所有 JSON 解析和 Token 提取操作均在您的浏览器本地离线完成，确保数据安全。

## 相关工具

- [图片调色板转设计令牌](https://elysiatools.com/zh/tools/image-to-design-tokens): 从图片中用 k-means 聚类提取主色，导出为 CSS 变量 / SCSS 变量 / Tailwind 配置 / JSON 设计令牌，并自动为每个颜色生成命名色阶
- [JSON键提取器](https://elysiatools.com/zh/tools/json-key-extractor): 从JSON对象中提取所有键，支持多种输出格式。非常适合分析JSON结构、生成文档和理解复杂的嵌套对象。
- [范围图生成器](https://elysiatools.com/zh/tools/range-chart-generator): 创建范围图来可视化最小值-最大值范围，支持中位数标记和异常值检测
- [BOM字符移除器](https://elysiatools.com/zh/tools/data-bom-remover): 从文本和文件内容中移除BOM（字节顺序标记）字符。非常适合清理有编码问题的文本文件、修复CSV导入和为处理准备数据。 功能特点： - 检测并移除UTF-8 BOM (EF BB BF) - 检测并移除UTF-16 BOM (FE FF 或 FF FE) - 检测并移除UTF-32 BOM (00 00 FE FF 或 FF FE 00 00) - 支持多种输入格式 - 可视化BOM字符显示 - 详细检测报告 - 支持批量文本处理 常见用途： - 修复CSV文件导入错误 - 清理文本文件编码问题 - 为JSON解析准备数据 - 修复XML解析问题 - 解决API数据编码冲突 - 标准化文本数据格式
- [文本流水线构建器](https://elysiatools.com/zh/tools/text-pipeline-builder): 执行可移植的文本清洗配方，并查看每步 diff、耗时和字符变化。
- [二维码解码器](https://elysiatools.com/zh/tools/qr-code-decoder): 从图片中解码二维码并提取包含的文本或网址
- [体育数据 JSON 可视化器](https://elysiatools.com/zh/tools/sports-data-json-visualizer): 粘贴任意体育 API（ESPN、TheSportsDB、balldontlie、football-data.org、api-sports.io）的 JSON 数据，自动识别格式并渲染成清晰的记分板（胜方高亮、含比赛状态）。
- [批量邮箱提取器](https://elysiatools.com/zh/tools/bulk-email-extractor): 从输入文本、文章、网页源码或混合内容中提取所有邮箱地址。支持去重和导出为JSON格式。

## 示例

- [JWT 示例](https://elysiatools.com/zh/samples/jwt-samples): 从基础令牌结构到高级安全实现的全面JWT示例
- [Terraform Plan JSON 样本](https://elysiatools.com/zh/samples/terraform-plan-json-samples): 用于依赖可视化和变更审查的 Terraform plan JSON 文件样本，贴近 terraform show -json 输出结构
- [分布式追踪示例](https://elysiatools.com/zh/samples/distributed-tracing-samples): 使用 Jaeger、OpenTelemetry 和其他现代可观测性工具的综合分布式追踪示例，适用于微服务架构
- [PDF示例](https://elysiatools.com/zh/samples/pdf-samples): 2026-02-01 到 2026-02-10 工具生成的PDF示例

## 相关内容

- [JSON 交换与格式翻译工具](https://elysiatools.com/zh/hubs/json-convert): 在一个专题里比较 JSON 与 CSV、YAML、TOML、GraphQL、XML、Markdown、Excel、BSON、EDN 等结构化格式之间的转换工具。
- [文本大小写、编码与规范化转换工具](https://elysiatools.com/zh/hubs/text-convert): 在一个专题中比较文本大小写转换、全半角转换、编码转换、Quoted-Printable 处理和行内文本规范化工具。
- [JSON 检查、对比与转换工具](https://elysiatools.com/zh/hubs/json-utility): 把 JSON 格式化、差异对比、路径检查、Schema 校验、合并、转换和导出工具集中到一个专题中，适合 API 与数据处理流程。
- [Text 工具专题](https://elysiatools.com/zh/hubs/text-utility): 探索 33 个围绕 text 的 utility 工作流工具，快速找到相近能力。