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

效果图:

vis组件库:vis.js

vis-network中文文档:vis-network

安装组件库:

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

新建RelationGraph.vue文件:

<template><div><div ref="networkContainer" style="height: 400px; background-color: #e7e7e7;width: 500px;"></div></div>
</template><script>import {Network} from 'vis-network/standalone/esm/vis-network.js';import VueVisNetwork from 'vue-vis-network';export default {name:"RelationGraph",props: {nodes: {type: Array,required: true,},edges: {type: Array,required: true,},options: {type: Object,default: () => ({}),},},components: {VueVisNetwork,},mounted() {// 创建关联关系图const container = this.$refs.networkContainer;const data = {nodes: this.nodes,edges: this.edges,};new Network(container, data, this.options);},};
</script>

页面使用:

<div><relation-graph :nodes="nodes" :edges="edges" :options="graphOptions"></relation-graph>
</div>
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, //节点边框宽度,单位为pxborderWidthSelected: 3, //节点被选中时边框的宽度,单位为pxlabelHighlightBold: 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, // pxface: "arial",background: "none",strokeWidth: 2, // pxstrokeColor: "#ffffff",align: "horizontal",multi: false,vadjust: 0,bold: {color: "#343434",size: 14, // pxface: "arial",vadjust: 0,mod: "bold",},ital: {color: "#343434",size: 14, // pxface: "arial",vadjust: 0,mod: "italic",},boldital: {color: "#343434",size: 14, // pxface: "arial",vadjust: 0,mod: "bold italic",},mono: {color: "#343434",size: 15, // pxface: "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,},},},}},}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/59944.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

写用例写的焦头烂额?看看摸鱼5年的老点工是怎么写的...

给你个需求&#xff0c;你要怎么转变成最终的用例&#xff1f; 直接把需求文档翻译一下就完事了。 老点工拿到需求后的标准操作&#xff1a; 第一步&#xff1a;解析需求 先解析需求-找出所有需求中的动词&#xff0c;再列出所有测试点。测试点过程不断发散&#xff0c;对于…

【Linux】centos8安装cmake3.27.4

第一步&#xff0c;去官网下安装包&#xff0c;一定不要下错了 下好了之后&#xff0c;用ftp软件传到云服务器或者虚拟机上&#xff0c;我用的是centos8系统&#xff0c;安装之前先准备好这些依赖项 yum install -y gcc gcc-c make automake yum install -y openssl openssl-…

视频云存储/安防监控视频智能分析网关V3:明烟/明火检测功能详解

智能分析网关系列是基于边缘AI计算技术&#xff0c;可对前端摄像头采集的视频流进行实时检测分析&#xff0c;能对监控画面中的人、车、物进行识别。我们的AI边缘计算网关硬件——智能分析网关目前有5个版本&#xff1a;V1、V2、V3、V4、V5&#xff0c;每个版本都能实现对监控视…

计算机毕设之Python的高校成绩分析(含文档+源码+部署)

本系统阐述的是一个高校成绩分析系统的设计与实现&#xff0c;对于Python、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计&#xff0c;描述&#xff0c;实现和分析与测试方面来表明开发的过程。开发中使用了 django框架和MySql数据库技术搭建系统的整体架构。…

移动互联网的支付作用

移动支付业务起源于银行的电子支付业务。银行的网上支付功能刚开始称为电子银行。网上支付涉及到很多的支付安全问题。移动支付是银行支持手机移动支付功能。移动的银行应用程序灵活程度更高&#xff0c;但是会增加服务器追踪客户端应用程序和相关设备联网互联的复杂程度。现在…

js生成页面截图下载

第一步安装 html2canvas 依赖 npm i html2canvas 第二步 创建canvas获取dom内容&#xff0c;然后使用html2canvas生成图片 /*** name 生成截图* param {Element} canvasBox 截图区域dom对象*/ export const createScreenshot (canvasBox, down true) > {return new Pro…

Linux安装jupyter notebook

1. Linux安装jupyter notebook 1.1 生成配置文件 这里在conda环境中安装。 jupyter notebook --generate-config --allow-root上面命令是生成配置文件&#xff0c;并且允许使用root用户运行。配置文件默认生成到~/.jupyter/jupyter_notebook_config.py。 具体解释如下&…

C语言三子棋解析

目录&#xff08;标2的是我自己写的一堆问题不知道怎么改&#xff09; 开始菜单1打印棋盘1玩家下棋1电脑下棋1判断输赢1开始菜单2打印棋盘2选择先后2玩家下棋2电脑下棋2判断输赢2完整代码文件else.h文件else.c文件test.c 开始菜单1 void menu()//打印菜单 {printf("*****…

Java:SpringBoot使用AES对JSON数据加密和解密

目录 1、加密解密原理2、项目示例2.1、项目结构2.2、常规业务代码2.3、加密的实现 2.4、接口测试2.5、总结 1、加密解密原理 客户端和服务端都可以加密和解密&#xff0c;使用base64进行网络传输 加密方 字符串 -> AES加密 -> base64解密方 base64 -> AES解密 -&g…

线上祭奠软件:虚拟纪念与情感表达的新方式

线上祭奠软件作为一种新兴的技术应用&#xff0c;正在改变传统祭奠方式&#xff0c;为人们提供了跨越时空的虚拟纪念和情感表达方式。本文将深入探讨线上祭奠软件的意义、功能与挑战&#xff0c;并思考其对社会和个人的影响。 一、线上祭奠软件的意义&#xff1a; 1.跨…

前端:横向滚动条,拖动进行左右滚动(含隐藏滚动条)

效果 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, i…

LeetCode面试经典150题(day 1)

LeetCode是一个免费刷题的一个网站&#xff0c;想要通过笔试的小伙伴可以每天坚持刷两道算法题。 接下来&#xff0c;每天我将更新LeetCode面试经典150题的其中两道算法题&#xff0c;一边巩固自己&#xff0c;一遍希望能帮助到有需要的小伙伴。 88.合并两个有序数组 给你两个…

SQL语法与DDL语句的使用

文章目录 前言一、SQL通用语法二、DDL语句1、DDL功能介绍2、DDL语句对数据库操作&#xff08;1&#xff09;查询所有数据库&#xff08;2&#xff09;查询当前数据库&#xff08;3&#xff09;创建数据库&#xff08;4&#xff09;删除数据库&#xff08;5&#xff09;切换数据…

Windows 桌面运维及安全管理

什么是桌面运维 桌面运维是IT管理的重要部分&#xff0c;是一种系统管理的技术&#xff0c;它的主要目的是通过管理用户、计算机和其他设备来提高组织的效率。它不仅能够降低维护成本&#xff0c;而且还能够提高系统的可用性。 如今随着企业设备越来越丰富&#xff0c;桌面运…

SpringBoot Mybatis 多数据源 MySQL+Oracle

一、背景 在SpringBoot Mybatis 项目中&#xff0c;需要连接 多个数据源&#xff0c;连接多个数据库&#xff0c;需要连接一个MySQL数据库和一个Oracle数据库 二、依赖 pom.xml <dependencies><dependency><groupId>org.springframework.boot</groupId&…

AI 绘画Stable Diffusion 研究(十七)SD lora 详解(上)

大家好&#xff0c;我是风雨无阻。 本期内容&#xff1a; Lora的原理是什么&#xff1f;Lora如何下载安装&#xff1f;Lora如何使用&#xff1f; 大家还记得 AI 绘画Stable Diffusion 研究&#xff08;三&#xff09;sd模型种类介绍及安装使用详解 这篇文章中&#xff0c;曾简…

Apache POI 以及 导出Excel表

一、Apache POI 1、介绍 Apache POI 是一个处理Miscrosoft Office各种文件格式的开源项目。简单来说就是&#xff0c;我们可以使用 POI 在 Java 程序中对Miscrosoft Office各种文件进行读写操作。 一般情况下&#xff0c;POI 都是用于操作 Excel 文件。 2、Apache POI 怎么…

android java 硬编码保存mp4 jni数据转换

目录 java imagereader编码保存 java NV21toYUV420SemiPlanar 编码保存视频用&#xff1a; imageReader获取nv21 jni NV12toYUV420SemiPlanar函数&#xff1a; 代码来自博客&#xff1a; 【Android Camera2】彻底弄清图像数据YUV420_888转NV21问题/良心教学/避坑必读!_yuv…

windows安装Scala

Windows安装Scala 下载地址&#xff1a;https://downloads.lightbend.com/scala/2.11.11/scala-2.11.11.zip 解压完成之后 配置环境变量

《Understanding Black-box Predictions via Influence Functions》笔记

[1] 通过升权&#xff08; 2.1 \S 2.1 2.1&#xff09;、扰动&#xff08; 2.2 \S 2.2 2.2&#xff09;两种方式研究某个 training point z ( x , y ) z(x,y) z(x,y) 对&#xff08;优化后的&#xff09;模型参数 θ ^ \hat\theta θ^、模型在某个 test point z test ( …