整理使用visjs生成关系拓扑图

1. Html引入：

https://unpkg.com/browse/vis-network@6.5.2/dist/vis-network.min.js

1. npm引入：npm install vis
2. 在关系图的页面引入vis：import Vis from ‘vis’
3. 在html中定义容器：<div id=”network_id” style=”height:800px”>
4. 在script中定义所需变量，注意：network不可以在data中定义，否则会出现拖拽 节点的时候，其他节点不跟随变化位置的BUG
5. 代码如下：

export default{

    data () {

        return {

            nodes:[], //节点数据源

            edges:[], //连接线走向

            container:null, //容器

        }
    }，

    mounted(){

        this.init();

        this.network.on("click",function(params){//绑定点击事件

            console.log(params)

        });
    },

    methods:{

        init(){

            let _self = this; //定义一个变量接收vue对象（下方代码会改变this 指向，因此在此定义）
            //节点数据源赋值

            _self.nodes=newVis.DataSet([
                {id:1,label:"BOM单",x:-400,y:-300}, 
                {id:2,label:"生产工艺单",x:-400,y:-200},
                {id:3,label:"生产计划单",x:-400,y:-100},
                {id:4,label:"估料工作台",x:-400,y:0},
                {id:5,label:"生产制造单",x:-400,y:100},
                {id:6,label:"物料领料单",x:-400,y:200},
                {id:7,label:"剪裁分包单",x:-200,y:-100},
                {id:8,label:"车工领活单",x:0,y:-100},
                {id:9,label:"工艺外发入库",color:        {border:'#67C23A',background:'#67C23A'},x:0,y:0},
                {id:10,label:"工艺外发加工",color:{border:'#67C23A',background:'#67C23A'},x:0,y:100},
                {id:11,label:"工艺外发完成",color:{border:'#67C23A',background:'#67C23A'},x:0,y:200},
                {id:12,label:"工艺外发回组",color:{border:'#67C23A',background:'#67C23A'},x:0,y:300},
                {id:13,label:"工艺外发返工",color:{border:'#F56C6C',background:'#67C23A'},x:-200,y:150},
                {id:14,label:"物料进货单",x:-600,y:0},
                {id:15,label:"产前样式生产单",x:-600,y:100},
                {id:16,label:"尾段加工单",x:200,y:-100},
                {id:17,label:"生产完工单",x:400,y:-100},
                {id:18,label:"生产入库",x:600,y:-100},
                {id:19,label:"返工工作台",color:{border:'#409EFF',background:'#409EFF'},x:100,y:-200},
                {id:20,label:"返工返回台",color:{border:'#409EFF',background:'#409EFF'},x:500,y:-200},
                {id:21,label:"品检报告单",color:{border:'#E6A23C',background:'#E6A23C'},x:400,y:0},
            ]);

            //介绍：
            //Id：唯一标识，不可重复,
            //Label: 节点显示数据，
            //X:x轴坐标，初始化定义位置使用，
            //Y：y轴左边，初始化定义位置使用，
            //Color:定义节点背景颜色，边框颜色等
            //数据走向设置
            _self.edges=newVis.DataSet([
                {from:1,to:2,length:300},
                {from:2,to:3,length:300},
                {from:3,to:4,length:300},
                {from:4,to:5,length:300},
                {from:4,to:14,length:300,color:{color:'#848484'}},
                {from:5,to:6,length:300},
                {from:5,to:7,length:300},
                {from:5,to:15,length:300,color:{color:'#848484'}},
                {from:7,to:8,length:300},
                {from:8,to:9,length:300,color:{color:'#67C23A'}},
                {from:8,to:16,length:300},
                {from:9,to:10,length:300,color:{color:'#67C23A'}},
                {from:10,to:11,length:300,color:{color:'#67C23A'}},
                {from:11,to:12,length:300,color:{color:'#67C23A'}},
                {from:11,to:13,length:300,color:{color:'#F56C6C'}},
                {from:13,to:10,length:300,color:{color:'#67C23A'}},
                {from:16,to:17,length:300},
                {from:16,to:19,length:300,color:{color:'#67C23A'},labe l:'车工返工'},
                {from:17,to:18,length:300},
                {from:17,to:19,length:300,label:'尾段返工'},
                {from:17,to:21,length:300,color:{color:'#E6A23C'}},
                {from:19,to:20,length:300},
                {from:20,to:16,length:300,color:{color:'rgba(19,206,10 2,0.8)'},label:'车工返工返回 ',smooth:{enabled:true,type:"dynamic",roundness:0.5}},
                {from:20,to:17,length:300,color:{color:'rgba(255,120,0, 1)'},label:'尾段返工返回'}
            ]);
        //介绍：
        //From:节点开始位置（节点id）
        //To: 节点结束位置（节点ID）
        //Color:节点线路颜色
        //Label: 边缘标签
        //拓扑图数据绑定
        _self.container=document.getElementById('network_id'); //拓扑图容器
        constdata={
            nodes:_self.nodes,
            edges:_self.edges
        };
        Const options={
            edges:{
                arrows:'to',//线路指向标识，此处为箭头
                font:{
                    size:12//字体
                },
                widthConstraint:{
                    maximum:90//边缘标签的最大宽度设置
                }
            },
            nodes:{
                shape:'box',//节点形状
                margin:10,
                widthConstraint:{
                    maximum:200  //节点最大宽度，也可以设置最小minimum
                }
            },
            physics:{
                enabled:false //是否设置拓扑图可以物理移动，默认true
            },
            interaction:{
                dragNodes:false,//是否能拖动节点
                dragView:false,//是否能拖动画布
                zoomView:false//是否能缩放画布
            },
        }
        _self.network=newVis.Network(_self.container,data,options); //拓扑图赋值
        }

    }

}

以上为关系拓扑图npm实现代码，html方法相同，仅展示用到的部分代码