vue用vis插件如何实现网络拓扑图

npm install vis

import { DataSet, Network } from 'vis';

methods:{ globalTrace () { // create an array with nodes var nodes = new DataSet([ {id: 1, label: 'Node 1'}, {id: 2, label: 'Node 2'}, {id: 3, label: 'Node 3'}, {id: 4, label: 'Node 4'}, {id: 5, label: 'Node 5'} ]); // create an array with edges var edges = new DataSet([ {from: 1, to: 3}, {from: 1, to: 2}, {from: 2, to: 4}, {from: 2, to: 5} ]); // create a network var container = document.querySelector('#global_trace_content'); // provide the data in the vis format var data = { nodes: nodes, edges: edges }; var options = { //节点样式 nodes: { shape: "box",//设置节点node样式为矩形 fixed:true,//节点node固定不可移动 font: { color: "white", //字体的颜色 size: 30 //显示字体大小 }, scaling: { min: 16, max: 32 //缩放效果比例 }, }, //连接线的样式 edges: { color: { color: "rgb(97, 168, 224)", highlight: "rgb(97, 168, 224)", hover: "green", inherit: "from", opacity: 1.0 }, font: { align: "top",//连接线文字位置 }, smooth: true, //是否显示方向箭头 arrows: {to : true },//箭头指向from节点 }, layout: { //以分层方式定位节点 hierarchical: { direction: "LR",//分层排序方向 sortMethod: "directed",//分层排序方法 levelSeparation:400//不同级别之间的距离 }, }, interaction: { navigationButtons: true, // hover: true, //鼠标移过后加粗该节点和连接线 selectConnectedEdges: false, //选择节点后是否显示连接线 }, }; // initialize your network! this.network = new Network(container, data, options); this.network.on("click",e=> this.showDetail(e));//单击事件 this.network.on("doubleClick",e=> this.enterService(e))//双击事件 }, }, mounted(){ this.globalTrace() } 

//todo 双击时折叠和展开 network.on("doubleClick", function(params) {//双击事件 if (params.nodes.length != 0) {//确定为节点双击事件 var click_node_id = params.nodes[0]; remove_all_sub_nodes(click_node_id); } }); //todo 删除下级所有节点 function remove_all_sub_nodes(node_id) { var sub_nodes = get_directly_sub_nodes(node_id); // console.log('sub_nodes',sub_nodes) if (sub_nodes.length == 0) {//当前点击的为叶子节点 //判断是否有下级节点 // console.log('sub',allNodes[node_id - 1]['subids']); if (typeof (allNodes[node_id - 1]['subids']) != 'undefined') { $.each(allNodes[node_id - 1]['subids'], function(index, item) { // console.log('allNodes[item - 1]',allNodes[item - 1]) nodes.add(allNodes[item - 1]); edges.add({id: node_id + '_' + item, from: node_id, to: item}); }); } else { alert('当前为叶子节点'); } } else { $.each(sub_nodes, function(index, item) { var sub_sub_nodes = get_directly_sub_nodes(item); if (sub_sub_nodes.length == 0) { nodes.remove({id: item}); edges.remove({id: node_id + '_' + item}); } else { remove_all_sub_nodes(item); } nodes.remove({id: item}); edges.remove({id: node_id + '_' + item}); }); } } //todo 获取某节点直属下级节点 function get_directly_sub_nodes(node_id) { var return_nodes = []; var connectedNodes = network.getConnectedNodes(node_id);//获取所有连接节点 $.each(connectedNodes, function(index, item) { // console.log('allNodes',allNodes) if (item != allNodes[node_id - 1]['pid']) {//当前节点的父节点 ，不操作 return_nodes.push(item); } }); return return_nodes; }

   
 
 
 下线
 通行