[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:business-unit-organizational-chart":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 使用自定义角色卡片构建分组式组织架构图\n\n## 本示例构建的内容\n\n这个示例构建了一个只读组织架构图，包含一个公司根节点和若干一级业务单元。画布会展示一张顶部高管卡片，其下方是四个横向排列的业务单元子树，并配有正交连线、基于层级深度的颜色强调、缩略图，以及围绕图谱的浮动工具窗口。\n\n用户可以展开或折叠部门，使用内置工具栏和缩略图进行导航，拖动或最小化辅助窗口，在设置面板中切换滚轮和拖拽交互模式，并将图表导出为图片。这个示例的重点并不是普通的树图渲染，而是分组式组合：它将一个源层级结构拆分为多个业务单元树，分别进行布局，并在可见性发生变化时重新组合到一个共享的高管根节点之下。\n\n## 数据是如何组织的\n\n源数据是一个本地嵌套的 `OrgNode` 树，包含 `id`、`text`、`name`、`title`、`type` 和可选的 `children`。根节点表示公司负责人，而每个一级子节点表示一个业务单元，例如 Cloud & Infrastructure、AI & Data Science、Smart Device BU 或 Global Business。\n\n这个示例不会直接",true,500,1782615398754]