image

heatmap

interval

概述

image 图片标记通常不会单独出现，主要在其他的标记基础上进行添加使用，可以增强数据的可视化效果，帮助更直观地传达信息。和point 标记很类似都是以 x，y 数据通道作为位置居中定位，区别在于 image 提供一个特殊的 src 数据通道，来指定图片的远程地址或者 base64。

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  width: 200,
  height: 60,
  type: 'image',
  data: [
    {
      x: '1',
      y: 1,
      url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TRZHTaTeWfEAAAAAAAAAAAAAemJ7AQ/original',
    },
    {
      x: '2',
      y: 1,
      url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TRZHTaTeWfEAAAAAAAAAAAAAemJ7AQ/original',
    },
    {
      x: '3',
      y: 1,
      url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TRZHTaTeWfEAAAAAAAAAAAAAemJ7AQ/original',
    },
    {
      x: '4',
      y: 1,
      url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qCegRabhuUIAAAAAAAAAAAAAemJ7AQ/original',
    },
    {
      x: '5',
      y: 1,
      url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*GNP1RLFfQV0AAAAAAAAAAAAAemJ7AQ/original',
    },

    {
      x: '1',
      y: 2,
      url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TRZHTaTeWfEAAAAAAAAAAAAAemJ7AQ/original',
    },
    {
      x: '2',
      y: 2,
      url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TRZHTaTeWfEAAAAAAAAAAAAAemJ7AQ/original',
    },
    {
      x: '3',
      y: 2,
      url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qCegRabhuUIAAAAAAAAAAAAAemJ7AQ/original',
    },
    {
      x: '4',
      y: 2,
      url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*GNP1RLFfQV0AAAAAAAAAAAAAemJ7AQ/original',
    },
    {
      x: '5',
      y: 2,
      url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*GNP1RLFfQV0AAAAAAAAAAAAAemJ7AQ/original',
    },
  ],
  // 配置视觉通道
  encode: {
    x: 'x', // 配置x通道
    y: 'y', // 配置y通道
    src: 'url', // 配置 图片src 通道
  },
  axis: { x: false, y: false },
});

chart.render();

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

配置项

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

encode

配置 image 标记的视觉通道。

属性	描述	类型	默认值	必选
x	绑定 `image` 标记的 `x` 属性通道，一般是 `data` 中的数值或字符，用于确定图片的 `x` 位置	encode	-	✓
y	绑定 `image` 标记的 `y` 属性通道，一般是 `data` 中的数值或字符，用于确定图片的 `y` 位置	encode	-	✓
size	绑定 `image` 标记的 `size` 大小通道，用于控制图片展示的大小，一般图片中所存储的信息越多，越需要放大	encode	-
src	绑定 `image` 标记的 `src` 图片通道，会更具对应的数据显示图片		-	✓

src

最终的绘制都是调用 G 去渲染，所以支持的数据类型和 G 的原子 Image 图形保持一致，支持：

远程地址：网络地址

file：本地图片地址

base64：图表 base64 格式字符串

blob：图片请求返回的 Blob 对象

style

属性	描述	类型	默认值
width	图形的宽度, 如果没有配置图片按照自宽高和 `size` 大小默认显示	number \| Function<number>	-
height	图形的高度, 如果没有配置图片按照自宽高和 `size` 大小默认显示	number \| Function<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`

尝试一下：