先上效果图

OrgChart.png
OrgChart.png

以Vue为例

第一步、安装项目中

npm install vue-organization-chart -S

第二步，引入组件

<template>
  <div>
    <organization-chart :datasource="ds"></organization-chart>
  </div>
</template>

<script>
  import Vue from 'vue'
  import OrganizationChart from 'vue-organization-chart'
  import 'vue-organization-chart/dist/orgchart.css'

  export default {
    components: {
      OrganizationChart
    },
    data () {
      return {
        ds: {
          'id': '1',
          'name': 'Lao Lao',
          'title': 'general manager',
          'children': [
            { 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
            { 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
              'children': [
                { 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
                { 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
                  'children': [
                    { 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
                    { 'id': '7', 'name': 'Xiang Xiang', 'title': 'UE engineer' }
                  ]
                 }
               ]
             },
            { 'id': '8', 'name': 'Hong Miao', 'title': 'department manager' },
            { 'id': '9', 'name': 'Chun Miao', 'title': 'department manager' }
          ]
        }
      }
    }
  }
</script>

好的完成
为了更好地拓展业务，还可以在卡槽中添加自己想要的功能

<template slot-scope="{ nodeData }">
  <!-- feel free to customize the internal structure of node -->
</template>

数据格式需要按照上面的返回，否则可能需要修改组件重新封装一下，或者自己按照上面的格式适配一下。

后台返回数据结构.png
后台返回的数据格式大概为上面格式，一个对象包含animal数组或者person数组，animal数组可能包括animal和person，person是最后一级，animal可能有无数级。需要把animal和person统一合并成children数组。

/**
 *  格式化组织机构图数据
 */
dealDate(org){
  let children;
  if(org.fundInfoSonList && org.dealInfoSonList){
    children = org.fundInfoSonList.concat(org.dealInfoSonList)
  }else{
    children = org.fundInfoSonList || org.dealInfoSonList;
  }
  let nodeTree = {
    id: org.id,
    fundNameCn: org.fundNameCn,
    title: org.title,
    flagType: org.flagType,
    children: children
  }
  this.arrFn(nodeTree.children);
  this.datasource = nodeTree;
},
arrFn(org){
  org.forEach(org=>{
    if(Array.isArray(org.fundInfoSonList) && org.fundInfoSonList.length > 0){
      if(org.dealInfoSonList && org.dealInfoSonList.length > 0){
        org.children = org.fundInfoSonList.concat(org.dealInfoSonList);
        delete org.fundInfoSonList;
        delete org.dealInfoSonList;
      }else{
        org.children = org.fundInfoSonList;
        delete org.fundInfoSonList;
      }
    }else{
      if(org.dealInfoSonList && org.dealInfoSonList.length > 0){
        org.children = org.dealInfoSonList;
        delete org.dealInfoSonList;
      }
    }
    if(!!org.children){
      this.arrFn(org.children)
    }
  })
}

OrgChart 分别支持

Vue.js Version

jQuery Version

Native JavaScript(ES6) Version

Web Components Version