Token 主题的开发

创建并解析 token

首先将你想要添加的 token 名称添加入

/packages/paradigm-chart/src/theme/tokenParse.ts

中的 tokenMap 常量中，格式可以参考如下例子：

// Series 颜色
colorVisualizationPrimary: ['bar.seriesColor', 'dvRadar.seriesColor'],

其中 token 中的 colorVisualizationPrimary 为这个 token 的名称，可以通过这个名称添加这个 token 的相关样式。后面的数组中包含了这个 token 目前的适用范围，给这个 token 输入的相关内容会赋给主题样式合集中这两个结构的对象中。

我们假设在初始化范式组件图表前设置一个上述 token 名称的自定义 token，如下所示：

import { setThemeConfigWithToken, mobileAppLight } from './build/bundle.esm.js';

setThemeConfigWithToken(mobileAppLight, {
  colorVisualizationPrimary: ['#FF9500', '#3366FF']
});

那么我们会将上面添加的 token 进行解析并添加入图表默认加载的所有主题样式的合集中。因为名为 colorVisualizationPrimary 的 token 的作用域为'bar.seriesColor' 和 'dvRadar.seriesColor' ，所以会在主题样式中添加或修改样式为以下格式：

{
  "bar": {
    "seriesColor": ["#FF9500","#3366FF"]
  },
  "dvRadar": {
    "seriesColor": ["#FF9500","#3366FF"],
  }
}

现在你需要的 token 格式已经创建好了，并且成功将 token 解析放入了主题样式中，接下来就是对于某个你需要应用这个样式的 series 或 component 进行 parse 并注入这个样式了。如果要添加 token 请首先和设计师沟通后再决定，并注意要在开发前和设计师确定好 token 的使用规范和组件映射。

给 series 或 component 注入样式

在范式组件项目的以下文件夹路径下

'/packages/paradigm-chart/src/theme/'

其中有 mobile,pc 等文件夹，其中这些文件夹内的 ts 文件就是针对对应 series 或者 component 的解析程序。如 mobile/series/dvRadar.ts 就是在移动端场景样式下对于 dvRadar 图表的系列进行解析的方法，其余文件可以此类推。

如果你需要拓展或者新添加解析方法，可以参考其他文件，并注意解析添加的配置是按照配置项的系列还是数据添加。

如果是添加新的解析方法文件，记得在 mobile,pc 等文件夹的 index.ts 文件中针对特定主题样式的 parsers 字段添加相应的解析方式。

预设主题配置

在范式组件项目的以下文件夹路径下

'/packages/paradigm-chart/src/theme/themeConfigStatic.ts'

可以在这个文件中配置默认的 token 预设。

将上面的 token 预设配置好后，可以在 mobile,pc 等文件夹下的 index.ts 文件中配置主题，格式如下：

export const mobileAppLight = {
  name: 'mobile-app-light' as const,
  themeConfig: defaultThemeConfig.shouchao,
  parsers: [
    // series
    dynamicBarThemeParse,
    barThemeParse,
    lineThemeParse,
    treemapThemeParse,
    sankeyThemeParse,
    dvScatterThemeParse,
    dvMarkerThemeParse,
    dvRadarThemeParse,
    // component
    axisPointerThemeParse,
    dataZoomThemeParse,
    graphicParse,
  ],
  use: setCurrentThemeName.bind(null, 'mobile-app-light')
};