我这里找的是 OrgChart 插件;

地址: GitHub - dabeng/OrgChart: It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.

这里面能满足你对组织架构图的一切需求! ! !

例: 按需加载 / 拖拽 / 编辑 / 自定义 / 折叠 / 从左往右 / 从右往左 / 混合(水平+垂直) / 节点定位 等;

我这里主要使用了 jQuery版本 的混合(水平+垂直)的案例: 

主要讲解 jQuery中如何使用 OrgChart 插件:

1. 打开 GitHub地址后,点击  ES6 Version

2. 点击 ES6 Version 后才会出现 jQuery version

3. 下面会提示你只需要引入 dist 目录下

         js => jquery.orgchart.js 

        css => jquery.orgchart.css

        这两个文件就是 OrgChart 的核心文件! ! !

4. 下面只需要把这两个文件copy到你的项目中,在你的html中引入即可;

如果你具体不知道怎么引入的话,还有方法可以让你更加的清晰! ! !

进入到 jQuery版本模式后,点击 Demos based on nested ul (基于嵌套ul的演示)

选中一个你想要的进去

把对应的文件copy到你的项目中,但是js中的写法可能得需要你自己修改一下;

修改前: 

// 修改前(function($) {$(function() {var ds = {name: "Lao Lao",title: "general manager",children: [{ name: "Bo Miao", title: "department manager" },{name: "Su Miao",title: "department manager",children: [{name: "Hei Hei",title: "senior engineer",children: [{ name: "Pang Pang", title: "engineer" },{name: "Xiang Xiang",title: "UE engineer",children: [{ name: "Dan Dan", title: "engineer" },{name: "Er Dan",title: "engineer",children: [{ name: "Xuan Xuan", title: "intern" },{ name: "Er Xuan", title: "intern" }]}]}]}]},{ name: "Hong Miao", title: "department manager" },{name: "Chun Miao",title: "department manager",children: [{ name: "Bing Qin", title: "senior engineer"},{ name: "Yue Yue", title: "senior engineer",children: [{ name: "Er Yue", title: "engineer"},{ name: "San Yue", title: "engineer" },{ name: "Si Yue", title: "UE engineer" }]}]}]};var oc = $("#chart-container").orgchart({data: ds,nodeContent: "title",verticalLevel: 3,visibleLevel: 4});});
})(jQuery);

修改后:

// 修改后var ds = {name: "Lao Lao",title: "general manager",children: [{ name: "Bo Miao", title: "department manager" },{name: "Su Miao",title: "department manager",children: [{name: "Hei Hei",title: "senior engineer",children: [{ name: "Pang Pang", title: "engineer" },{name: "Xiang Xiang",title: "UE engineer",children: [{ name: "Dan Dan", title: "engineer" },{name: "Er Dan",title: "engineer",children: [{ name: "Xuan Xuan", title: "intern" },{ name: "Er Xuan", title: "intern" }]}]}]}]},{ name: "Hong Miao", title: "department manager" },{name: "Chun Miao",title: "department manager",children: [{ name: "Bing Qin", title: "senior engineer"},{ name: "Yue Yue", title: "senior engineer",children: [{ name: "Er Yue", title: "engineer"},{ name: "San Yue", title: "engineer" },{ name: "Si Yue", title: "UE engineer" }]}]}]};var oc = $("#chart-container").orgchart({data: ds,nodeContent: "title",verticalLevel: 3,visibleLevel: 4});

下面是完整代码:

<link rel="stylesheet" href="../src/views/custom/pages/szbb/homePlugin/css/jquery.orgchart.css"/><style>#chart-container {position: relative;font-family: Arial;height: 540px;border: 1px solid #aaa;border-radius: 5px;overflow: auto;text-align: center;}.orgchart {padding-bottom: 20px;}#github-link {display: inline-block;background-image: url("https://dabeng.github.io/OrgChart/img/logo.png");background-size: cover;width: 64px;height: 64px;position: absolute;top: 0px;left: 0px;}
</style><div id="chart-container"></div><script src="../src/views/custom/pages/szbb/homePlugin/js/jquery.orgchart.js"></script><script>var ds = {name: "Lao Lao",title: "general manager",children: [{ name: "Bo Miao", title: "department manager" },{name: "Su Miao",title: "department manager",children: [{name: "Hei Hei",title: "senior engineer",children: [{ name: "Pang Pang", title: "engineer" },{name: "Xiang Xiang",title: "UE engineer",children: [{ name: "Dan Dan", title: "engineer" },{name: "Er Dan",title: "engineer",children: [{ name: "Xuan Xuan", title: "intern" },{ name: "Er Xuan", title: "intern" }]}]}]}]},{ name: "Hong Miao", title: "department manager" },{name: "Chun Miao",title: "department manager",children: [{ name: "Bing Qin", title: "senior engineer"},{ name: "Yue Yue", title: "senior engineer",children: [{ name: "Er Yue", title: "engineer"},{ name: "San Yue", title: "engineer" },{ name: "Si Yue", title: "UE engineer" }]}]}]};var oc = $("#chart-container").orgchart({data: ds,nodeContent: "title",verticalLevel: 3,visibleLevel: 4});</script>