快速上手
配置属性
- 图表容器
  - width
  - height
  - forceFit
  - pixelRatio
  - renderer
- 数据映射
  - data 📌
  - meta
  - xField 📌
  - yField 📌
  - colorField
  - sizeField
- 图形样式
- 图表组件
  - title
  - description
  - xAxis
  - yAxis
  - legend
  - tooltip
  - label
  - quadrant ✨
  - trendLine ✨
  - timeLine ✨
- 事件
图表方法

Bubble - 气泡图

阅读时间约 13 分钟

	定义气泡图是一种多变量的统计图表，由笛卡尔坐标系（直角坐标系）和大小不一、颜色不同的圆组成，可以看作是散点图的变形。
	视觉通道颜色、位置
	分析目的分布
	数据准备 2 个「数值」字段 0 ~ 1 个「无序名词」字段

快速上手

const data = [
  { year: '1991', value: 3, rank:1 },
  { year: '1992', value: 4, rank: 4 },
  { year: '1993', value: 3.5, rank: 3 },
  { year: '1994', value: 5, rank: 2 },
  { year: '1995', value: 4.9, rank: 9 },
  { year: '1996', value: 6, rank: 5 },
  { year: '1997', value: 7, rank: 7 },
  { year: '1998', value: 9, rank: 6 },
  { year: '1999', value: 13, rank: 8 },
];

const bubblePlot = new Bubble(document.getElementById('container'), {
  data: data,
  xField: 'year',
  yField: 'value',
  sizeField:'rank'
});

bubblePlot.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 方向位置映射所对应的数据字段名，一般对应一个连续字段。

默认配置：无

colorField

可选, string

功能描述: 点颜色映射对应的数据字段名。

sizeField

可选, string

功能描述：决定气泡图点大小的字段名。

图形样式

color

可选, string | string[] | Function

DEMO1

功能描述：指定点的颜色。如没有配置colorField,指定一个单值即可。对colorFiled进行了配置的情况下，即可以指定一系列色值，也可以通过回调函数的方法根据对应数值进行设置。

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

// 设置单一颜色
color:'#a8ddb5'
// 设置多色
colorField:'type',
color:['#d62728', '#2ca02c', '#000000']

pointSize ✨

可选, number[ ]

功能描述：指定气泡图点大小的值域，顺序为[min,max]。

用法示例：

const bubblePlot = new Bubble(document.getElementById('container'), {
      data,
      xField: 'change in female rate',
      yField: 'change in male rate',
      colorField: 'continent',
      color: ['#ffd500', '#82cab2', '#193442', '#d18768', '#7e827a'],
      sizeField: 'pop',      bubbleSize: [4, 30],    });
    bubblePlot.render();

效果：

pointStyle ✨

可选, object

DEMO

功能描述：设置折线样式。pointStyle中的fill会覆盖 color 的配置。pointtyle可以直接指定，也可以通过callback的方式，根据数据指定单独的样式。

默认配置：

细分配置	类型	功能描述
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: true,
},
line: {
    visible: true
},
tickLine: {
     visible: true,
},
label: {
    visible: true,
    autoRotate: true,
    autoHide: true
},
title: {
    visible: false,
},

细分配置	类型	功能描述
visible	boolean	是否可见
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,
grid: {
    visible: true,
},
line: {
    visible: true,
},
tickLine: {
    visible: true,
},
label: {
    visible: true,
    autoRotate: true,
    autoHide: true
},
title: {
    visible: false,
},

细分配置	类型	功能描述
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 样 -autoHide: boolean 是否自动隐藏 -autoRotate: boolean 是否自动旋转
tickLine	object	坐标轴刻度 - visible：boolean 是否可见 - style: object 样式
title	object	坐标轴标题 - visible： boolean 是否可见 - text: string 标题文字 - offset: number 位置偏移量 - style：object 样式

legend

可选, object

DEMOS

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

默认配置：

visible: true,
position: 'bottom',
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,
offset: 20,

细分属性	类型	功能描述
visible	boolean	是否显示
offset	number	距离鼠标位置偏移值
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`,`sizeField`,`colorField`, ]
formatter	object	对tooltip items进行格式化，入参为tooltip fields对应数值，出参为格式为{name:'a',value:1}

label

功能描述：标签文本

默认配置：

visible: false
offsetX: 6
offsetY: 6
style:{
  fill: 'rgba(0, 0, 0, 0.65)',
  stroke: '#ffffff',
  lineWidth: 2,
}

细分配置	类型	功能描述
visible	boolean	是否显示
formatter	function	对文本标签内容进行格式化
offsetX	number	在 label 位置的基础上再往 x 方向的偏移量
offsetY	number	在 label 位置的基础上再往 y 方向的偏移量
style	object	配置文本标签样式。

quadrant ✨

可选， object

DEMO

功能描述：四象限组件。将图表区域进行象限划分，用以展示线性数据的分类趋势。

细分配置	类型	功能描述
visible	boolean	是否显示
xBaseline	number	x方向上的象限分割基准线，默认为0
yBaseline	number	y方向上的象限分割基准线，默认为0
lineStyle	object	配置象限分割线的样式
regionStyle	object	function
label	object	为象限配置说明文本 - text: string[]

trendLine ✨

可选，object

DEMO

功能描述：趋势线组件，为图表田间回归曲线。

细分配置	类型	功能描述
visible	boolean	是否显示
type	string	趋势线类型，支持 `linear` `exp` `loess` `log` `poly` `pow` `quad` 7种
style	object	配置趋势线样式
showConfidence	boolean	是否绘制置信区间曲线
confidenceStyle	object	配置置信区间样式

timeLine ✨

可选，object

DEMO

功能描述：播放轴组件

细分配置	类型	功能描述
field	string	播放轴筛选字段，必选
key	string	播放轴播放动画标识字段，必选
loop	boolean	是否循环播放
auto	boolean	是否自动播放
speed	number	播放轴播放速度，多少s一个间隔，可选
height	number	播放轴高度，可选

事件

点图形事件

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

趋势线事件

onTrendlineClick 趋势线点击事件	onTrendlineDblClick 趋势线双击事件	onTrendlineDblClick 趋势线双击事件	onTrendlineMouseleave 趋势线鼠标离开事件
onTrendlineMousemove 趋势线鼠标移动事件	onTrendlineMousedown 趋势线鼠标按下事件	onTrendlineMouseup 趋势线鼠标松开事件	onTrendlineMouseenter 趋势线鼠标进入事件

置信区间事件

onConfidencelineClick 置信区间点击事件	onConfidencelineDblClick 置信区间双击事件	onConfidenceDblClick 置信区间双击事件	onConfidenceMouseleave 置信区间鼠标离开事件
onConfidenceMousemove 置信区间鼠标移动事件	onConfidenceMousedown 置信区间鼠标按下事件	onConfidenceMouseup 置信区间鼠标松开事件	onConfidenceMouseenter 置信区间鼠标进入事件

象限区域事件

onQuadrantClick 象限区域点击事件	onQuadrantDblClick 象限区域双击事件	onQuadrantDblClick 象限区域双击事件	onQuadrantMouseleave 象限区域鼠标离开事件
onQuadrantMousemove 象限区域鼠标移动事件	onQuadrantMousedown 象限区域鼠标按下事件	onQuadrantMouseup 象限区域鼠标松开事件	onQuadrantMouseenter 象限区域鼠标进入事件

象限标签事件

onQuadrantLabelClick 象限标签点击事件	onQuadrantLabelDblClick 象限标签双击事件	onQuadrantLabelDblClick 象限标签双击事件	onQuadrantLabelMouseleave 象限标签鼠标离开事件
onQuadrantLabelMousemove 象限标签鼠标移动事件	onQuadrantLabelMousedown 象限标签鼠标按下事件	onQuadrantLabelMouseup 象限标签鼠标松开事件	onQuadrantLabelMouseenter 象限标签鼠标进入事件

图表区域事件

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 标题鼠标进入事件

图表方法

render() 📌

必选

渲染图表。

updateConfig()

可选

更新图表配置项。

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

plot.render();

changeData()

可选

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

plot.changeData(newData);

repaint()

可选

图表画布重绘。

destroy()

可选

销毁图表。

getData()

获取图表数据。

getPlotTheme()

获取图表 theme。

G2可视化引擎

G6图可视化引擎

F2移动可视化方案

L7地理空间数据可视化

G2Plot开箱即用的图表库

Graphin

ChartCube图表魔方

墨者学院

BizCharts

Viser

Bubble - 气泡图

快速上手

配置属性

图表容器

width

height

forceFit

pixelRatio

renderer

数据映射

data 📌

meta

xField 📌

yField 📌

colorField

sizeField

图形样式

color

pointSize ✨

pointStyle ✨

图表组件

title

description

xAxis

yAxis

legend

tooltip

label

quadrant ✨

trendLine ✨

timeLine ✨

事件

点图形事件

趋势线事件

置信区间事件

象限区域事件

象限标签事件

图表区域事件

图例事件

坐标轴事件

图形标签事件

标题事件

描述事件

图表方法

render() 📌

updateConfig()

changeData()

repaint()

destroy()

getData()

getPlotTheme()