vis 动态添加数据

借鉴两篇文章作出了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);
      });
      },