附上网友的vis.js 对我启发很大，保存

代码：

<template>
<div>
<i class="fa fa-building-o" style="visibility:hidden;"></i>
<div class="visBox">
<div id="mynetwork"></div>
<div v-if="this.isTitle" class="visTitle">{{this.title}}</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 {
data() {
return {
title: '',
isTitle: false,
list: [
{ id: 1, label: '华为投资控股有限公司' },
{ id: 2, label: '杭州华为企业通信技术有限公司' },
{ id: 3, label: '上海海思技术有限公司' },
{ id: 4, label: '华为软件技术有限公司' },
{ id: 5, label: '深圳市海思半导体有限公司' }
],
nodes: null,
edges: new vis.DataSet([
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 1, to: 4 },
{ from: 1, to: 5 }
]),
color: ['#ef9a9a','#f8bbd0','#ce93d8','#b39ddb','#7986cb','#90caf9','#81d4fa']
}
},
mounted() {
var _this = this
_this.nodes = new vis.DataSet(_this.list)
var container = document.getElementById('mynetwork');
var data = {
nodes: this.nodes,
edges: this.edges
};
var options = {
autoResize: false, // 自动调整容器大小（无css下起作用）
nodes: { // 节点
borderWidth: 1, // 节点边框的宽度
borderWidthSelected: 3, // 选中节点的边框宽度,未定义时为borderwidth*2
chosen: { // 对选择及悬停做出反应
node: function(values, id, selected, hovering) {
values.color = 'red'
},
},
color: {
background: '#ef9a9a'
},
fixed: false, //节点不可以移动
font: {
color: '#333',
size: 12,
background: 'rgba(255,255,255,0.5)',
align: 'left',
// vadjust: 20, // 文字的垂直位置
},
// group: { //节点的归属组
// heightConstraint: 10, // 最小高度
// },
margin: 20,
mass: 2, // 节点之间的排斥力
shadow: {
enabled: true, // 阴影
},
shape: 'icon', // 节点的外观
size: 20,
icon: {
face: 'FontAwesome',
code: '\uf1ad',
weight: 5,
size: 40,
color:'#2B7CE9'
},
},
edges: { // 边的配置项必须包含在名为“edges”的对象中
arrows: { // 线条
to: {
enabled: true, // 打开或关闭箭头
type: 'triangle', //箭头类型
}
},
chosen: { // 对选择及悬停做出反应
edge: function(values, id, selected, hovering) { // 线的变化
values.color = 'red';
values.width = 3
},
label: function(values, id, selected, hovering) { // 线上标签的变化
values.color = 'red'
},
},
},
interaction: { // 交互
hover: true,// 当鼠标移到节点上时，节点使用其悬停颜色
hoverConnectedEdges: true,// 当鼠标悬停在节点上时，与其连接的边将以高亮（高亮色）显示
zoomView: true // 允许用户缩放视图
},
// 布局
layout: {
randomSeed: 1, //配置每次生成的节点位置都一样
},
//物理引擎-计算节点之前斥力，进行自动排列的属性
physics: {
enabled: false, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
},
};
var network = new vis.Network(container, data, options);
network.moveTo({
scale: 0.8,
position: {
x:0,y:0
},
animation: true,
// 动画持续时间
// duration: 10000,
// 动画类型
easingFunction: 'easeeinoutquint'
})
network.on('click',function(properties){
_this.isTitle = true
_this.list.forEach(item => {
if (item.id == properties.nodes[0]) {
_this.title = item.label
}
})
})
}
}
</script>
<style scoped>
#mynetwork {
width: 500px;
height: 500px;
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;
}

————————————————
版权声明：本文为CSDN博主「小胡仙」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44436078/article/details/119148566