跳到主要内容

Token 主题设计的注意事项

设计稿地址

此设计稿包含了部分已设计好的 token 名称与柱状图表运用 token 设计的范例，后续开发可以继续拓展 Token 的适用范围与名称，但需要和可视化组一起讨论来确定是否要添加某类 token。

Token 主题的设计思路​

通过把主题解析过程（本质上就是解析函数）和主题配置提供的一个 token 解析方法，返回一个主题配置，最终合并到整个 standard-chart 实例中。

主题解析​

1、主题解析其实是对 option 的加工，使之符合我们的范式，得到的结果仍然是一个静态配置，和渲染无关，在以后的迭代中，主题解析函数可能仍然会增加，不同业务方的差异仍然可能通过差异化的主题解析函数来实现。

主题配置是一个对象，完全是静态资源，但是以后主要通过 token 来做标准化，即新增 token，然后基于 token 的不同组合来配置主题。token 解析得到的结果是一份不全的主题配置，得到这份主题配置去和默认主题配置做合并而得到最终的主题配置。所以 token 解析的目的就是在主题解析之前确定好主题配置，属于主题标准化范畴。

2、standard-chart 新增一个 registerTheme 方法，用于接收 token 解析的结果 tokenResult 和主题对象（其有三个属性，分别是主题名称、默认主题配置和主题解析函数），将主题配置合并后，将主题名称、最终主题配置和主题解析函数注册回 standard-chart 中，之后就可以按照原先的方式执行 init 方法。

以下是在初始化 standard-chart 时注册主题的方法之一，也可以进行单独注册。

import presetThemes from './theme';
import { registerTheme } from './core/theme';
import { setThemeConfigWithToken } from './theme/themeConfig'

presetThemes.forEach(theme => {
  setThemeConfigWithToken(theme);
  registerTheme(theme);
});