文档地址：https://balkangraph.com/OrgChartJS/Demos/FirstLook
效果

html:

<div id="tree" style="height: 500px;width: 100%;"></div>

<script src="__TMPL__/public/assets/js/orgchart.js"></script>
<script>window.onload = function () {OrgChart.templates.company = Object.assign({}, OrgChart.templates.ana);OrgChart.templates.company.size = [280, 90];OrgChart.templates.company.node ='<rect x="0" y="0" rx="10" ry="10" fill="#f04848"  width="280" height="90" stroke-width="1" stroke="#f04848"></rect>'OrgChart.templates.company.field_0 = '<text text-overflow="multiline" style="font-size: 16px;font-weight:600" fill="#fff" x="140" y="70" text-anchor="middle">{val}</text>';OrgChart.templates.company.img_0 ='<clipPath id="ulaImg">'+ '<circle cx="140" cy="35" r="30"></circle>'+ '</clipPath>'+ '<image preserveAspectRatio="xMidYMid slice" clip-path="url(#ulaImg)" xlink:href="{val}" x="115" y="5" width="40" height="40">'+ '</image>';OrgChart.templates.company.plus ='<rect x="0" y="0" width="18" height="18" rx="9" ry="9" fill="#fff" stroke="#ff993f" stroke-width="1"></rect>'+ '<line x1="4" y1="9" x2="14" y2="9" stroke-width="1" stroke="#ff993f"></line>'OrgChart.templates.company.minus ='<rect x="0" y="0" width="18" height="18" rx="9" ry="9" fill="#fff" stroke="#ff993f" stroke-width="1"></rect>'+ '<line x1="4" y1="9" x2="14" y2="9" stroke-width="1" stroke="#ff993f"></line>'OrgChart.templates.company.expandCollapseSize = 15;OrgChart.templates.department = Object.assign({}, OrgChart.templates.ana);OrgChart.templates.department.size = [120, 55];OrgChart.templates.department.node ='<rect x="0" y="0" rx="6" rx="6" width="120" height="55" fill="#ffa13d" stroke-width="1" stroke="#ff993f"></rect>';OrgChart.templates.department.ripple = {radius: 40,color: "#0890D3",rect: null};OrgChart.templates.department.plus ='<rect x="0" y="0" width="18" height="18" rx="9" ry="9" fill="#fff" stroke="#ff993f" stroke-width="1"></rect>'+ '<line x1="4" y1="9" x2="14" y2="9" stroke-width="1" stroke="#ff993f"></line>'OrgChart.templates.department.minus ='<rect x="0" y="0" width="18" height="18" rx="9" ry="9" fill="#fff" stroke="#ff993f" stroke-width="1"></rect>'+ '<line x1="4" y1="9" x2="14" y2="9" stroke-width="1" stroke="#ff993f"></line>'OrgChart.templates.department.expandCollapseSize = 15;OrgChart.templates.department.field_0 = '<text style="font-size: 14px;" width="50" text-overflow="multiline" fill="#fff" x="60" y="20" text-anchor="middle">{val}</text>';OrgChart.templates.staff = Object.assign({}, OrgChart.templates.ana);OrgChart.templates.staff.size = [26, 150];OrgChart.templates.staff.node ='<rect x="0" y="0" width="26" rx="5" ry="5" height="150" fill="#ff7734" stroke-width="1" stroke="#ff7734"></rect>';OrgChart.templates.staff.field_0 = '<text text-overflow="multiline" width="18" style="font-size: 14px;" fill="#fff" x="12.5" y="20" text-anchor="middle">{val}</text>';OrgChart.templates.staff.plus ='<rect x="0" y="0" width="18" height="18" rx="9" ry="9" fill="#fff" stroke="#ff993f" stroke-width="1"></rect>'+ '<line x1="4" y1="9" x2="14" y2="9" stroke-width="1" stroke="#ff993f"></line>'OrgChart.templates.staff.minus ='<rect x="0" y="0" width="18" height="18" rx="9" ry="9" fill="#fff" stroke="#ff993f" stroke-width="1"></rect>'+ '<line x1="4" y1="9" x2="14" y2="9" stroke-width="1" stroke="#ff993f"></line>'OrgChart.templates.staff.expandCollapseSize = 15;var chart = new OrgChart(document.getElementById("tree"), {nodeMouseClick: OrgChart.action.none,nodeBinding: {field_0: "name",img_0: 'img'},//列表格式layout: OrgChart.treeRightOffset,//自定义节点样式tags: {"Company": {template: "company"},"Department": {template: "department"},"Staff": {template: "staff"}},nodes: {$arr}});chart.on('click', function (sender, args) {if (args.node.tags == 'Company') {window.location.href = "{:url('home/organization/branch')}?orgid=" + args.node.id + "&type=" + args.node.tags;}if (args.node.tags == 'Department') {window.location.href = "{:url('home/organization/branch')}?orgid=" + args.node.id;}if (args.node.tags == 'Staff') {window.location.href = "{:url('home/organization/group')}?orgid=" + args.node.pid + "&groupid=" + args.node.id;}});};
</script>