图表皮肤

G2 默认提供了两种图表主题： default、dark。

图表样式设置

新增主题可以使用 Global 上的 registerTheme 接口。

这样就可以在全局切换这个主题或者在 chart 新建的时候指定设置的主题了。

const { Global } = G2; // 获取 Global 全局对象
Global.setTheme('dark'); // 传入值为 'default'、'dark' 的一种，如果不是，那么使用 default 主题。

G2 图表样式的配置项都是设置到全局变量上，可以通过如下两种方式进行局部的样式设置：

（1）方式一：直接赋值给全局对象 Global，但是不推荐

(2) 方式二：使用 Global.setTheme 方法。推荐使用这种方式，使用方法如下：

const theme = G2.Util.deepMix({
  animate: false,
  colors: {...},
  // 具体的配置项详见 api/global.html
}, G2.Theme);
 
G2.Global.setTheme(theme); // 将主题设置为用户自定义的主题

更多 Global 上关于主题的配置属性，可以直接查看 G2.Global 的返回值。

demo 演示

Global 上可以配置的信息：

全局的控制变量：柱子的默认宽度、版本号、折线图遇到 Null 时的处理策略

const Global = {
  version: '3.2.0-beta.3',
  renderer2d: 'canvas',
  // renderer2d: 'svg',
  trackable: true,
  animate: true,
  snapArray: [ 0, 1, 2, 4, 5, 10 ],
  snapCountArray: [ 0, 1, 1.2, 1.5, 1.6, 2, 2.2, 2.4, 2.5, 3, 4, 5, 6, 7.5, 8, 10 ],
  widthRatio: { // 宽度所占的分类的比例
    column: 1 / 2, // 一般的柱状图占比 1/2
    rose: 0.9999999, // 玫瑰图柱状占比 1
    multiplePie: 1 / 1.3 // 多层的饼图、环图
  },
  // 折线图、区域图、path 当只有一个数据时，是否显示成点
  showSinglePoint: false,
  connectNulls: false,
  scales: {
  }
};

Theme 图表皮肤主题

图表皮肤

图表样式设置

demo 演示