今天领导突然叫我做一个类似二叉树的组织架构图，第一反应想到的是用echart来弄，做出来后，领带不满意，问还没有更好看一点的插件，我就找到了orgchart,在github上面下载demo下来，很快就上手了，视觉效果还不错，就选它了。
这是我做的一个例子
<style>
.office,
.text {
display: block;
box-sizing: border-box;
padding: 2px;
height: 20px;
min-width: 124px;
font-size: 0.625rem;
border: 1px solid rgba(217, 83, 79, 0.8);
border-top: none;
text-align: center;
background-color: #fff;
color: #333;
text-overflow: ellipsis;
white-space: nowrap;
}
.orgchart .node .content {
border-radius: 0
}
</style>
<div id="chart-container" style="height: 1000px;"></div>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.orgchart.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "GET",
url: "./example.json",
dataType: "json",
success: function (data) {
var datasource = data
console.log(datasource)
var nodeTemplate = function (data) {
return `
<div class="title">${data.name}</div>
<div class="content">${data.title}</div>
<span class="office">${data.office}</span>
<span class="text">${data.text}</span>
`;
};
var oc = $('#chart-container').orgchart({
'data': datasource,
'nodeContent': 'title',
'nodeTemplate': nodeTemplate, //它是模板生成功能，用于自定义节点的任何复杂内部结构。它仅接收一个参数：“ data”代表json datasoure，它将用于呈现一个节点。
'visibleLevel': 3 //一开始就扩展到的级别。
});
}
});
});
</script>
需求需要添加了两个span标签
Options
data【json or String】：数据
pan 【boolean 默:flase】：通过鼠标拖放来控制OrgChart
zoom【boolean 默:false】：通过鼠标滚轮放大或缩放OrgChart
zoominLimit【number 默:7】：设置放大限制
zoomoutLimit【number 默:0.5】：设置缩放限制
direction【String 默:t2b】：T2B："从上到下"，B2T："从底到上"，L2R："左到右"，R2L："向左到右"
verticalLevel【integer(>=2)】：
toggleSiblingsResp【boolean 默:false】：通过单击左/右箭头分别显示/隐藏左/右兄弟节点
ajaxURL【json】：不同的优先级提供了发送不同节点的Ajax请求的URL
visibleLevel【number】：默认展开几级
nodeId【String 默:id】：将数据源的一个属性设置为每个OrgChart节点的唯一标识符。
nodeTitle【String 默:name】：将数据源的一个属性设置为OrgChart节点标题段的文本内容
nodeContent【String】：将数据源的一个属性设置为OrgChart节点的内容部分的文本内容。
nodeTemplate【function】：它是一个模板生成函数，用于定制任何复杂的节点内部结构
createNode【function】：它是用于自定义每个OrgCad节点的回调函数
parentNodeSymbol【String 默:fa-users】：使用图标暗示该节点有子节点
exportButton【boolean 默:false】：是否启用OrgChar的导出按钮
exportFilename【String 默:OrgChart】：当输出当前的OrgChart作为图片时，它是文件名。
exportFileextension【String 默:png】：可用的值是PNG和PDF。
chartClass【String】：当你想在一个页面上实例化多个orgcharts 时，你应该添加不同的类名来区分它们。
draggable【boolean 默:false】：用户可以拖动和删除OrgChart节点
dropCriteria【function】：用户可以构造自己的标准来限制拖动节点和删除区域之间的关系
initCompleted【function】：经常知道您的表何时已经完全初始化、数据加载和呈现，尤其是当使用Ajax数据源时
