组织结构图组件应用orgchart

vue 使用orgChart

1.安装

npm install vue-orgchart -S

2.引入样式

import ‘vue-orgchart/dist/style.min.css’

3.html

 <organization-chart style="width:100%;min-height:100%;" :datasource="orgList"></organization-chart>

4.js

this.orgList= {
      name: 'JavaScript',
        children: [
          { name: 'Angular' },
          {
            name: 'React',
            children: [{ name: 'Preact' }]
          },
          {
            name: 'Vue',
            children: [{ name: 'Moon' }]
          }
        ]
    }

js 使用orgChart

1.引入

<link href="~/Content/OrgChart/jquery.orgchart.css" rel="stylesheet" />
<script src="~/Content/OrgChart/jquery.orgchart.js"></script>

2.html

    <div style='width:100%' id="chart-container"></div>

3.js

 $('#chart-container').orgchart({
        'data': orgList,
        'nodeContent': 'title',
    });