G2

概述

link 图形标记虽然类似折线图通过指定 x，y 通道为长度为 2 的字段数组。获取两两对应的 (x,y) 的定位点，并连接对应的定位点，绘制带方向的线段(添加箭头)。

(() => {
  const chart = new G2.Chart();

  chart.options({
    type: "link",
    height: 260,
    autoFit: true,
    data: [
      { x1: 10, y1: 10, x2: 20, y2: 20, type: "1" },
      { x1: 21, y1: 12, x2: 11, y2: 22, type: "1" },
      { x1: 20, y1: 21, x2: 10, y2: 11, type: "2" },
      { x1: 11, y1: 23, x2: 21, y2: 13, type: "2" },
    ],
    encode: { x: ["x1", "x2"], y: ["y1", "y2"], color: "type" }, // link 标记 需要 x x1 y y1 通道, 从而达到两个点确定一条线或一条向量
    style: { arrow: true, arrowSize: 6 }, // arrow 为箭头开关，箭头通常可以代表方向，这个是 link 和 line 标记的区别。
    legend: false,
  });

  chart.render();

  return chart.getContainer();
})();

更多的案例，可以查看图表示例 - 连接图页面。

配置项

属性	描述	类型	默认值	必选
encode	配置 `link` 标记的视觉通道，包括`x`、`y`、`color`、`shape`等，用于指定视觉元素属性和数据之间的关系	encode	-	✓
style	配置 `link` 标记的图形样式	style	-

encode

配置 area 标记的视觉通道。

属性	描述	类型	默认值	必选
x	绑定 `link` 标记的 `x` 属性通道，可以单独字符串代表 `x` 通道，也可以直接通过数组的形式，直接为 `x` 和 `x1`通道	encode	-	✓
x1	绑定 `link` 标记的 `x1` 属性通道，为结束方向的标点 `x` 数值。	encode	-	✓
y	绑定 `link` 标记的 `y` 属性通道，可以单独字符串代表 `y` 通道，也可以直接通过数组的形式，直接为 `y` 和 `y1`通道	encode	-	✓
y1	绑定 `link` 标记的 `y1` 属性通道，为结束方向的标点 `y` 数值。	encode	-	✓
color	绑定 `link` 标记的 `color` 属性通道，如果将数据字段映射到颜色通道，会对数据进行分组，将数据拆分成多个不同颜色的区域，可用来划分区域或呈现当前区域的数值	encode	-
shape	绑定 `link` 标记的 `shape` 属性通道	encode	`link`

x & y & x1 & y1

link 标记但视觉通道需要 x、y、x1、y1 四个字段的值，支持的数据格式有以下两种：

x、y 直接配置

{
  type: 'link',
  data: [
    { x: 10, y: 10, x1: 20, y1: 20 },
  ],
  encode: { x: ['x','x1'], y: ['y','y1'] }
}

x、y、x1、y1 单独配置

{
  type: 'link',
  data: [
    { x: 10, y: 10, x1: 20, y1: 20 },
  ],
  encode: { x: 'x', y: 'y', x1:'x1',y1:'y1' }
}

color

color 视觉通道影响 link 图形标记。link 标记中单个区域仅能使用一种颜色（或者渐变色），但如果将数据字段映射到颜色通道，会对数据进行分组，将数据拆分成多个区域：

(() => {
  const chart = new G2.Chart();

  chart.options({
    type: "link",
    autoFit: true,
    data: {
      type: "fetch",
      value: "https://gw.alipayobjects.com/os/antfincdn/SM13%24lHuYH/metros.json",
    },
    encode: {
      x: ["POP_1980", "POP_2015"],
      y: ["R90_10_1980", "R90_10_2015"],
      color: (d) => d.R90_10_2015 - d.R90_10_1980, // color 为数值映射，会因为映射的数值而改变颜色。 当前代表长度，不同长度展示的颜色会成渐变展示
    },
    scale: { x: { type: "log" } },
    style: { arrow: true, arrowSize: 6 },
    axis: { x: { labelFormatter: "~s", labelTransform: "rotate(90)" } },
    legend: false,
    tooltip: { title: { channel: "color", valueFormatter: ".1f" } },
  });

  chart.render();

  return chart.getContainer();
})();

shape

link 标记内置支持的形状如下：

形状	描述	示例
link	连接线\|向量
arc	弧线.
smooth	贝塞尔曲线
vhv	直角折线

style

属性	描述	类型	默认值
arrow	控制是否展示箭头。本质为线段并非图形，继承直线的所有属性。	boolean	`false`
arrowSize	箭头图标的大小，可以指定像素值、也可以指定箭头长度的相对值。此属性为箭头长度，宽度为 'lineWidth' 配置	string \| number	`40%`
stroke	图形的颜色	string \| Function<string>	-
strokeOpacity	图形透明度	number \| Function<number>	-
lineWidth	图形的宽度	number \| Function<number>	-
lineDash	描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。因为箭头同样为继承直线样式配置，最好不要在有箭头的时候配置这个样式	[number,number] \| Function<[number, number]>	-
opacity	图形的整体透明度	number \| Function<number>	-
shadowColor	图形阴影颜色	string \| Function<string>	-
shadowBlur	图形阴影的高斯模糊系数	number \| Function<number>	-
shadowOffsetX	设置阴影距图形的水平距离	number \| Function<number>	-
shadowOffsetY	设置阴影距图形的垂直距离	number \| Function<number>	-
cursor	鼠标样式。同 css 的鼠标样式，默认 'default'。	string \| Function<string>	`default`

(() => {
  const chart = new G2.Chart();

  chart.options({
    type: "link",
    height: 260,
    autoFit: true,
    data: [
      { x1: 10, y1: 10, x2: 20, y2: 20 },
    ],
    encode: { x: ["x1", "x2"], y: ["y1", "y2"]},
    style: {
      arrow: true,
      arrowSize: 6 , // 箭头长度
      lineWidth: 8, // 线宽
      stroke: '#1f1aa1', // 颜色
      opacity: 0.7,
    }, 
    legend: false,
  });

  chart.render();

  return chart.getContainer();
})();

示例

怎么指定箭头图标的长度？

有两种指定箭头图标长度的方式，一种是通过填写像素值，比如 40，来指定为固定长度；另外一种是通过指定一个百分比，比如 30%，来指定参考箭头长度的相对长度。默认值为 40%。如下示例：

chart
  .link()
  // ...
  .style({
    arrowSize: 40,
    // arrowSize: '30%',
  });

概述

(() => {
  const chart = new G2.Chart();

  chart.options({
    type: "link",
    height: 260,
    autoFit: true,
    data: [
      { x1: 10, y1: 10, x2: 20, y2: 20, type: "1" },
      { x1: 21, y1: 12, x2: 11, y2: 22, type: "1" },
      { x1: 20, y1: 21, x2: 10, y2: 11, type: "2" },
      { x1: 11, y1: 23, x2: 21, y2: 13, type: "2" },
    ],
    encode: { x: ["x1", "x2"], y: ["y1", "y2"], color: "type" }, // link 标记 需要 x x1 y y1 通道, 从而达到两个点确定一条线或一条向量
    style: { arrow: true, arrowSize: 6 }, // arrow 为箭头开关，箭头通常可以代表方向，这个是 link 和 line 标记的区别。
    legend: false,
  });

  chart.render();

  return chart.getContainer();
})();