快速上手
配置属性
- 图表容器
  - width
  - height
  - forceFit
  - pixelRatio
  - renderer
- 数据映射
- 图形样式
  - color
  - areaStyle ✨
  - smooth ✨
  - line ✨
  - point ✨
- 图表组件
  - title
  - description
  - xAxis
  - yAxis
  - legend
  - tooltip
  - label
  - guideLine
- 事件
- 交互
  - slider ✨
  - scrollBar ✨
图表方法

StackedArea - 堆叠面积图

阅读时间约 13 分钟

快速上手

const areaPlot = new StackArea(document.getElementById('container'), {
    title: {
        visible: true,
        text: '堆叠面积图',
    },
    data,
    xField: 'date',
    yField: 'value',
    stackField: 'country',
    xAxis: {
        type: 'dateTime',
        tickCount: 5,
    },
    legend: {
        visible: true,
        position: 'right-top',
    },
    responsive: true,
});

areaPlot.render();

配置属性

图表容器

width

可选, number

功能描述：设置图表宽度。

默认配置： 400

height

可选, number

功能描述：设置图表高度。

默认配置： 400

forceFit

可选, boolean

功能描述：图表是否自适应容器宽高。当 forceFit 设置为true时，width 和 height 的设置将失效。

默认配置： true

pixelRatio

可选, number

功能描述：设置图表渲染的像素比

默认配置： 2

renderer

可选, string

功能描述: 设置图表渲染方式为 canvas 或 svg

默认配置： canvas

数据映射

data 📌

必选, array object

功能描述：设置图表数据源

默认配置：无

数据源为对象集合，例如：[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]。

细分配置项名称	类型	功能描述
alias	string	字段的别名
formatter	function	callback方法，对该字段所有值进行格式化处理
values	string[]	枚举该字段下所有值
range	number[]	字段的数据映射区间，默认为[0,1]

xField 📌

必选, string

功能描述：图形在 x 方向（横向延伸）对应的数据字段名，一般对应一个连续字段。

默认配置：无

yField 📌

必选, string

功能描述：图形在 y 方向对应的数据字段名，一般对应一个离散字段。

默认配置：无

stackField 📌

必选, string

功能描述：面积堆叠的字段名，通过该字段的值，面积图将会被分割为堆积的多个部分，通过颜色进行区分。

默认配置：无

图形样式

color

可选, string[] | Function

功能描述：指定图形颜色，即可以指定一系列色值，也可以通过回调函数的方法根据对应数值进行设置。

默认配置：采用 theme 中的色板。

areaStyle ✨

可选, object

功能描述：设置area图形的样式。areaStyle中的fill会覆盖color的设置。sreaStyle可以直接指定，也可以通过callback的方式，根据数据为每个形状指定单独的样式。

细分配置	类型	功能描述
fill	string	填充颜色
stroke	string	填充颜色
lineWidth	number	线宽
lineDash	number	虚线显示
opacity	number	透明度
fillOpacity	number	填充透明度
strokeOpacity	number	描边透明度

smooth ✨

可选, boolean

功能描述：是否使用曲线形态描绘。

默认配置: false

line ✨

可选, object

功能描述：配置辅助折线，分组及颜色映射方式与面积图形保持一致。

默认配置：

visible: true
size: 2
style:{
    opacity: 1,
    lineJoin: 'round',
    lineCap: 'round',
}

细分配置	类型	功能描述
visible	boolean	是否显示
size	number	折线的宽度
style	object	折线样式 - stroke: string 折线颜色 - lineDash: number[] 虚线显示 - opacity: number 透明度

point ✨

可选, object

功能描述：配置数据点，分组及颜色映射方式与面积图形保持一致。

默认配置：

visible: false,
shape: 'circle',
size: 3,
style: {
    stroke: '#fff',
}

细分配置	类型	功能描述
visible	boolean	是否显示
shape	string	数据点形状
size	number	数据点大小
style	object	数据点样式 - fill: string 填充色 - stroke: string 描边颜色 - lineWidth: number 描边粗细 - lineDash: number 虚线描边 - opacity: number 透明度 - fillOpacity: number 填充透明度 - strokeOpacity: number 描边透明度

图表组件

title

可选, optional

DEMOS

功能描述：配置图表的标题，默认显示在图表左上角。

默认配置：

visible: false,
alignTo: 'left',
text:'',
style:{
    fontSize: 18,
    fill: 'black',
}

细分配置	类型	功能描述
visible	boolean	是否显示
alignTo	string	位置，支持三种配置： 'left'
style	object	样式： - fontSize: number 文字大小 - fill: string 文字颜色 - stroke: string 描边颜色 - lineWidth: number 描边粗细 - lineDash: number 虚线描边 - opacity: number 透明度 - fillOpacity: number 填充透明度 - strokeOpacity: number 描边透明度

description

可选, optional

DEMOS

功能描述：配置图表的描述，默认显示在图表左上角，标题下方。

默认配置：

visible: false,
alignTo: 'left',
text:'',
style:{
    fontSize: 12,
    fill: 'grey',
}

细分配置	类型	功能描述
visible	boolean	是否显示
alignTo	string	位置，支持三种配置： 'left'
style	object	样式： - fontSize: number 文字大小 - fill: string 文字颜色 - stroke: string 描边颜色 - lineWidth: number 描边粗细 - lineDash: number 虚线描边 - opacity: number 透明度 - fillOpacity: number 填充透明度 - strokeOpacity: number 描边透明度

xAxis

可选, object

功能描述： x方向上的坐标轴，用于展示xField对应的映射信息

DEMOS

默认配置：

visible: true,
grid: {
    visible: false,
},
line: {
    visible: true
},
tickLine: {
     visible: false,
},
label: {
    visible: true,
    autoRotate: true,
    autoHide: true
},
title: {
    visible: true,
    offset: 12,
},

细分配置	类型	功能描述
visible	boolean	是否可见
type	string	坐标轴类型 - 'time'：时间轴， - 'linear': 连续轴
tickCount	number	坐标轴刻度数量
tickInterval	number	坐标轴刻度间隔
line	object	坐标轴轴线 - visible: boolean 是否可见 - style：object 轴线样式
grid	object	网格线 - visible: boolean 是否可见 - line：object 网格线样式
label	object	坐标轴标签 - visible: boolean 是否可见 - formatter: function 坐标轴标签格式化 - suffix: string 后缀 - precision：number 标签精度，如配置为 2，则格式化为 2 位小数 - mask: string 为日期文本添加格式化遮罩，当坐标轴type为time时生效 - offsetX: number 位置在x方向上的偏移量 - offsetY：number 位置在y方向上的偏移量 - style：object 样 -autoHide: boolean 是否自动隐藏 -autoRotate: boolean 是否自动旋转
tickLine	object	坐标轴刻度 - visible：boolean 是否可见 - style: object 样式
title	object	坐标轴标题 - visible： boolean 是否可见 - text: string 标题文字 - offset: number 位置偏移量 - style：object 样式

yAxis

可选, object

DEMOS

功能描述： y方向上的坐标轴，用于展示yField对应的映射信息

默认配置：

visible: true,
autoHideLabel: false,
autoRotateLabel: false,
autoRotateTitle: true,
grid: {
    visible: true,
},
line: {
    visible: false,
},
tickLine: {
    visible: false,
},
label: {
    visible: true,
},
title: {
    visible: false,
    offset: 12,
},

细分配置	类型	功能描述
visible	boolean	是否可见
tickCount	number	坐标轴刻度数量
tickInterval	number	坐标轴刻度间隔
min	number	设置坐标轴最小值
max	number	设置坐标轴最大值
line	object	坐标轴轴线 - visible: boolean 是否可见 - style：object 轴线样式
grid	object	网格线 - visible: boolean 是否可见 - line：object 网格线样式
label	object	坐标轴标签 - visible: boolean 是否可见 - formatter: function 坐标轴标签格式化 DEMO - suffix: string 后缀 - precision：number 标签精度，如配置为 2，则格式化为 2 位小数 - offsetX: number 位置在x方向上的偏移量 - offsetY：number 位置在y方向上的偏移量 - style：object 样
tickLine	object	坐标轴刻度 - visible：boolean 是否可见 - style: object 样式
title	object	坐标轴标题 - visible： boolean 是否可见 - text: string 标题文字 - offset: number 位置偏移量 - style：object 样式

legend

可选, object

DEMOS

功能描述：图例，配置了seriesField时显示，用于展示颜色分类信息

默认配置：

visible: true,
position: 'top-left',
flipPage: true

细分配置	类型	功能描述
visible	boolean	是否可见
position	string	位置，支持12方位布局 top-left, top-center,top-right bottom-left,bottom-center,bottom-right left-top,left-center,left-bottom right-top,right-center,right-bottom
formatter	function	对图例显示信息进行格式化
offsetX	number	图例在 position 的基础上再往 x 方向偏移量，单位 px
offsetY	number	图例在 position 的基础上再往 y 方向偏移量，单位 px
title	object	图例标题 - visible: boolean 是否显示 - text: string 图例文本，如不配置则自动取对应字段名 - style: object 标题样式
marker	object	图例 marker - symbol: string marker符号，默认为 'circle'。可选类型：circle,square,diamond,triangle,triangleDown,hexagon,bowtie,cross,tick,plus,hyphen,line,hollowCircle,hollowSquare,hollowDiamond - style: object marker样式，其中 `r` 配置marker的大小，其余样式参数参考绘图属性文档。
text	object	图例文本 - style: object 配置图例文本样式 - formatter:(text,cfg)=>string 格式化图例文本

可选, object

功能描述：信息提示框

默认配置：

visible: true,
shared: true,
showCrosshairs: true,
crosshairs: {
  type: 'y'
},
offset: 20,

细分属性	类型	功能描述
visible	boolean	是否显示
offset	number	距离鼠标位置偏移值
shared	boolean	是否同时显示多条数据
showCrosshairs	boolean	是否tooltip辅助线
crosshairs	object	配置tooltip辅助线。 -type: string crosshairs类型,可选项： x
domStyles	object	配置tooltip样式 - g2-tooltip: object 设置tooltip容器的CSS样式 - g2-tooltip-title: object 设置tooltip标题的CSS样式 - g2-tooltip-list: object 设置tooltip列表容器的CSS 样式 - g2-tooltip-marker: object 设置tooltip列表容器中每一项 marker的CSS样式 - g2-tooltip-value: object 设置tooltip 列表容器中每一项 value的CSS样式
fields	string	设置tooltip内容字段，默认为[ `xField`, `yField`, `stackField`]
formatter	object	对tooltip items进行格式化，入参为tooltip fields对应数值，出参为格式为{name:'a',value:1}

label

可选, object

DEMO1 DEMO2

功能描述：标签文本

默认配置：

visible: false
type: 'area'

细分配置	类型	功能描述
visible	boolean	是否显示
type	string	文本标签类型 - point: 显示在对应数据点上 - area: 显示在面积区域内部 - line: 显示在辅助折线尾部
formatter	function	对文本标签内容进行格式化
offsetX	number	在 label 位置的基础上再往 x 方向的偏移量
offsetY	number	在 label 位置的基础上再往 y 方向的偏移量
autoScale	boolean	label是否随area面积放缩。label type为 area 时生效，默认为 true
style	object	配置文本标签样式。

guideLine

可选, object[]

DEMOS

功能描述：配置图表辅助线，支持同时配置多条。

默认配置：无

细分配置	类型	功能描述
type	string	含有统计意义的辅助线类型，可选类型为 max
start	array	指定辅助线起始位置，如不配置`type`，则该辅助线为自定义辅助线，`start`是必选项。支持两种配置形式，两者不能混用： - 原始数据值，如 ['2010-01-01', 100] - 绘图区域百分比位置，如 ['50%', '50%']
end	array	指定辅助线终止位置，如不配置`type`，则该辅助线为自定义辅助线，end 是必选项。支持两种数据形式，两者不能混用： - 原始数据值，如 ['2010-01-01', 100] - 绘图区域百分比位置，如 ['50%', '50%']
lineStyle	object	配置辅助线样式。
text	object	设置辅助线文本。 - position: string 辅助线文本位置，可选项：start、center、end - content: string 辅助线文本内容 - offsetX: number 位置在x方向上的偏移量 - offsetY: number 位置在y方向上的偏移量 - style: object 文本样式

配置统计辅助线示例代码：

{
  guideLine: [
    {
      type: 'mean',
      lineStyle: {},
      text: {},
    },
  ],
}

配置自定义辅助线示例代码：

{
  guideLine: [
    {
      start: ['2010-01-01', 100] || ['0%', '50%'],
      end: ['2010-01-10', 50] || ['100%', '80%'],
      lineStyle: {},
      text: {},
    },
  ],
}

事件

面积事件

onAreaClick 面积点击事件	onAreaDblClick 面积双击事件	onAreaDblClick 面积双击事件	onAreaMouseleave 面积鼠标离开事件
onAreaMousemove 面积鼠标移动事件	onAreamousedown 面积鼠标按下事件	onAreaMouseup 面积鼠标松开事件	onAreaMouseenter 面积鼠标进入事件

折线事件

onLineClick 折线点击事件	onLineDblClick 折线双击事件	onLineDblClick 折线双击事件	onLineMouseleave 折线鼠标离开事件
onLineMousemove 折线鼠标移动事件	onLineMousedown 折线鼠标按下事件	onLineMouseup 折线鼠标松开事件	onLineMouseenter 折线鼠标进入事件

数据点事件

onPointClick 数据点点击事件	onPointDblClick 数据点双击事件	onPointDblClick 数据点双击事件	onPointMouseleave 数据点鼠标离开事件
onPointMousemove 数据点鼠标移动事件	onPointMousedown 数据点鼠标按下事件	onPointMouseup 数据点鼠标松开事件	onPointMouseenter 数据点鼠标进入事件

图表区域事件

onPlotClick 图表区域点击事件	onPlotDblClick 图表区域双击事件	onPlotDblClick 图表区域双击事件	onPlotMouseleave 图表区域鼠标离开事件
onPlotMousemove 图表区域鼠标移动事件	onPlotMousedown 图表区域鼠标按下事件	onPlotMouseup 图表区域鼠标松开事件	onPlotMouseenter 图表区域鼠标进入事件

图例事件

onLegendClick 图例点击事件	onLegendDblClick 图例双击事件	onLegendMouseenter 图例鼠标进入事件	onLegendMouseleave 图例鼠标离开事件
onLegendMousemove 图例鼠标移动事件	onLegendMousedown 图例鼠标按下事件	onLegendMouseup 图例鼠标松开事件	onLegendMouseenter 图例鼠标进入事件

坐标轴事件

onAxisClick 坐标轴点击事件	onAxisDblClick 坐标轴双击事件	onAxisDblClick 坐标轴双击事件	onAxisMouseleave 坐标轴鼠标离开事件
onAxisMousemove 坐标轴鼠标移动事件	onAxisMousedown 坐标轴鼠标按下事件	onAxisMouseup 坐标轴鼠标松开事件	onAxiMouseenter 坐标轴鼠标进入事件

图形标签事件

onLabelClick 图形标签点击事件	onLabelDblClick 图形标签双击事件	onLabelDblClick 图形标签双击事件	onLabelMouseleave 图形标签鼠标离开事件
onLabelMousemove 图形标签鼠标移动事件	onLabelMousedown 图形标签鼠标按下事件	onLabelMouseup 图形标签鼠标松开事件	onLabelMouseenter 图形标签鼠标进入事件

标题事件

onTitleClick 标题点击事件	onTitleDblClick 标题双击事件	onTitleDblClick 标题双击事件	onTitleMouseleave 标题鼠标离开事件
onTitleMousemove 标题鼠标移动事件	onTitleMousedown 标题鼠标按下事件	onTitleMouseup 标题鼠标松开事件	onTitleMouseenter 标题鼠标进入事件

描述事件

onDescriptionClick 标题点击事件	onDescriptionDblClick 标题双击事件	onDescriptionDblClick 标题双击事件	onDescriptionMouseleave 标题鼠标离开事件
onDescriptionMousemove 标题鼠标移动事件	onDescriptionMousedown 标题鼠标按下事件	onDescriptionMouseup 标题鼠标松开事件	onDescriptionMouseenter 标题鼠标进入事件

交互

slider ✨

可选, object

DEMO

功能描述：缩略轴 (slider) 交互适用于折线数据较多，用户希望关注数据集中某个特殊区间的场景。

细分配置	类型	功能描述
height	number	slider高度
start	number	滑块初始开始位置，值域为[0,1]
end	number	滑块初始结束位置，值域为[0,1]
trendCfg	object	配置slider内的趋势组件 - smooth: boolean 趋势组件是否平滑 - isArea: boolean 趋势组件是都绘制为面积图，如设置false则绘制折线，默认false - lineStyle: object 配置折线形态趋势组件的样式 - areaStyle: object 配置面积形态趋势组件的样式
backgroundStyle	object	配置背景样式
forgroundStyle	object	配置前景样式
handlerStyle	object	配置滑块样式
textStyle	object	配置跟随滑块的文字样式
minLimit	number	允许滑动的最小位置，值域范围为[0,1]
maxLimit	number	允许滑动的最大位置，值域范围为[0,1]

scrollBar ✨

可选, object

功能描述：配置横向滚动条，适用于数据较多的场景。

示例代码：

interactions: [
  {
    type: 'scrollbar',
    },
],

图表方法

render() 📌

必选

渲染图表。

updateConfig()

可选

更新图表配置项。

plot.updateConfig({
  width: 500,
  height: 600,
  legend: {
    visible: false,
  },
});

plot.render();

changeData()

可选

更新图表数据。updateConfig()方法会导致图形区域销毁并重建，如果只进行数据更新，而不涉及其他配置项更新，推荐使用本方法。

plot.changeData(newData);

repaint()

可选

图表画布重绘。

destroy()

可选

销毁图表。

getData()

获取图表数据。

getPlotTheme()

获取图表 theme。

	定义使用带不同样式的填充区域的层叠线段来显示多组数据在同一个具有顺序性的维度上的变化，线段在同一维度值上的端点高度按照数值累加。
	视觉通道颜色、面积
	分析目的比较、组成、趋势
	数据准备 1 个「时间」或「有序名词」字段 1 个「数值」字段 1 个「无序名词」字段

G2可视化引擎

G6图可视化引擎

F2移动可视化方案

L7地理空间数据可视化

G2Plot开箱即用的图表库

Graphin

ChartCube图表魔方

墨者学院

BizCharts

Viser

StackedArea - 堆叠面积图

快速上手

配置属性

图表容器

width

height

forceFit

pixelRatio

renderer

数据映射

data 📌

meta

xField 📌

yField 📌

stackField 📌

图形样式

color

areaStyle ✨

smooth ✨

line ✨

point ✨

图表组件

title

description

xAxis

yAxis

legend

tooltip

label

guideLine

事件

面积事件

折线事件

数据点事件

图表区域事件

图例事件

坐标轴事件

图形标签事件

标题事件

描述事件

交互

slider ✨

scrollBar ✨

图表方法

render() 📌

updateConfig()

changeData()

repaint()

destroy()

getData()

getPlotTheme()