Skip to content

Commit ceb85d6

Browse files
lxfu1lxfu1
committed
docs: add treemap component documentation
1 parent 6761087 commit ceb85d6

4 files changed

Lines changed: 135 additions & 72 deletions

File tree

‎packages/plots/src/core/plots/treemap/adaptor.ts‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { flow, transformOptions, set } from '../../utils';
1+
import { flow, transformOptions, dataTransform } from '../../utils';
22
import { mark } from '../../adaptor';
33
import type { Adaptor } from '../../types';
44
import type { TreemapOptions } from './type';
@@ -10,19 +10,5 @@ type Params = Adaptor<TreemapOptions>;
1010
* @param options
1111
*/
1212
export function adaptor(params: Params) {
13-
/**
14-
* 图表差异化处理
15-
*/
16-
const init = (params: Params) => {
17-
const { options } = params;
18-
const { data } = options;
19-
if (data) {
20-
set(options, 'data', {
21-
value: data,
22-
});
23-
}
24-
return params;
25-
};
26-
27-
return flow(init, mark, transformOptions)(params);
13+
return flow(dataTransform, mark, transformOptions)(params);
2814
}

‎site/docs/components/plots/treemap.zh.md‎

Lines changed: 59 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -8,65 +8,68 @@ link: /examples#statistics-treemap
88
order: 10
99
---
1010

11-
矩阵树图根据每个节点的关联值递归地将空间划分为矩形，适用于展示带权的树形数据。
12-
矩形树图适合展现具有层级关系的数据，能够直观体现同级之间的比较。一个 Tree 状结构转化为平面空间矩形的状态。矩形树图的好处在于，相比起传统的树形结构图，矩形树图能更有效得利用空间，并且拥有展示占比的功能。
13-
14-
## 开始使用
15-
16-
<img alt="treemap" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*BD2zQIr7D5MAAAAAAAAAAAAADmJ7AQ/original
17-
" width="600" />
18-
19-
```js
20-
import { schemeTableau10 } from 'd3-scale-chromatic';
21-
22-
{
23-
data: {
24-
type: 'fetch',
25-
value: 'https://assets.antv.antgroup.com/g2/flare-treemap.json',
26-
},
27-
valueField: 'size',
28-
scale: {
29-
color: {
30-
range: schemeTableau10
31-
}
32-
},
33-
layout: {
34-
path: (d) => d.name.replace(/\./g, '/'),
35-
tile: 'treemapBinary',
36-
paddingInner: 1,
37-
},
38-
style: {
39-
labelText: (d) =>
40-
d.data.name
41-
.split('.')
42-
.pop()
43-
.split(/(?=[A-Z][a-z])/g)[0],
44-
labelFill: '#000',
45-
labelPosition: 'top-left',
46-
fillOpacity: 0.5
47-
}
48-
}
49-
```
50-
51-
## 选项
52-
53-
| 属性 | 描述 | 类型 | 默认值 |
54-
| ------ | ---------------------- | --------------- | ------ |
55-
| layout | 布局配置 | `TreemapLayout` | - |
56-
| style | 配置图形样式和标签样式 | - | - |
57-
| labels | 自定义数据标签的配置 | label[] | [] |
11+
## 简介
12+
13+
矩阵树图（Treemap）是一种将树状结构数据以嵌套矩形形式展示的可视化图表。其核心特征包括：
14+
15+
- 空间填充布局：用矩形面积表示数据大小，嵌套关系表示层级结构（父矩形包含子矩形）。
16+
- 多维信息编码：
17+
- 面积 → 数值大小（如销售额、用户数），
18+
- 颜色 → 类别属性（如产品类型、地区），
19+
- 位置 → 层级归属（如父节点居中，子节点环绕）。
20+
- 高效空间利用：在有限区域内展示大量层级数据，避免传统树状图的长分支问题。
21+
22+
## 代码演示
23+
24+
更多示例详见[矩阵树图](/examples#statistics-treemap)
25+
26+
### 基础用法
27+
28+
<Playground path="/statistics/treemap/demo/treemap.js" rid="treemap-basic"></playground>
29+
30+
### 图表砖取
31+
32+
<Playground path="/statistics/treemap/demo/drill-down.js" rid="treemap-drill-down"></playground>
33+
34+
## 配置项
35+
36+
### 概览
37+
38+
|配置项|说明|类型|默认值|
39+
|-----|---|----|-----|
40+
| data | [数据](/options/plots/data/overview) | Array | [] |
41+
| valueField | 值映射字段 | string | - |
42+
| layout | [布局](#layout) | object | - |
43+
| title | 用于指定图表的标题内容，详见[标题](/options/plots/title) | object（可选） | - |
44+
| axis | 用于建立数据与视觉位置的映射关系，详见[坐标轴](/options/plots/axis) | object（可选） | - |
45+
| legend | 图表的辅助元素，使用颜色、大小、形状区分不同的数据类型，用于图表中数据的筛选，详见[图例](/options/plots/legend) | object（可选） | - |
46+
| label | 数据标签是给图表添加标注的手段之一，详见[标签](/options/plots/label) | object（可选） | - |
47+
| tooltip | 用于动态展示数据点的详细信息，详见[提示](/options/plots/tooltip) | object（可选） | - |
48+
| style | 视觉样式，配置项详见[绘图属性](/options/plots/style#绘图属性) | object（可选） | - |
49+
| theme | 用于控制图表的整体外观，包括颜色、字体、边距等视觉属性，详见[主题](/options/plots/theme/overview) | string \| object（可选） | `light` |
50+
| onReady | 图表加载回调，用于后续的事件[事件](/options/plots/event)绑定 | Function（可选） | - |
51+
| scale | 将抽象数据映射为视觉数据，详见[比例尺](/options/plots/scale/overview) | object（可选） | - |
52+
| animate | 动画作为可视化的重要组成部分，能显著提高数据可视化的表现力，详见[动画](/options/plots/animate/overview) | object（可选） | - |
53+
| interaction | 提供了按需探索数据的能力，详见[交互](/options/plots/interaction/overview) | object（可选） | - |
54+
| state | 实现交互反馈、高亮、选中等效果，详见[状态](/options/plots/state)，不同交互下图表样式 | object（可选） | - |
55+
| annotations | 视图好比一个画板，`Treemap` 组件默认在其上绘制了一个矩阵树图，我们可以通过 annotations 在上面叠加更多的图层，详见[标注](/examples#statistics-annotation-shape) | Array（可选） | - |
5856

5957
### layout
6058

61-
| 属性 | 描述 | 类型 | 默认值 |
62-
| ------- | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
63-
| tile | 布局方式 | `'treemapBinary' \| 'treemapDice' \| 'treemapSlice' \| 'treemapSliceDice' \| 'treemapSquarify' \| 'treemapResquarify'` | `'treemapSquarify'` |
64-
| padding | 外间距，另外还有 `paddingInner \| paddingOuter \| paddingTop \| paddingBottom \| paddingRight \| paddingLeft` | `number` | 0 |
65-
| sort | 排序规则 | `(a: any, b: any): number` | `(a, b) => b.value - a.value` |
66-
| layer | 渲染层级 | `number \| (d) => number` | 0 |
59+
| 属性 | 说明 | 类型 | 默认值 |
60+
| ------- | -------- | -------- | ------- |
61+
| tile | 布局方式 | `'treemapBinary' \| 'treemapDice' \| 'treemapSlice' \| 'treemapSliceDice' \| 'treemapSquarify' \| 'treemapResquarify'` | `'treemapSquarify'` |
62+
| paddingInner | 内距，另外还有 `paddingOuter \| paddingTop \| paddingBottom \| paddingRight \| paddingLeft` | `number` | 0 |
63+
| sort | 排序规则 | `(a: any, b: any): number` | `(a, b) => b.value - a.value` |
64+
| layer | 渲染层级 | `number \| (d) => number` | 0 |
65+
66+
67+
## 事件
68+
69+
详见[选项-事件](/options/plots/event)。
70+
71+
## 方法
6772

68-
### style
73+
详见[图表概览-图表方法](/components/plots/overview#图表方法)。
6974

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

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

‎site/examples/statistics/treemap/demo/drill-down.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { Treemap } from '@ant-design/plots';
2+
import React from 'react';
3+
import { createRoot } from 'react-dom';
4+
5+
const DemoTreemap = () => {
6+
const config = {
7+
layout: { tile: 'treemapBinary', paddingInner: 5 },
8+
data: {
9+
name: '商品',
10+
children: [
11+
{
12+
name: '文具',
13+
children: [
14+
{
15+
name: '笔',
16+
children: [
17+
{ name: '铅笔', value: 430 },
18+
{ name: '圆珠笔', value: 530 },
19+
{ name: '钢笔', value: 80 },
20+
{ name: '水彩', value: 130 },
21+
],
22+
},
23+
{ name: '铅笔盒', value: 30 },
24+
{ name: '直尺', value: 60 },
25+
{ name: '笔记本', value: 160 },
26+
{ name: '其他', value: 80 },
27+
],
28+
},
29+
{
30+
name: '零食',
31+
children: [
32+
{ name: '饼干', value: 280 },
33+
{ name: '辣条', value: 150 },
34+
{ name: '牛奶糖', value: 210 },
35+
{ name: '泡泡糖', value: 80 },
36+
{
37+
name: '饮品',
38+
children: [
39+
{ name: '可乐', value: 122 },
40+
{ name: '矿泉水', value: 244 },
41+
{ name: '果汁', value: 49 },
42+
{ name: '牛奶', value: 82 },
43+
],
44+
},
45+
{ name: '其他', value: 40 },
46+
],
47+
},
48+
{ name: '其他', value: 450 },
49+
],
50+
},
51+
valueFiled: 'value',
52+
style: {
53+
labelFill: '#000',
54+
labelStroke: '#fff',
55+
labelLineWidth: 1.5,
56+
labelFontSize: 14,
57+
labelPosition: 'top-left',
58+
labelDx: 5,
59+
labelDy: 5,
60+
},
61+
interaction: { treemapDrillDown: { breadCrumbY: 12, activeFill: '#873bf4' } },
62+
};
63+
return <Treemap {...config} />;
64+
};
65+
66+
createRoot(document.getElementById('container')).render(<DemoTreemap />);

‎site/examples/statistics/treemap/demo/meta.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,14 @@
1111
"en": "Treemap Chart"
1212
},
1313
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*T2zHS6J1cGMAAAAAAAAAAAAADmJ7AQ/original"
14+
},
15+
{
16+
"filename": "drill-down.js",
17+
"title": {
18+
"zh": "钻取",
19+
"en": "Drill Down"
20+
},
21+
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*FwWXQqqpc_UAAAAAAAAAAAAADmJ7AQ/original"
1422
}
1523
]
1624
}

0 commit comments

Comments
 (0)