几何标记对象,决定了图表的类型,具体的概念介绍请参见 Geom
语法示例:
chart.<geomType>()
  .position()
  .size()
  .color()
  .shape()
  .adjust()
  .style()
  .animate();
下面是一条简单的绘制柱状图的语法,声明完使用的 geom 类型之后,就可以进行图形上的各种图形属性映射,下面我们会进行详述。
chart.interval().position('x*y').color('x');
注意:上述 chart.interval() 返回的不是 chart 对象,而是一个 geom 几何标记对象 Geom。
以下是目前 Geom 的基本类型:
geom 类型
说明
point
点,用于点图的构建。
path
路径,无序的点连接而成的一条线。
line
线,点按照 x 轴连接成一条线,构成线图。
area
填充线图跟坐标系之间构成区域图,也可以指定上下范围。
interval
使用矩形或者弧形,用面积来表示大小关系的图形,一般构成柱状图、饼图等图表。
polygon
多边形,可以用于构建热力图、地图等图表类型。
schema
k 线图,箱型图。
Geom 支持的接口可以分为三大类:
  1. 数据映射相关的属性函数:position, color, shape, size
  2. 显示辅助信息的函数:style
  3. 额外的控制函数:adjust
  4. 动画配置函数:animate

属性

chart.<geomType>({
  generatePoints: {Boolean},
  sortable: {Boolean},
  startOnZero: {Boolean},
  connectNulls: {Boolean}
})

generatePoints

chart.line({
  generatePoints: true
})

sortable

在绘制折线图或者区域图时,如果您的数据已经经过排序,可以将该属性设置为 false,以提高性能。
chart.line({
  sortable: false
})

startOnZero

chart.area({
  startOnZero: false
})
该属性的使用场景如下:
startOnZero: true
startOnZero: false

connectNulls

chart.line({
  connectNulls: true // 将空数据连接
});
详见 demo

方法

position

将数据值映射到图形的位置上的方法。
chart.line().position('x*y');
chart.line().position([ 'x', 'y' ]);

position('fieldA*fieldB')

使用 * 连接,position 属性会对多个字段进行数据的映射,如:cut*pricex*y 等,用于二维坐标系图表的绘制。
chart.point().position('x*y') 为例,point 代表图形,即最后需要生成点图,而 position 代表位置,position('x*y') 代表数据在图形中的位置由 x 和 y 这两个维度的变量决定。
另外,也可以以数组格式传入:chart.geom().position([ 'fieldA', 'fieldB' ])

color

将数据值映射到图形的颜色上的方法。
chart.line().color('red'); // 常量颜色
chart.line().color('type'); // 对 type 字段进行映射,使用内置的颜色
chart.line().color('type', [ 'red', 'blue' ]) // 指定颜色
chart.line().color('type', (type) => { // 通过回调函数
  if (type === 'a') {
    return 'red';
  }
  return 'blue';
});
chart.line().color('type*value', (type, value) => { //多个参数,通过回调函数
  if (type === 'a' && value > 100) {
    return 'red';
  }
  return 'blue';
});

color(value)

参数
代码示例
chart.point().position('x*y').color('x'); // 对 x 字段进行映射,使用内置的颜色
chart.point().position('x*y').color('red'); // 所有点用红色渲染
chart.point().position('x*y').color('l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'); // 定义渐变色
具体的渐变色使用规则,详见 渐变色使用

color(field, colors)

参数

shape

将数据值映射到图形的形状上的方法。
chart.point().shape('circle'); // 常量
chart.point().shape('type'); // 使用字段映射到形状,使用内置的形状
chart.point().shape('type', [ 'circle', 'hollowCircle', 'rect' ]); // 指定形状
chart.point().shape('type', type => { // 回调函数
  if(type === 'a') {
    return 'circle';
  }
  return 'rect';
});

shape(shape)

参数
只支持接收一个参数,指定几何图像对象绘制的形状。下表列出了不同的 geom 几何图形对象支持的 shape 形状:
geom 类型
shape 类型
解释
point
'circle', 'hollowCircle', 'rect'
默认为 'circle'
line
'line', 'smooth', 'dash'
dash:虚线,smooth: 平滑线
area
'area', 'smooth'
填充内容的区域图
interval
'rect'
polygon
'polygon'
schema
'candle'
目前仅 K 线图
代码示例
chart.point().position('x*y').shape('rect'); // 指定所有点的图形是正方形

shape(field, shapes)

指定多个图形,图形的顺序跟字段的值对应。
参数

shape(field, callback)

通过回调函数设置图形类型.
参数
代码示例
chart.point().position('x*y').shape('z', value => {
  if (value === 1) {
    return 'circle'
  }
  return 'rect';
});

size

将数据值映射到图形的大小上的方法。
chart.point.size(10); // 常量
chart.point.size('type'); // 使用字段映射到大小
chart.point.size('type', [ 0, 10 ]); // 使用字段映射到大小,并指定最大值和最小值
chart.point.size('type', type => { // 回调函数
  if (type === 'a') {
    return 10;
  }
  return 5;
});

size(value)

传入数字常量,如 chart.point().size(20)
注意: 不同图形的 size 的含义有所差别:

size(field)

根据 field 字段的值映射大小。
代码示例
chart.point().position('x*y').size('z'); // 使用 z 字段的值来映射大小

size(field, [min, max])

根据 field 字段的值映射大小,使用声明的最大值 max(默认 10) 和最小值 min(默认 1)。
代码示例
chart.point().position('x*y').size('z', [ 10, 100 ]); // 使用 z 字段的值来映射大小,最大值为 100,最小值 10

size(field, callback)

使用回调函数控制图形大小。
参数
回调函数。
代码示例
chart.point().position('x*y').size('z', value => {
  if (value === 1) {
    return 5;
  }
  return 10;
});

adjust

声明几何标记对象的数据调整方式,可用于绘制层叠图、分组图等。支持单一的数据调整方式也支持各种数据调整方式的组合。
F2 支持的调整类型包括:'stack', 'dodge'。
chart.interval().adjust('stack');
chart.interval().adjust({
  type: 'stack'
});
chart.interval().adjust([{
  type: 'dodge',
  marginRatio: 0, // 数值范围为 0 至 1,用于调整分组中各个柱子的间距
}]);

style

用于配置几何标记显示的图形属性,详见绘图属性
有以下两种使用方式:
  1. style(cfg)
参数:
line().style({ // 统一为所有 shape 设置固定的样式
  lineWidth: 2
});
  1. style(field, cfg) 映射到字段的样式
参数:
style('city', {
  lineDash(val) {
    if (val === 'HZ') {
      return [ 2, 2 ];
    }
    return null;
  }
})

animate

用于配置具体的动画。
point().animate(false); // 关闭动画

point().animate({
  appear: {
    animation: {String}, // 动画名
    easing: {String}, // 缓动函数名
    duration: {Number}, // 动画执行时间,单位为 ms
    delay: {Number} // 动画延迟时间,单位为 ms
  }, // 出场动画配置
  update: {
    animation: {String}, // 动画名
    easing: {String}, // 缓动函数名
    duration: {Number}, // 动画执行时间,单位为 ms
    delay: {Number} // 动画延迟时间,单位为 ms
  }, // 更新动画配置
  enter: {
    animation: {String}, // 动画名
    easing: {String}, // 缓动函数名
    duration: {Number}, // 动画执行时间,单位为 ms
    delay: {Number} // 动画延迟时间,单位为 ms
  }, // 图表发生数据变更时,新进场的元素动画配置
  leave: {
    animation: {String}, // 动画名
    easing: {String}, // 缓动函数名
    duration: {Number}, // 动画执行时间,单位为 ms
    delay: {Number} // 动画延迟时间,单位为 ms
  } // 离场动画配置
});
更多的动画使用,参见 Animation