//首先要加载VIS
npm install vis --save
//在main.js中引入配置项
import "vis/dist/vis.css"
//在使用的页面引入该组件
import Vis from "vis";
//在template中的部分
<!--width,height 画布的宽度,高度。 可以是百分比或像素,一般在dom元素上设置 -->
<div id="network_id" class="network" style="height: 500px;"></div>
//在script中的部分
data() {
return {
nodesArray: [], //节点数组
edgesArray: [] //关系线数组
}
},
mounted() {
// 初始化
let container = document.getElementById("network_id");
let data = { nodes: this.nodesArray, edges: this.edgesArray }
let options = {
autoResize: true, //网络将自动检测其容器的大小调整,并相应地重绘自身
locale: "cn", //语言设置:工具栏显示中文
// 设置节点样式
nodes: {
shape: "dot", //节点的外观。为circle时label显示在节点内,为dot时label显示在节点下方
margin: 5, //当形状设置为box、circle、database、icon、text;label的边距
widthConstraint: 100, //设置数字,将节点的最小和最大宽度设为该值,当值设为很小的时候,label会换行,节点会保持一个最小值,里边的内容会换行
borderWidth: 1, //节点边框宽度,单位为px
borderWidthSelected: 3, //节点被选中时边框的宽度,单位为px
labelHighlightBold: false, //确定选择节点时标签是否变为粗体
},
// 边线配置
edges: {
width: 1,
length: 200,
arrows: { to: true }, //箭头指向to
},
interaction: {
hover: true,
hoverConnectedEdges: true
},
//计算节点之前斥力,进行自动排列的属性
physics: {
enabled: true, //默认是true,设置为false后,节点将不会自动改变,拖动谁谁动。不影响其他的节点
maxVelocity: 20,
minVelocity: 0.1
}
};
let network = new Vis.Network(container, data, options);
},
//以下为完整代码与点边设置
<template>
<div class="Vis">
<!--width,height 画布的宽度,高度。 可以是百分比或像素,一般在dom元素上设置 -->
<div id="network_id" class="network" style="height: 500px;"></div>
<!--节点悬停-->
<div class="menu" id="divHoverNode" style="display:none;"></div>
</div>
</template>
<script>
import Vis from "vis";
export default {
data() {
return {
// 节点数组
nodesArray: [
{
"type": "Project",
"label": "kernel_git_pcmoore_selinux",
"id": 3559072,
"releaseTime": "2006-08-22 12:00:00",
"licenses": [
"GPL-2.0",
"GPL"
],
"copyrights": [
{
"context": "Copyright (C) 1989, 1991 Free Software Foundation, Inc.",
"time": "1989, 1991",
"author": "Free Software Foundation, Inc.",
"integrity": 3
},
{
"context": "copyrighted
vue使用Vis.Network制作图谱
最新推荐文章于 2024-05-28 10:04:05 发布