vue2使用 vis-network 和 vue-vis-network 插件封装一个公用的关联关系图

效果图:

vue2使用 vis-network 和 vue-vis-network 插件封装一个公用的关联关系图_第1张图片

vis组件库:vis.js

vis-network中文文档:vis-network

安装组件库:

npm install vis-network vue-vis-network
或
yarn add vis-network vue-vis-network

新建RelationGraph.vue文件:



页面使用:

import RelationGraph from './RelationGraph.vue';
export default {
        components: {
			RelationGraph,
		},
		data() {
			return {
				nodes: [{
						id: 0,
						label: "大前端",
						color: {
							background: "#fd91b7"
						},
					},
					{
						id: 1,
						label: "HTML",
						color: {
							background: "#7ed6df"
						},
					},
					{
						id: 2,
						label: "JavaScript",
						color: {
							background: "#d294e2"
						},
					},
					{
						id: 3,
						label: "CSS",
						color: {
							background: "#ffb300"
						},
					}
				],
				edges: [{
						id: "e1",
						from: 0,
						to: 1,
						label: "含"
					},
					{
						id: "e2",
						from: 1,
						to: 0,
						label: "嵌"
					},
					{
						id: "e3",
						from: 0,
						to: 2,
						label: "step1"
					},
					{
						id: "e4",
						from: 0,
						to: 3,
						label: "step1"
					},
				],
				graphOptions: {
					autoResize: true, //网络将自动检测其容器的大小调整,并相应地重绘自身
					locale: "cn", //语言设置:工具栏显示中文
					//设置语言
					locales: {
						cn: {
							//工具栏中文翻译
							edit: "编辑",
							del: "删除当前节点或关系",
							back: "返回",
							addNode: "添加节点",
							addEdge: "添加连线",
							editNode: "编辑节点",
							editEdge: "编辑连线",
							addDescription: "点击空白处可添加节点",
							edgeDescription: "点击某个节点拖拽连线可连接另一个节点",
							editEdgeDescription: "可拖拽连线改变关系",
							createEdgeError: "无法将边连接到集群",
							deleteClusterError: "无法删除集群.",
							editClusterError: "无法编辑群集'",
						},
					},
					// 设置节点样式
					nodes: {
						shape: "dot", //节点的外观。为circle时label显示在节点内,为dot时label显示在节点下方
						size: 30, //节点的大小,
						shadow: false, //如果为true,则节点使用默认设置投射阴影。
						font: {
							//字体配置
							size: 18,
							color: "rgb(117, 218, 167)",
							align: "center",
						},
						color: {
							border: "transparent", //节点边框颜色
							background: "#ffc7c7", //节点背景颜色
							highlight: {
								//节点选中时状态颜色
								border: "rgb(255, 0, 0)",
								background: "rgb(255, 0, 0)",
							},
							hover: {
								//节点鼠标滑过时状态颜色
								border: "#dff9fb",
								background: "#88dab1",
							},
						},
						margin: 5, //当形状设置为box、circle、database、icon、text;label的边距
						widthConstraint: 100, //设置数字,将节点的最小和最大宽度设为该值,当值设为很小的时候,label会换行,节点会保持一个最小值,里边的内容会换行
						borderWidth: 1, //节点边框宽度,单位为px
						borderWidthSelected: 3, //节点被选中时边框的宽度,单位为px
						labelHighlightBold: false, //确定选择节点时标签是否变为粗体
					},
					// 边线配置
					edges: {
						width: 1,
						length: 200,
						color: {
							color: "#848499",
							highlight: "rgb(255, 85, 0)",
							hover: "#88dab1",
							inherit: "from",
							opacity: 1.0,
						},
						font: {
							color: "#343434",
							size: 18, // px
							face: "arial",
							background: "none",
							strokeWidth: 2, // px
							strokeColor: "#ffffff",
							align: "horizontal",
							multi: false,
							vadjust: 0,
							bold: {
								color: "#343434",
								size: 14, // px
								face: "arial",
								vadjust: 0,
								mod: "bold",
							},
							ital: {
								color: "#343434",
								size: 14, // px
								face: "arial",
								vadjust: 0,
								mod: "italic",
							},
							boldital: {
								color: "#343434",
								size: 14, // px
								face: "arial",
								vadjust: 0,
								mod: "bold italic",
							},
							mono: {
								color: "#343434",
								size: 15, // px
								face: "courier new",
								vadjust: 2,
								mod: "",
							},
						},
						shadow: false,
						smooth: {
							//设置两个节点之前的连线的状态
							enabled: true, //默认是true,设置为false之后,两个节点之前的连线始终为直线,不会出现贝塞尔曲线
						},
						arrows: {
							to: true, //默认是false
						}, //箭头指向to
					},
					// 布局
					layout: {
						randomSeed: 2, //配置每次生成的节点位置都一样,参数为数字1、2等
					},
					//计算节点之前斥力,进行自动排列的属性
					physics: {
						enabled: true, //默认是true,设置为false后,节点将不会自动改变,拖动谁谁动。不影响其他的节点
						barnesHut: {
							gravitationalConstant: -4000,
							centralGravity: 0.3,
							springLength: 120,
							springConstant: 0.04,
							damping: 0.09,
							avoidOverlap: 0,
						},
					},
				},
			}
		},
	}

你可能感兴趣的:(vue.js,前端,javascript)