OrganizationChart 组织结构图

直观展示组织内部的层级结构和部门关系。

import { OrganizationChart } from '@ant-design/graphs';

何时使用

想要展示公司或团队的层级结构，明确各个职位和部门的上下级关系。
展示员工的职位和部门分布。
项目管理时，明确项目团队的成员和职责分工。
用于股权穿透、投资上下游公司等依赖分析。

代码演示

基本用法

简单的展示。

VerticalHorizontal

Preview

节点排布

通过设置 direction 为 vertical horizontal 分别让垂直（自上而下）、水平（自左而右）分布。若不设置 direction，则默认垂直分布。

自定义节点

使用自定义的 React 节点进行图的渲染。此示例中使用了内置的 RC 组件 OrganizationChartNode 进行简单实现，你也可以自行开发 RC 组件以满足特定需求。

Click Preset Icon to Expand/Collapse

Click Custom Icon to Expand/Collapse

展开/收起子节点

通过配置 collapse-expand-react-node 交互来启用展开/收起子节点行为。具体可参考 CollapseExpandReactNodeOptions 获取详细配置说明。

API

通用配置参考：图通用属性

OrganizationChart

属性	说明	类型	默认值
data	数据	Data	-
labelField	指定节点标签内容 - 从数据中选择一个字段，对应字段的值作为节点的标签 - 动态生成，将以节点数据为参数调用该函数，并使用返回值作为节点的标签	string \| ((node: NodeData) => string)	节点 ID
direction	语法糖，设置节点的排布方向。当设置 `layout.rankdir` 时会以后者为准	`'vertical'` \| `'horizontal'`	`'vertical'`
layout	Dagre 布局配置	Layout	-

Data

图数据。若开启“展开-收起”交互，需确保数据中包含 children 字段。

const graphData = {
  nodes: [
    { id: '1', label: 'Node 1', children: ['2', '3'] },
    { id: '2', label: 'Node 2', children: ['4'] },
    { id: '3', label: 'Node 3' },
    { id: '4', label: 'Node 4' },
  ],
  edges: [
    { source: '1', target: '2' },
    { source: '1', target: '3' },
    { source: '2', target: '4' },
  ],
};

Layout

Dagre 层次布局。配置如下：

也可以参考 Dagre Wiki

属性	说明	类型	默认值
rankdir	节点排列方向。可以是 `TB`、`BT`、`LR` 或 `RL`，其中 T = 上，B = 下，L = 左，R = 右	string	`TB`
align	节点排列对齐方式。可以是 `UL`、`UR`、`DL` 或 `DR`，其中 U = 上，D = 下，L = 左，R = 右	string	`undefined`
nodesep	布局中节点水平间隔的像素数	number	`50`
edgesep	布局中边水平间隔的像素数	number	`10`
ranksep	布局中每个等级之间的像素数	number	`50`
marginx	图表左右两侧的边距像素数	number	`0`
marginy	图表上下两侧的边距像素数	number	`0`
acyclicer	如果设置为 greedy，则使用贪婪启发式算法来找到图的反馈弧集。反馈弧集是可以移除以使图无环的边集	string	`undefined`
ranker	为输入图中的每个节点分配等级的算法类型。可能的值：`network-simplex`、`tight-tree` 或 `longest-path`	string	`network-simplex`