G2

本文档详细展示了 G2 的完整配置体系，涵盖了所有可用的配置选项和层级关系。

图表初始化配置

在创建图表实例时，可以通过 new Chart(params) 传入以下配置项：

配置项	类型	默认值	描述
container	`string \| HTMLElement`	-	指定图表绘制的 DOM，可以传入 DOM id 或 DOM 实例
autoFit	`boolean`	`false`	图表是否自适应容器宽高
clip	`boolean`	`false`	是否隐藏超出绘制区域的图形
width	`number`	`640`	图表宽度
height	`number`	`480`	图表高度
depth	`number`	`0`	图表深度，在 3D 图表中使用
padding	`'auto' \| number`	`'auto'`	图表内边距，使用方式参考 CSS 盒模型
margin	`number`	`16`	图表外边距，使用方式参考 CSS 盒模型
inset	`number`	`0`	图表呼吸范围宽度
renderer	`Canvas \| SVG \| WebGL`	`Canvas`	指定渲染引擎
theme	`'classic' \| 'classicDark' \| 'academy' \| customTheme`	-	配置图表主题
plugins	`any[]`	-	指定渲染时使用的插件

示例：

const chart = new Chart({
  container: 'container',     // DOM 容器
  autoFit: true,              // 自适应容器大小
  clip: true,                 // 裁剪超出区域
  padding: 20,                // 内边距
  margin: 16,                 // 外边距
  theme: 'classicDark',       // 深色主题
  plugins: [new Plugin()]     // 插件
});

图表配置

创建图表实例后，可以通过以下两种方式进行配置：

方式一：API 链式调用

chart
  .data(data)
  .encode('x', 'field1')
  .encode('y', 'field2')
  .scale('x', { type: 'band' })
  .axis('x', { title: 'X轴标题' });

方式二：options 方法传入 spec 配置

chart.options({
  type: 'interval',
  data: data,
  encode: { x: 'field1', y: 'field2' },
  scale: { x: { type: 'band' } },
  axis: { x: { title: 'X轴标题' } }
});

以下是完整的图表配置项层级关系：

G2SpecObject// 顶级配置

width?number基础// 图表宽度

height?number基础// 图表高度

depth?number基础// 3D图表深度

autoFit?boolean基础// 自适应容器大小

MarkObject// 标记配置

width?number基础// 图表宽度

height?number基础// 图表高度

depth?number基础// 3D图表深度

autoFit?boolean基础// 自适应容器大小

class?string标记// CSS类名

key?string标记// 唯一标识符

x?number位置// X坐标

y?number位置// Y坐标

zIndex?number位置// 层级

frame?boolean位置// 是否显示边框

padding?Padding间距// 内边距

paddingLeft?Padding间距// 左内边距

paddingRight?Padding间距// 右内边距

paddingTop?Padding间距// 上内边距

paddingBottom?Padding间距// 下内边距

margin?number间距// 外边距

marginLeft?number间距// 左外边距

marginRight?number间距// 右外边距

marginTop?number间距// 上外边距

marginBottom?number间距// 下外边距

inset?number间距// 内缩

insetLeft?number间距// 左内缩

insetRight?number间距// 右内缩

insetTop?number间距// 上内缩

insetBottom?number间距// 下内缩

style?Record<string, any>样式// 标记样式

viewStyle?Record<string, any>样式// 视图样式

data?Data数据// 数据源

InlineConnectorObject// 内联数据

FetchConnectorObject// 远程数据

transform?Transform[]标记转换// 标记转换配置

encode?Record<ChannelTypes, Encode>编码// 编码配置

编码类型EncodeTypes基础// 支持的编码类型

字段编码string | FieldEncode基础// 绑定数据字段

常量编码any | ConstantEncode基础// 使用固定值

函数编码TransformEncode基础// 使用变换函数

数据编码ColumnEncode基础// 使用数组数据

x?Encode// X轴位置编码

y?Encode// Y轴位置编码

z?Encode// Z轴位置编码（3D图表）

x1?Encode// X轴结束位置编码（区间图表）

y1?Encode// Y轴结束位置编码（区间图表）

position?Encode// 通用位置编码

position${number}?Encode// 通用位置编码

color?Encode// 颜色编码

size?Encode// 大小编码

shape?Encode// 形状编码

opacity?Encode// 透明度编码（0-1）

series?Encode// 系列编码（用于多线图、分组柱图等）

key?Encode// 数据键编码（用于动画识别）

groupKey?Encode// 分组键编码

enterType?Encode// 入场动画类型编码

enterEasing?Encode// 入场缓动函数编码

enterDuration?Encode// 入场动画时长编码（毫秒）

enterDelay?Encode// 入场动画延迟编码

updateType?Encode// 更新动画类型编码

updateEasing?Encode// 更新缓动函数编码

updateDuration?Encode// 更新动画时长编码

updateDelay?Encode// 更新动画延迟编码

exitType?Encode// 退场动画类型编码

exitEasing?Encode// 退场缓动函数编码

exitDuration?Encode// 退场动画时长编码

exitDelay?Encode// 退场动画延迟编码

scale?Record<ChannelTypes, Scale>比例尺// 比例尺映射

coordinate?Coordinate坐标系// 坐标系

facet?boolean布局// 是否启用分面

layout?Record<string, any>布局// 布局配置，仅部分标记有，例如wordCloud、sankey等

cartesian?boolean布局// 是否使用笛卡尔坐标系

clip?boolean布局// 是否裁剪超出区域

state?State状态// 状态样式配置

animate?Animation动画// 动画配置

interaction?Interaction交互// 交互行为配置

labels?Record<string, any>[]组件// 标签配置数组

tooltip?TooltipComponent组件// 提示框组件

axis?AxisComponent组件// 坐标轴组件

legend?LegendComponent组件// 图例组件

slider?SliderComponent组件// 缩略轴组件

scrollbar?ScrollbarComponent组件// 滚动条组件

title?string | TitleComponent组件// 标题组件

CompositionObject// 复合视图配置，标记可以单独使用，也可以嵌套在复合视图下

children?(Mark | AxisComponent | LegendComponent)[]// 子组件，具体配置项见标记配置

[key: string]?any// 其他属性，例如style、data等，具体配置项见标记配置

本文档详细展示了 G2 的完整配置体系，涵盖了所有可用的配置选项和层级关系。

图表初始化配置

在创建图表实例时，可以通过 new Chart(params) 传入以下配置项：

配置项	类型	默认值	描述
container	`string \| HTMLElement`	-	指定图表绘制的 DOM，可以传入 DOM id 或 DOM 实例
autoFit	`boolean`	`false`	图表是否自适应容器宽高
clip	`boolean`	`false`	是否隐藏超出绘制区域的图形
width	`number`	`640`	图表宽度
height	`number`	`480`	图表高度
depth	`number`	`0`	图表深度，在 3D 图表中使用
padding	`'auto' \| number`	`'auto'`	图表内边距，使用方式参考 CSS 盒模型
margin	`number`	`16`	图表外边距，使用方式参考 CSS 盒模型
inset	`number`	`0`	图表呼吸范围宽度
renderer	`Canvas \| SVG \| WebGL`	`Canvas`	指定渲染引擎
theme	`'classic' \| 'classicDark' \| 'academy' \| customTheme`	-	配置图表主题
plugins	`any[]`	-	指定渲染时使用的插件

示例：

const chart = new Chart({
  container: 'container',     // DOM 容器
  autoFit: true,              // 自适应容器大小
  clip: true,                 // 裁剪超出区域
  padding: 20,                // 内边距
  margin: 16,                 // 外边距
  theme: 'classicDark',       // 深色主题
  plugins: [new Plugin()]     // 插件
});

图表配置

创建图表实例后，可以通过以下两种方式进行配置：

方式一：API 链式调用

chart
  .data(data)
  .encode('x', 'field1')
  .encode('y', 'field2')
  .scale('x', { type: 'band' })
  .axis('x', { title: 'X轴标题' });

方式二：options 方法传入 spec 配置

chart.options({
  type: 'interval',
  data: data,
  encode: { x: 'field1', y: 'field2' },
  scale: { x: { type: 'band' } },
  axis: { x: { title: 'X轴标题' } }
});

以下是完整的图表配置项层级关系：

G2SpecObject// 顶级配置

width?number基础// 图表宽度

height?number基础// 图表高度

depth?number基础// 3D图表深度

autoFit?boolean基础// 自适应容器大小

MarkObject// 标记配置

width?number基础// 图表宽度

height?number基础// 图表高度

depth?number基础// 3D图表深度

autoFit?boolean基础// 自适应容器大小

class?string标记// CSS类名

key?string标记// 唯一标识符

x?number位置// X坐标

y?number位置// Y坐标

zIndex?number位置// 层级

frame?boolean位置// 是否显示边框

padding?Padding间距// 内边距

paddingLeft?Padding间距// 左内边距

paddingRight?Padding间距// 右内边距

paddingTop?Padding间距// 上内边距

paddingBottom?Padding间距// 下内边距

margin?number间距// 外边距

marginLeft?number间距// 左外边距

marginRight?number间距// 右外边距

marginTop?number间距// 上外边距

marginBottom?number间距// 下外边距

inset?number间距// 内缩

insetLeft?number间距// 左内缩

insetRight?number间距// 右内缩

insetTop?number间距// 上内缩

insetBottom?number间距// 下内缩

style?Record<string, any>样式// 标记样式

viewStyle?Record<string, any>样式// 视图样式

data?Data数据// 数据源

InlineConnectorObject// 内联数据

FetchConnectorObject// 远程数据

transform?Transform[]标记转换// 标记转换配置

encode?Record<ChannelTypes, Encode>编码// 编码配置

编码类型EncodeTypes基础// 支持的编码类型

字段编码string | FieldEncode基础// 绑定数据字段

常量编码any | ConstantEncode基础// 使用固定值

函数编码TransformEncode基础// 使用变换函数

数据编码ColumnEncode基础// 使用数组数据

x?Encode// X轴位置编码

y?Encode// Y轴位置编码

z?Encode// Z轴位置编码（3D图表）

x1?Encode// X轴结束位置编码（区间图表）

y1?Encode// Y轴结束位置编码（区间图表）

position?Encode// 通用位置编码

position${number}?Encode// 通用位置编码

color?Encode// 颜色编码

size?Encode// 大小编码

shape?Encode// 形状编码

opacity?Encode// 透明度编码（0-1）

series?Encode// 系列编码（用于多线图、分组柱图等）

key?Encode// 数据键编码（用于动画识别）

groupKey?Encode// 分组键编码

enterType?Encode// 入场动画类型编码

enterEasing?Encode// 入场缓动函数编码

enterDuration?Encode// 入场动画时长编码（毫秒）

enterDelay?Encode// 入场动画延迟编码

updateType?Encode// 更新动画类型编码

updateEasing?Encode// 更新缓动函数编码

updateDuration?Encode// 更新动画时长编码

updateDelay?Encode// 更新动画延迟编码

exitType?Encode// 退场动画类型编码

exitEasing?Encode// 退场缓动函数编码

exitDuration?Encode// 退场动画时长编码

exitDelay?Encode// 退场动画延迟编码

scale?Record<ChannelTypes, Scale>比例尺// 比例尺映射

coordinate?Coordinate坐标系// 坐标系

facet?boolean布局// 是否启用分面

layout?Record<string, any>布局// 布局配置，仅部分标记有，例如wordCloud、sankey等

cartesian?boolean布局// 是否使用笛卡尔坐标系

clip?boolean布局// 是否裁剪超出区域

state?State状态// 状态样式配置

animate?Animation动画// 动画配置

interaction?Interaction交互// 交互行为配置

labels?Record<string, any>[]组件// 标签配置数组

tooltip?TooltipComponent组件// 提示框组件

axis?AxisComponent组件// 坐标轴组件

legend?LegendComponent组件// 图例组件

slider?SliderComponent组件// 缩略轴组件

scrollbar?ScrollbarComponent组件// 滚动条组件

title?string | TitleComponent组件// 标题组件

CompositionObject// 复合视图配置，标记可以单独使用，也可以嵌套在复合视图下

children?(Mark | AxisComponent | LegendComponent)[]// 子组件，具体配置项见标记配置

[key: string]?any// 其他属性，例如style、data等，具体配置项见标记配置

G2

G2 配置项总览

G2

G2 配置项总览

图表初始化配置

图表配置

方式一：API 链式调用

方式二：options 方法传入 spec 配置

图表初始化配置

图表配置

方式一：API 链式调用

方式二：options 方法传入 spec 配置