借鉴两篇文章作出了demo效果

vue用vis插件如何实现网络拓扑图_vue.js_脚本之家

src/App.vue · yaofengqiao/vis-demo - Gitee.com

mounted () {this.getList();},methods: {getList() {allRelation(this.queryParams).then(response => {var edgeList =response;var edges = new Array(edgeList.length);for (var j = 0; j < edgeList.length; j++) {// console.log("edgeList[j].topfrom::"+edgeList[j].topfrom);// console.log("edgeList[j].topto::"+edgeList[j].topto);edges[j] = {'from': edgeList[j].topfrom, 'to': edgeList[j].topto};}this.edges = edges;})allName(this.queryParams).then(response => {var nodeList = response;var nodes = new Array(nodeList.length)for (var i = 0; i < nodeList.length; i++) {// console.log("nodeList[i].topImg::"+nodeList[i].topImg);nodes[i] = {'id': nodeList[i].topId, 'label': nodeList[i].topZName}if(nodeList[i].topType=='orderer'){nodes[i].image=orderer}if(nodeList[i].topType=='channel'){nodes[i].image=passage}if(nodeList[i].topType=='organization'){nodes[i].image=organization}if(nodeList[i].topType=='peer'){nodes[i].image=orderer}}this.nodes = new vis.DataSet(nodes);var data = {nodes: this.nodes,edges: this.edges}var options = {nodes:{shape: 'image',//设置图片},layout: {hierarchical: {direction: 'LR', // 层次结构的方向sortMethod: 'directed', // 节点层级的算法// shakeTowards: 'roots', // 根节点排列在顶部levelSeparation: 550, // 每层之间最小距离nodeSpacing: 100, // 节点距离}},interaction: {dragNodes: false, //是否能拖动节点dragView: false, //是否能拖动画布hover: true, //鼠标移过后加粗该节点和连接线multiselect: true, //按 ctrl 多选selectable: true, //是否可以点击选择selectConnectedEdges: true, //选择节点后是否显示连接线hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线zoomView: false //是否能缩放画布},}var container = document.getElementById('mynetwork')var network = new vis.Network(container, data, options);});},