- Html引入：
https://unpkg.com/browse/[email protected]/dist/vis-network.min.js
- npm引入：npm install vis
- 在关系图的页面引入vis：import Vis from ‘vis’
- 在html中定义容器：<div id=”network_id” style=”height:800px”>
- 在script中定义所需变量，注意：network不可以在data中定义，否则会出现拖拽 节点的时候，其他节点不跟随变化位置的BUG
- 代码如下：
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方法相同，仅展示用到的部分代码