---
title: 主题配置项详解
order: 7
---

## 基础配置

- 主题色： defaultColor
- 字体：fontFamily
- 图表内边距：padding，默认 'auto' 自动计算

## 图形属性映射

- 色板：colors
- 形状：shapes，定义每个几何标记对应的 shapes 列表
- 大小: sizes，映射的图形大小范围

## 图形样式

因为 G2 的图形是由 Geometry + Shape 组成的:

| **geometry 类型** |                                                                                                                         **shape 类型**                                                                                                                         |                                                                                                                     **解释**                                                                                                                      |
| :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|       point       | - 'circle'- 'square'- 'bowtie'- 'diamond'- 'hexagon'- 'triangle'- 'triangle-down'- 'hollow-circle'- 'hollow-square'- 'hollow-bowtie'- 'hollow-diamond'- 'hollow-hexagon'- 'hollow-triangle'- 'hollow-triangle-down'- 'cross'- 'tick'- 'plus'- 'hyphen'- 'line' |        hollow 开头的图形都是空心的。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*SOzoR4n967MAAAAAAAAAAABkARQnAQ)![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*AyLUTY60MDkAAAAAAAAAAABkARQnAQ)        |
|       line        |                                                                                                  - 'line'- 'dot'- 'dash'- 'smooth'- 'hv'- 'vh'- 'hvh'- 'vhv'                                                                                                   |                                                  'hv', 'vh', 'hvh', 'vhv' 用于绘制阶梯线图。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*yMFrQKD52WcAAAAAAAAAAABkARQnAQ)                                                   |
|       area        |                                                                                                           - 'area'- 'smooth'- 'line'- 'smooth-line'                                                                                                            |                                       'area' 和 'smooth-line' 是填充内容的区域图，其他图表是空心的线图。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*nX8vR4cShMYAAAAAAAAAAABkARQnAQ)                                       |
|     interval      |                                                                                                  - 'rect'- 'hollow-rect'- 'line'- 'tick'- 'funnel'- 'pyramid'                                                                                                  |                  'hollow-rect' 是空心的矩形，'line' 和 'tick' 都是线段，'funnel' 用于绘制漏斗图；'pyramid' 用于绘制金字塔图。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*0H-zQrrV7YcAAAAAAAAAAABkARQnAQ)                  |
|      polygon      |                                                                                                                          - 'polygon'                                                                                                                           |                                                               polygon：多边形。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*QgsPTLQ3eLUAAAAAAAAAAABkARQnAQ)                                                                |
|      schema       |                                                                                                                       - 'box'- 'candle'                                                                                                                        | 目前仅支持箱须图('box')、K 线图('candle')。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*olU9QYwnMgMAAAAAAAAAAABkARQnAQ)![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*JX_ISqY-UIAAAAAAAAAAAABkARQnAQ) |
|      violin       |                                                                                                        - 'violin'- 'smooth'- 'hollow'- 'hollow-smooth'                                                                                                         |                                          小提琴图，'smooth' 和 'hollow' 分别表示是否平滑和是否空心。![image.png](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*mWmERpjuSn0AAAAAAAAAAAAAARQnAQ)                                           |
|       edge        |                                                                                                                - 'line'- 'vhv'- 'smooth'- 'arc'                                                                                                                |                                vhv：直角折线，arc：弧线，分为笛卡尔坐标系、极坐标系、带权重和不带权重四种情况。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*UOxHSKuGsBwAAAAAAAAAAABkARQnAQ)                                |

所以在配置图形样式时，需要以 Geometry 名称 + Shape 名称为 token，进行样式定义，目前主题开放的配置可用于定义图形的默认显示样式，active 的样式，inactive 的样式以及 selected 的样式。

> 以上配置定义的是 interval 这个几何标记下 rect 形状在各个状态下的样式。通常我们只需要为各个 Geometry 设置一个或者两个样式（填充或者描边的样式）即可，Geometry 下的各个 shapes 复用即可，除非某个 shape 样式特殊。

## 图表组件

所有的图表组件样式，定义在 `components`  属性下。

### 坐标轴 - Axis

G2 的坐标轴根据坐标系类型的不同进行了类型划分，但是每种类型下的配置属性是相同的。

1. 对于直角坐标系，我们提供了上、下、左、右四个方向的坐标轴配置。
1. 对于极坐标系，我们提供了半径轴和圆弧轴的两个坐标轴的配置。

![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*QwP6RI0M2n8AAAAAAAAAAABkARQnAQ)每个坐标轴可配置的属性如下：

| 属性名      | 描述                                                                                        |
| ----------- | ------------------------------------------------------------------------------------------- |
| title       | 坐标轴标题，可以控制：1. 是否展示 1. 标题的显示位置 1. 标题文本的样式                       |
| label       | 坐标轴文本，可以控制：1. 是否展示 1. 是否自动隐藏或者自动旋转 1. 文本的样式                 |
| line        | 坐标轴线，可以控制：1. 是否展示 1. 线的样式                                                 |
| grid        | 网格线，可以控制：1. 是否展示 1. 网格线的样式                                               |
| tickLine    | 坐标轴刻度线，可以控制：1. 是否展示 1. 刻度线的长度 1. 刻度线的样式 1. 刻度线是否和文本对齐 |
| subTickLine | 坐标轴自刻度线，可以控制：1. 是否展示 1. 刻度线的样式                                       |

### 图例 - Legend

G2 中图例分为连续图例和分类图例两种，同样主题中也为这两种类型的图例提供了配置。

- 分类图例，针对分类图例，可以配置如下属性：

![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*7ka8SLG1io8AAAAAAAAAAABkARQnAQ)

| 属性名        | 描述                                                         |
| ------------- | ------------------------------------------------------------ |
| title         | 图例标题，可以控制：1. 是否展示 2. 标题文本的样式            |
| marker        | 图例项 marker，可以控制：1. 形状 2. 样式                     |
| itemName      | 图例项文本，可以控制：1. 文本样式 2. 间距                    |
| itemValue     | 图例项文本值，可以控制：1. 文本样式 2. 间距（同 itemName）   |
| pageNavigator | 图例分页器，可以控制：1. 分页器箭头 marker 2. 分页器指示文本 |

- 连续图例，针对连续图例，可以配置一下属性：

![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*-1IJRJbBJxYAAAAAAAAAAABkARQnAQ)

| 属性名  | 描述                                              |
| ------- | ------------------------------------------------- |
| title   | 图例标题，可以控制：1. 是否展示 1. 标题文本的样式 |
| track   | _选择范围的色块样式_                              |
| rail    | _图例滑轨（背景）的样式配置项_                    |
| label   | _文本的样式配置_                                  |
| handler | _滑块的样式配置_                                  |

### 提示信息 - Tooltip

针对 tooltip，主题开放的配置为：

1. marker 的样式
1. crosshairs 的样式
1. tooltip 整个内容框的样式配置

![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*HW-WRqzZT3MAAAAAAAAAAABkARQnAQ)

### 图形标注 - Annotation 

G2 在主题中提供了以下 7 种 Annotation 的样式配置：

| Annotation 类型 | 描述                     | 样式                                                                                                |
| --------------- | ------------------------ | --------------------------------------------------------------------------------------------------- |
| arc             | 弧线                     | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*p6NSQau2HloAAAAAAAAAAABkARQnAQ) |
| line            | 辅助线，带文本           | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*ob5ARp0Fk_cAAAAAAAAAAABkARQnAQ) |
| text            | 标注文本                 | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*7xDjT7Q3B_IAAAAAAAAAAABkARQnAQ) |
| region          | 辅助区域                 | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*IpEdQaAmGDoAAAAAAAAAAABkARQnAQ) |
| dataMarker      | 带点、线及文本的图形标记 | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*ycZ0R4cueL0AAAAAAAAAAABkARQnAQ) |
| dataRegion      | 带区域及文本的图形标记   | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*9qcrRp5rWdcAAAAAAAAAAABkARQnAQ) |

### 文本标签 - Labels

图形标签，在 G2 主题中，分为以下三类：

| 类型        | 描述                                                         |                                                                                                     |
| ----------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
| labels      | 通用 labels，可以配置文本的距离及样式                        | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*eMhjSatkIikAAAAAAAAAAABkARQnAQ) |
| innerLabels | 显示在图形内部的文本，可以配置文本的距离及样式               | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*kL3SRJKtuO0AAAAAAAAAAABkARQnAQ) |
| pieLabels   | 饼图文本的样式，可以配置文本的距离、样式以及文本连接线的样式 | ![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*3GGPQZ66bggAAAAAAAAAAABkARQnAQ) |
