G2

概述

矩阵树图根据每个节点的关联值递归地将空间划分为矩形，适用于展示带权的树形数据。矩形树图适合展现具有层级关系的数据，能够直观体现同级之间的比较。一个 Tree 状结构转化为平面空间矩形的状态。矩形树图的好处在于，相比起传统的树形结构图，矩形树图能更有效得利用空间，并且拥有展示占比的功能。

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

const chart = new Chart({
  container: 'container',
});
chart.options({
  type: 'treemap',
  data: {
    type: 'custom',
    callback: (data) => ({
      name: '图表类型',
      children: [
        {
          name: '基础图表',
          children: [
            { name: '条形图', value: 300 },
            { name: '折线图', value: 600 },
            { name: '散点图', value: 160 },
            { name: '面积图', value: 160 },
            { name: '其他', value: 180 },
          ],
        },
        {
          name: '数据分析',
          children: [
            { name: '分箱', value: 280 },
            { name: '分组', value: 150 },
            { name: '回归线', value: 210 },
            { name: '其他', value: 40 },
          ],
        },
      ],
    }),
  },
  layout: {
    tile: 'treemapBinary',
    paddingInner: 1,
  },
  encode: { value: 'value' },
  style: {
    labelFill: '#000',
    labelStroke: '#fff',
    labelLineWidth: 1.5,
    labelFontSize: 14,
    labelPosition: 'top-left',
    labelDx: 5,
    labelDy: 5,
  },
});

chart.render();

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

配置项

属性	描述	类型	默认值
layout	布局配置	`TreemapLayout`	-
encode	配置 `treemap` 标记的视觉通道，包括`x`、`y`、`color`、`value`等，用于指定视觉元素属性和数据之间的关系	encode	-
style	配置图形样式和标签样式	-	-
labels	自定义数据标签的配置	label[]	[]
interaction	配置 treemap 的交互	`Object`	-

layout

属性	描述	类型	默认值
tile	布局方式	`'treemapBinary' \| 'treemapDice' \| 'treemapSlice' \| 'treemapSliceDice' \| 'treemapSquarify' \| 'treemapResquarify'`	`'treemapSquarify'`
padding	外间距，另外还有 `paddingInner \| paddingOuter \| paddingTop \| paddingBottom \| paddingRight \| paddingLeft`	`number`	0
sort	排序规则	`(a: any, b: any): number`	`(a, b) => b.value - a.value`
layer	渲染层级	`number \| (d) => number`	0
path	渲染层级	`(d) => d.name`	0

encode

配置 treemap 标记的视觉通道。

属性	描述	类型	默认值	必选
color	绑定 `treemap` 标记的 `color` 属性通道，如果将数据字段映射到颜色通道，会对数据进行分组，将数据拆分成多个不同颜色的图形	encode	-
value	绑定 `treemap` 标记的数值通道	encode	-

style

复合图形标记需要通过不同的前缀来区分图形的配置。

<label>: 数据标签的前缀，例如：labelText 设置标签的 text 文本。

属性	描述	类型	默认值
labelFontSize	标签文字大小	`number`	10
labelText	标签文字内容	`(d) => last(d.path)`	-
labelFontFamily	文字字体	string	-
labelFontWeight	字体粗细	number	-
labelLineHeight	文字的行高	number	-
labelTextAlign	设置文本内容的当前对齐方式	`center` \| `end` \| `left` \| `right` \| `start`	-
labelTextBaseline	设置在绘制文本时使用的当前文本基线	`top` \| `middle` \| `bottom` \| `alphabetic` \| `hanging`
labelFill	文字的填充色	string	-
labelFillOpacity	文字的填充透明度	number	-
labelStroke	文字的描边	string	-
labelLineWidth	文字描边的宽度	number	-
labelLineDash	描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。labelLineDash 设为[0,0]的效果为没有描边。	`[number,number]`	-
labelStrokeOpacity	描边透明度	number	-
labelOpacity	文字的整体透明度	number	-
labelShadowColor	文字阴影颜色	string	-
labelShadowBlur	文字阴影的高斯模糊系数	number	-
labelShadowOffsetX	设置阴影距文字的水平距离	number	-
labelShadowOffsetY	设置阴影距文字的垂直距离	number	-

更多样式可以查看文档 - 核心概念 - 样式页面。

interaction

treemap 常用的交互是 treemapDrillDown 和 poptip

treemapDrillDown 用于实现矩形树图的下钻交互，通过点击矩形树图的某个节点，可以将该节点及其子节点展示在画布上。配置如下：

属性	描述	类型	默认值
breadCrumbFill	面包屑的填充色	`string`	`rgba(0, 0, 0, 0.85)`
breadCrumbFontSize	面包屑字体大小	`number`	12
breadCrumbY	面包屑在 Y 轴的位置	`number`	12
activeFill	当前激活的面包屑的填充色	`number`	`rgba(0, 0, 0, 0.5)`

chart.options({
  // 其他图表配置...
  interaction: {
    treemapDrillDown: {
      breadCrumbY: 12,
      activeFill: '#873bf4',
    },
  },
});

poptip用于交互时显示简洁的提示信息

chart.options({
  // 其他图表配置...
  interaction: {
    poptip: {
      // poptip 配置项
      offsetX: 10,
      offsetY: 10,
      // tip 样式配置
      tipBackgroundColor: 'rgba(0, 0, 0, 0.75)',
      tipColor: '#fff',
    },
  },
});

示例

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

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

chart.options({
  type: 'treemap',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/flare-treemap.json',
  },
  layout: {
    path: (d) => d.name.replace(/\./g, '/'),
    tile: 'treemapBinary',
    paddingInner: 1,
  },
  encode: { value: 'size' },
  style: {
    labelText: (d) =>
      d.data.name
        .split('.')
        .pop()
        .split(/(?=[A-Z][a-z])/g)[0],
    labelFill: '#000',
    labelPosition: 'top-left',
    fillOpacity: 0.5,
  },
});

chart.render();

概述

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

const chart = new Chart({
  container: 'container',
});
chart.options({
  type: 'treemap',
  data: {
    type: 'custom',
    callback: (data) => ({
      name: '图表类型',
      children: [
        {
          name: '基础图表',
          children: [
            { name: '条形图', value: 300 },
            { name: '折线图', value: 600 },
            { name: '散点图', value: 160 },
            { name: '面积图', value: 160 },
            { name: '其他', value: 180 },
          ],
        },
        {
          name: '数据分析',
          children: [
            { name: '分箱', value: 280 },
            { name: '分组', value: 150 },
            { name: '回归线', value: 210 },
            { name: '其他', value: 40 },
          ],
        },
      ],
    }),
  },
  layout: {
    tile: 'treemapBinary',
    paddingInner: 1,
  },
  encode: { value: 'value' },
  style: {
    labelFill: '#000',
    labelStroke: '#fff',
    labelLineWidth: 1.5,
    labelFontSize: 14,
    labelPosition: 'top-left',
    labelDx: 5,
    labelDy: 5,
  },
});

chart.render();