关于主题。在 G2 4.x 版本中，主题分为主题样式表以及主题 object（对主题样式表进一步处理，比如：Axis 会处理为各个不同方向的 axis 主题配置）。

  • 调研

    • highcharts 深层结构，但其实也可以认为是主题样式表
    • echarts 没啥借鉴意义，比较混乱，更多建议直接去自定义 chart styles。
    • nivo theming 同 highcharts

  • 实际场景：

    • 在主题配置方面，用户更关心样式表的统一配置
    • 涉及具体组件的样式配置时，更倾向于在具体 chart 实例的时候去修改
    • 还有一个问题：G2 4.x 的主题 object 依赖 @component 的样式属性配置，需要同步更新（比如之前 scrollbar、slider 就是得先了解这两个组件有什么属性，然后去同步更新主题 object，如果是这样，还不如直接在具体实例配置的时候处理好了，这样子类型定义会同步）

设计

两点

  1. 用户只关心一个主题样式表（这个结构可以是平铺的，也可以是结构化的）
    • 样式表先使用 4.x 的平铺结构，后续组件层接入的时候，可以稍作改造
  2. 4.x 中对主题样式表的处理，内置到 geometry、components 使用的时候去处理

目录

  1. - theme
  2.    - light // 存放浅色主题的主题样式表
  3.    - dark  // 存放深色主题的主题样式表
  4.    - util  // 提供获取 axis、legend 等组件以及 geometry 在不同状态下主题样式

API

  • 注册主题 ```typescript /**
    • 注册一个自定义的主题
    • @param name
    • @param theme */ export function registerTheme(name: string, theme: StyleSheet) { THEME_MAP[name.toLowerCase()] = theme; }

/**

  • 根据主题名称，获取主题样式表（应用到各个区域的时候，再去进行 parse）
  • @param name
  • @returns */ export function getTheme(name: string): StyleSheet { return THEME_MAP[name.toLowerCase()]; } ```
  • 配置主题 ```typescript type ViewCfg = { … /**
    • 设置 view 实例主题: 主题名称或者主题样式表 */ theme?: string | StyleSheet; }

// 方式 1 const view = new View({ … theme: { /* StyleSheet / }, });

// 方式 2 view.theme({ /* Partial / }); ```

  • 主题使用（变化点）
    • 之前在各个使用的地方，都是直接 view.getTheme() 获取到处理后的 themeObject，此次改造之后，获取到的是主题样式表，因此需要调用 theme/util 下的方法将主题样式表转换为实际的 themeObject
    • 之前的使用方式，其实很难知道：具体几何图形或者图表组件真正应用的主题样式是什么（因为对themeObject 和用户在具体实例中的配置进行了 merge），此次改造之后，可以做一个局部的存储

改造对比

Before After
image.png
功能不够内聚，每次改动 或许会影响多处