带自定义布局的组织架构图

演示具有自定义混合树形布局和基于级别的卡片样式的复杂组织架构图。

带自定义布局的组织架构图

功能概述

本示例演示了使用自定义混合树形布局的复杂组织架构图。它具有不同组织级别的不同卡片样式（业务单元负责人、总监、负责人、经理）和颜色编码的背景。

核心特性实现

自定义混合树形布局

const myMixTreeLayout = useRef(new MyMixTreeLayout(graphInstance));

myMixTreeLayout.current.setLevelColors(['#7e22ce30', '#2564eb3a', '#71c9053d', '#ea5a0c34']);
await myMixTreeLayout.current.loadData(myTreeJsonData);
myMixTreeLayout.current.applyAllGroupLayout();
myMixTreeLayout.current.connectRootToChildrenTreeRoot();

基于级别的卡片组件

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => {
        switch (node.data?.level) {
            case 'bu-leader': return <BULeaderCard node={node} />;
            case 'director': return <DirectorCard node={node} />;
            case 'leader': return <LeaderCard node={node} />;
            case 'manager': return <ManagerCard node={node} />;
            default: return <div>{node.text}</div>;
        }
    }}
</RGSlotOnNode>

正交线样式

const graphOptions: RGOptions = {
    defaultLineShape: RGLineShape.StandardOrthogonal,
    defaultLineWidth: 3,
    defaultLineColor: '#666666',
    defaultNodeColor: 'transparent'
};

创意使用场景

公司组织架构图：高管、总监、经理和个人贡献者级别，具有不同的样式。清晰的视觉层次。

军事组织：具有基于级别样式的指挥层次。指挥链的可视化。

大学结构：行政、院长、部门负责人和教员级别。学术层次显示。

政府组织：机构、局、处和科级别。政府结构可视化。

医疗保健组织：高管、总监、经理和员工级别。医院或医疗保健系统组织。

项目组织：项目发起人、项目经理、团队负责人和团队成员。项目团队结构。

学校系统：总监、校长、部门负责人和教师。教育机构层次。

特许经营组织：特许经营所有者、区域经理、商店经理和员工。多级商业结构。