vis节点等距展示

展示：

重要代码： 

nodes:{
    mass: 4, // 节点之间的排斥力
},
edges:{
    smooth: {
        enabled: true,
        type: "continuous",
        roundness: 0.8
     },
}

全部代码：

<template>
  <div>
    <div class="visBox">
      <div id="mynetwork"></div>
    </div>
  </div>
</template>
<script>
const vis = require('vis-network/dist/vis-network.min.js')
require('vis-network/dist/dist/vis-network.min.css')
import 'font-awesome/css/font-awesome.min.css'
export default {
  name: 'investment',
  data () {
    return {
      list: [
        { id: 1, label: '华为技术有限公司',font:{size:16},margin:20},
        { id: 2, label: '杭州华为企业通信技术有限公司',color: { background: '#F0F5FF' },font:{color:'#000'}},
        { id: 3, label: '上海海思技术有限公司'},
        { id: 4, label: '华为软件技术有限公司'},
        { id: 5, label: '深圳市海思半导体有限公司'},
        { id: 6, label: '华为软件技术有限公司1'},
        { id: 7, label: '华为软件技术有限公司2'},
        { id: 8, label: '华为软件技术有限公司3'},
        { id: 9, label: '华为软件技术有限公司4'},
        { id: 10, label: '华为软件技术有限公司5'},
        { id: 11, label: '华为软件技术有限公司6'},
        { id: 12, label: '华为软件技术有限公司7'},
        { id: 13, label: '华为软件技术有限公司8'},
        { id: 14, label: '华为软件技术有限公司9'},
        { id: 15, label: '华为软件技术有限公司10'},
        { id: 16, label: '华为软件技术有限公司11'},
        { id: 17, label: '华为软件技术有限公司12'},
        { id: 18, label: '华为软件技术有限公司13'},
        { id: 19, label: '华为软件技术有限公司14'},
        { id: 20, label: '华为软件技术有限公司15'},
        { id: 21, label: '华为软件技术有限公司16'},
        { id: 22, label: '华为软件技术有限公司17'},
        { id: 23, label: '华为软件技术有限公司18'},
        { id: 24, label: '华为软件技术有限公司19'},
        { id: 25, label: '华为软件技术有限公司20'},
        { id: 26, label: '华为软件技术有限公司21'},
        { id: 27, label: '华为软件技术有限公司22'},
        { id: 28, label: '华为软件技术有限公司23'},
        { id: 29, label: '华为软件技术有限公司24'},
        { id: 30, label: '华为软件技术有限公司25'},
        { id: 31, label: '华为软件技术有限公司26'},
        { id: 32, label: '华为软件技术有限公司27'},
        { id: 33, label: '华为软件技术有限公司28'},
        { id: 34, label: '华为软件技术有限公司29'},
        { id: 35, label: '华为软件技术有限公司30'},
        { id: 36, label: '华为软件技术有限公司31'},
        { id: 37, label: '华为软件技术有限公司32'},
        { id: 38, label: '华为软件技术有限公司33'},
        { id: 39, label: '华为软件技术有限公司34'},
        { id: 40, label: '华为软件技术有限公司35'},
        { id: 41, label: '华为软件技术有限公司36'},
        { id: 42, label: '华为软件技术有限公司37'},
        { id: 43, label: '华为软件技术有限公司38'},
        { id: 44, label: '华为软件技术有限公司39'},
        { id: 45, label: '华为软件技术有限公司40'},
        { id: 46, label: '华为软件技术有限公司41'},
        { id: 47, label: '华为软件技术有限公司42'},
        { id: 48, label: '华为软件技术有限公司43'},
        { id: 49, label: '华为软件技术有限公司44'},
        { id: 50, label: '华为软件技术有限公司45'},
      ],
      nodes: null,
      edges: new vis.DataSet([
        { from: 2, to: 1,color: '#FF513C'},
        { from: 1, to: 3},
        { from: 1, to: 4},
        { from: 1, to: 5},
        { from: 1, to: 6},
        { from: 1, to: 7},
        { from: 1, to: 8},
        { from: 1, to: 9},
        { from: 1, to: 10},
        { from: 1, to: 11},
        { from: 1, to: 12},
        { from: 1, to: 13},
        { from: 1, to: 14},
        { from: 1, to: 15},
        { from: 1, to: 16},
        { from: 1, to: 17},
        { from: 1, to: 18},
        { from: 1, to: 19},
        { from: 1, to: 20},
        { from: 1, to: 21},
        { from: 1, to: 22},
        { from: 1, to: 23},
        { from: 1, to: 24},
        { from: 1, to: 25},
        { from: 1, to: 26},
        { from: 1, to: 27},
        { from: 1, to: 28},
        { from: 1, to: 29},
        { from: 1, to: 30},
        { from: 1, to: 31},
        { from: 1, to: 32},
        { from: 1, to: 33},
        { from: 1, to: 34},
        { from: 1, to: 35},
        { from: 1, to: 36},
        { from: 1, to: 37},
        { from: 1, to: 38},
        { from: 1, to: 39},
        { from: 1, to: 40},
        { from: 1, to: 41},
        { from: 1, to: 42},
        { from: 1, to: 43},
        { from: 1, to: 44},
        { from: 1, to: 45},
        { from: 1, to: 46},
        { from: 1, to: 47},
        { from: 1, to: 48},
        { from: 1, to: 49},
        { from: 1, to: 50},
      ])
    }
  },
  mounted() {
    this.list.forEach(item => {
      item.label = item.label.slice(0, 4) + '\n' + item.label.slice(4, 8) + '\n' + item.label.slice(8)
    })
    this.init()
  },
  methods: {
    init () {
      var _this = this
      _this.isTitle = false
      _this.nodes = new vis.DataSet(_this.list)
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: this.nodes,
        edges: this.edges
      };
      var options = {
        autoResize: true, // 自动调整容器大小（无css下起作用）
        nodes: { // 节点
          borderWidth: 1, // 节点边框的宽度
          borderWidthSelected: 2, // 选中节点的边框宽度,未定义时为borderwidth*2
          chosen: { // 对选择及悬停做出反应
            node: function(values, id, selected, hovering) {
              values.color = 'red'
            },
          },
          color: {
            background: '#2B4DEF'
          },
          fixed: false, //节点不可以移动
          font: {
            color: '#fff',
            size: 12,
            align: 'center',
          },
          mass: 4, // 节点之间的排斥力
          shadow: {
            enabled: true, // 阴影
          },
          shape: 'circle', // 节点的外观
          margin: 10
        },
        edges: { // 边的配置项必须包含在名为“edges”的对象中
          label:'投资',
          smooth: {
            enabled: true,
            type: "continuous",
            roundness: 0.8
          },
          arrows: { // 线条
            to: {
              enabled: true, // 打开或关闭箭头
              type: 'arrow', //箭头类型
            }
          },
          color: '#379857',
          font: {
            color: '#2B4DEF',
          },
          chosen: { // 对选择及悬停做出反应
            edge: function(values, id, selected, hovering) { // 线的变化
              values.color = 'red';
              values.width = 2
            },
            label: function(values, id, selected, hovering) { // 线上标签的变化
              values.color = 'red'
            },
          },
        },
        layout: {
          randomSeed: 1, //配置每次生成的节点位置都一样
        },
      };
      var network = new vis.Network(container, data, options);
      network.moveTo({
        scale: 2,
        position: {
          x:0,y:0
        },
        animation: true,
        // 动画持续时间
        // duration: 10000,
        // 动画类型
        easingFunction: 'easeeinoutquint'
      })
    }
  }
}
</script>
<style scoped>
#mynetwork {
  width: 800px;
  height: 800px;
  border: 1px solid lightgray;
}
.visBox{
  width: 500px;
  height: 500px;
  position: relative;
}
.visTitle{
  position: absolute;
  top: 0;
  left: 0;
  background-color: antiquewhite;
  width: 230px;
  height: 50px;
  line-height: 50px;
}
</style>