自定义主题
- 定义全新的主题结构
  - 主题属性
- 自定义主题样式表
  - 主题样式表结构

自定义主题

G2 提供了自定义主题机制以允许用户切换、定义图表主题。包括：

定义全新的主题结构
基于已有主题结构，切换不同的主题样式表

定义全新的主题结构

import { registerTheme, Chart } from '@antv/g2';
// Step 1: 注册主题
registerTheme('newTheme', {
  defaultColor: 'red',
});
// Step 2: 使用
chart.theme('newTheme');

主题属性

下表列出了组成主题的大配置项上的具体属性：

主题属性	类型	描述
`defaultColor`	string	主题色
`padding`	number	number[]
`fontFamily`	string	图表字体
`colors`	string[]	分类颜色色板，分类个数小于 10 时使用
`colors20`	string[]	分类颜色色板，分类个数大于 10 时使用
`columnWidthRatio`	number	一般柱状图宽度占比，0 - 1 范围数值
`maxColumnWidth`	number	柱状图最大宽度，像素值
`minColumnWidth`	number	柱状图最小宽度，像素值
`roseWidthRatio`	number	玫瑰图占比，0 - 1 范围数值
`multiplePieWidthRatio`	number	多层饼图/环图占比，_0 - 1 范围数值
`shapes`	object	配置每个 geometry 映射的 shape 类型
`sizes`	number	配置 geometry 映射 size 范围
`geometries`	object	配置每个 Geometry 下每个 shape 的样式，包括默认样式以及各个状态下的样式
`components`	object	配置坐标轴，图例，tooltip, annotation 的主题样式
`labels`	object	配置 Geometry 下 label 的主题样式
`innerLabels`	object	配置 Geometry 下展示在图形内部的 labels 的主题样式
`pieLabels`	object	配置饼图 labels 的主题样式

关于以上每个属性的结构及内容，详见G2 主题配置项详解。

自定义主题样式表

对于图表主题，很多时候只是想切换样式风格，比如更改颜色、字体大小、边框粗细等，并不需要更改主题结构，这个时候就可以通过自定义主题样式表，然后应用于默认的主题结构即可。

import { getStyleSheet, getTheme, registerStyleSheet, registerTheme } from '[email protected]/g2';
// 定义并注册 dark 的主题样式表
registerStyleSheet('dark', {});
// 基于默认的主题结构，应用 dark 主题样式表定义全新的暗黑色系主题
registerTheme('dark', 'dark');
// 使用
chart.theme('dark');

主题样式表结构

我们整理了完整的主题样式表结构，详见 API 类型定义。