今天使用orgChart没有找到合适的，所以今天来写篇使用文档。

OrgChart.js是什么？

基于ES6的组织结构图插件。

特征

支持本地数据和远程数据（JSON）。
基于CSS3过渡的平滑扩展/折叠效果。
将图表对齐为4个方向。
允许用户通过拖放节点更改组织结构。
允许用户动态编辑组织图并将最终层次结构保存为JSON对象。
支持将图表导出为图片。
支持平移和缩放
用户可以采用多种解决方案来构建庞大的组织结构图（请参考多层或混合布局部分）
支持触摸的移动设备插件

使用

<link rel="stylesheet" href="../css/jquery.orgchart.css">

<script type="text/javascript" src="../js/jquery.orgchart.js"></script>

下载地址

https://github.com/dabeng/OrgChart

案例

1.本地直接生成

hrml代码

<div id="chart-container"></div>

js代码

(function($){
  $(function() {
    var datascource = {
      'name': 'Lao Lao',
      'title': 'general manager',
      'children': [
        { 'name': 'Bo Miao', 'title': 'department manager' },
        { 'name': 'Su Miao', 'title': 'department manager',
          'children': [
            { 'name': 'Tie Hua', 'title': 'senior engineer' },
            { 'name': 'Hei Hei', 'title': 'senior engineer',
              'children': [
                { 'name': 'Pang Pang', 'title': 'engineer' },
                { 'name': 'Xiang Xiang', 'title': 'UE engineer' }
              ]
            }
          ]
        },
        { 'name': 'Yu Jie', 'title': 'department manager' },
        { 'name': 'Yu Li', 'title': 'department manager' },
        { 'name': 'Hong Miao', 'title': 'department manager' },
        { 'name': 'Yu Wei', 'title': 'department manager' },
        { 'name': 'Chun Miao', 'title': 'department manager' },
        { 'name': 'Yu Tie', 'title': 'department manager' }
      ]
    };
    $('#chart-container').orgchart({
      'data' : datascource, //数据
      'nodeContent': 'title' //内容对应的字段
    });
  });
})(jQuery)

效果如下：

Vue js 都可以使用；