组织架构图

js写一个这样的组织架构图，下面是代码（复制两份代码，安装依赖，可以看到效果，依赖：vue.js element-ui）

代码地址：https://gitee.com/xxsheep/organization_chart

1.插件官网https://balkangraph.com/ （官网上说有收费版，但是下载的是免费版的）

可以下载js文件，也可以用npm安装

cnpm i @balkangraph/orgchart.js -S

2.修改成自己想要的样式（因为没太多时间，只简单的改成了自己要做的样子，也没有好好处理代码，该文件可直接复制使用，setTemp是修改模板），下面是代码

// 组织机构图
import OrgChart from '@balkangraph/orgchart.js/orgchart';

export default class Chart {
    direction   = 'top'                 // 图形方向： top-从上到下，left-从左到右
    idKey       = 'orgId'               // 节点id key
    parentIdKey = 'orgParentId'         // 节点的父id key
    childKey    = 'childList'           // 子节点key

    // 初始化
    init(dom, treeData) {
        let tree = this.delParentId(treeData);
        let list = [];
        this.treeArray(tree, list);
        return this.draw(dom, list);
    }

    // 删除顶级节点的父id
    delParentId(treeData) {
        if (!treeData) {
            console.error('机构图数据为空，请检查')
            return false; 
        }
        if (!Array.isArray(treeData)) {
            console.error('机构图数据必须是数组，请检查')
            return false; 
        }
        if (treeData.length === 0) {
            return false;
        }

        let list = treeData.map(item => {
            delete item[this.parentIdKey];
            return item;
        })
        return list;
    }

    // 把树形格式化为数组
    treeArray(list, result = []) {
        if (list && Array.isArray(list) && list.length > 0) {
            list.forEach(item => {
                item.id = item[this.idKey];
                item.pid = item[this.parentIdKey];
                item.name = `${item.orgManagerName}/${item.orgManagerPositionName}`;
                item.number = `${item.staffNumbers}/${item.planNumbers}`;
                item.img = require('../img/user/user.png');
                result.push(item);
                this.treeArray(item[this.childKey], result);
            });
        }
    }

    // 渲染机构树图形
    draw(dom, list){
        this.setTmp();
        let nodes = list.map(item => {
            item.tags = ["Management"];
            return item;
        })
        return new OrgChart(dom, {
            nodes: nodes,
            nodeBinding: {
                field_0: "orgName",
                field_1: "name",
                field_2: "number",
                img_0: "img"
            },
            tags: {
                Management: {
                    template: "myTemplate"
                }
            },
            // menu: {
            //     pdf: { text: "导出 PDF" },
            //     png: { text: "导出 PNG" },
            //     svg: { text: "导出 SVG" },
            //     csv: { text: "导出 CSV" }
            // },
            toolbar: {
                layout: false,
                zoom: true,
                fit: true,
                expandAll: false
            },
            orientation: OrgChart.orientation[this.direction],          // 方向
            enableSearch: false,                                        // 是否可以搜索
            nodeMouseClick: OrgChart.action.none,                       // 关闭点击后出现的效果，该效果有很多，可以去官网查看
        });
    }

    // 模板
    setTmp() {
        OrgChart.templates.myTemplate = Object.assign({}, OrgChart.templates.ana);
        OrgChart.templates.myTemplate.size = [168, 80];
        // OrgChart.templates.myTemplate.node = '';
        // OrgChart.templates.myTemplate.node = '';
        OrgChart.templates.myTemplate.node = 
        `
            
            
                
            
            
        
        `;

        // 鼠标点击效果
        OrgChart.templates.myTemplate.ripple = {
            radius: 0,
            color: "#FC8E58",
            rect: null
        };

        OrgChart.templates.myTemplate.field_0 = 
        `
            
            
            {val}
        
        `;
        OrgChart.templates.myTemplate.field_1 = '{val}';
        OrgChart.templates.myTemplate.field_2 = '{val}';

        OrgChart.templates.myTemplate.img_0 = 
              ''
            + ''
            + '' 
            + ''
            + '';

        // 连接线条
        // OrgChart.templates.myTemplate.link = '';

        // OrgChart.templates.myTemplate.nodeMenuButton = 
        //     ''
        //     + ''
        //     + ''
        //     + ''
        //     + ''
        //     + ''
        //     + '';

        OrgChart.templates.myTemplate.plus = 
            ''
            + ''
            + ''

        OrgChart.templates.myTemplate.minus = 
            ''
            + ''

        // OrgChart.templates.myTemplate.expandCollapseSize = 36;

        // OrgChart.templates.myTemplate.exportMenuButton = 
        //     '
'
        //     + '
'
        //     + '
'
        //     + '
'
        //     + '
';  

        // OrgChart.templates.myTemplate.pointer = 
        //     '>'
        //     + ''
        //     + ''
        //     + ''
        //     + ''
        //     + ''
        //     + '';
    }

    constructor(dom, treeData ,direction = 'top') {
        this.direction = direction;
        return this.init(dom, treeData);
    }
}

3.调用