vue2+antv/x6实现er图
效果图

安装依赖
npm install @antv/x6 --save
我目前的项目安装的版本是@antv/x6 2.18.1

人狠话不多,直接上代码
<template><div class="er-graph-container"><!-- 画布容器 --><div ref="graphContainerRef" id="graphContainer"></div></div>
</template><script>
import { Graph, Shape } from "@antv/x6";const LINE_HEIGHT = 24;
const NODE_WIDTH = 150;export default {name: "X6GraphComponent",data() {return {graph: null,// 画布数据graphData: [{id: "1",shape: "er-rect",label: "学生",width: 150,height: 24,position: {x: 24,y: 150,},ports: [{id: "1-1",group: "list",attrs: {portNameLabel: {text: "ID",},portTypeLabel: {text: "STRING",},},},{id: "1-2",group: "list",attrs: {portNameLabel: {text: "Name",},portTypeLabel: {text: "STRING",},},},{id: "1-3",group: "list",attrs: {portNameLabel: {text: "Class",},portTypeLabel: {text: "NUMBER",},},},{id: "1-4",group: "list",attrs: {portNameLabel: {text: "Gender",},portTypeLabel: {text: "BOOLEAN",},},},],},{id: "2",shape: "er-rect",label: "课程",width: 150,height: 24,position: {x: 250,y: 210,},ports: [{id: "2-1",group: "list",attrs: {portNameLabel: {text: "ID",},portTypeLabel: {text: "STRING",},},},{id: "2-2",group: "list",attrs: {portNameLabel: {text: "Name",},portTypeLabel: {text: "STRING",},},},{id: "2-3",group: "list",attrs: {portNameLabel: {text: "StudentID",},portTypeLabel: {text: "STRING",},},},{id: "2-4",group: "list",attrs: {portNameLabel: {text: "TeacherID",},portTypeLabel: {text: "STRING",},},},{id: "2-5",group: "list",attrs: {portNameLabel: {text: "Description",},portTypeLabel: {text: "STRING",},},},],},{id: "3",shape: "er-rect",label: "老师",width: 150,height: 24,position: {x: 480,y: 350,},ports: [{id: "3-1",group: "list",attrs: {portNameLabel: {text: "ID",},portTypeLabel: {text: "STRING",},},},{id: "3-2",group: "list",attrs: {portNameLabel: {text: "Name",},portTypeLabel: {text: "STRING",},},},{id: "3-3",group: "list",attrs: {portNameLabel: {text: "Age",},portTypeLabel: {text: "NUMBER",},},},],},{id: "4",shape: "edge",source: {cell: "1",port: "1-1",},target: {cell: "2",port: "2-3",},attrs: {line: {stroke: "#A2B1C3",strokeWidth: 2,},},zIndex: 0,},{id: "5",shape: "edge",source: {cell: "3",port: "3-1",},target: {cell: "2",port: "2-4",},attrs: {line: {stroke: "#A2B1C3",strokeWidth: 2,},},zIndex: 0,},],};},mounted() {this.initGraph();},methods: {initGraph() {Graph.registerPortLayout("erPortPosition",(portsPositionArgs) => {return portsPositionArgs.map((_, index) => {return {position: {x: 0,y: (index + 1) * LINE_HEIGHT,},angle: 0,};});},true);Graph.registerNode("er-rect",{inherit: "rect",markup: [{tagName: "rect",selector: "body",},{tagName: "text",selector: "label",},],attrs: {rect: {strokeWidth: 1,stroke: "#5F95FF",fill: "#5F95FF",},label: {fontWeight: "bold",fill: "#ffffff",fontSize: 12,},},ports: {groups: {list: {markup: [{tagName: "rect",selector: "portBody",},{tagName: "text",selector: "portNameLabel",},{tagName: "text",selector: "portTypeLabel",},],attrs: {portBody: {width: NODE_WIDTH,height: LINE_HEIGHT,strokeWidth: 1,stroke: "#5F95FF",fill: "#EFF4FF",magnet: true,},portNameLabel: {ref: "portBody",refX: 6,refY: 6,fontSize: 10,},portTypeLabel: {ref: "portBody",refX: 95,refY: 6,fontSize: 10,},},position: "erPortPosition",},},},},true);this.graph = new Graph({container: this.$refs.graphContainerRef,grid: true,connecting: {router: {name: "er",args: {offset: 25,direction: "H",},},createEdge() {return new Shape.Edge({attrs: {line: {stroke: "#A2B1C3",strokeWidth: 2,},},});},},});let cells = [];this.graphData.forEach((item) => {if (item.shape === "edge") {cells.push(this.graph.createEdge(item));} else {cells.push(this.graph.createNode(item));}});this.graph.resetCells(cells);this.graph.zoomToFit({ padding: 10, maxScale: 1 });},},beforeDestroy() {this.graph && this.graph.dispose();},
};
</script><style>
/* 确保图表可以在容器内正确显示 */
.er-graph-container {min-width: 300px;min-height: 200px;
}
.er-graph-container,
#graphContainer {width: 100%;height: 100%;
}
</style>
O了
相关文章:
vue2+antv/x6实现er图
效果图 安装依赖 npm install antv/x6 --save 我目前的项目安装的版本是antv/x6 2.18.1 人狠话不多,直接上代码 <template><div class"er-graph-container"><!-- 画布容器 --><div ref"graphContainerRef" id"gr…...
如何在XDMA中查看LTSSM状态机
简介 经常会遇到PCIe不能识别的问题,到底怎么去定位。本文以XDMA 为例,一方面复习下LTSSM状态机,一方面描述下如何通过FPGA的XDMA查看这个状态机 技术名词 LTSSM是一种常用于PCI Express(PCIe)接口的状态机…...
编译和运行qemu-uboot-arm64单板的Armbian系统
这篇文章ARM虚拟机安装OMV-CSDN博客遗留一个启动qemu-uboot-arm64单板Armbian镜像的问题,使用官方下载的镜像,会报错: fatal: no kernel available .... Failed to load /vmlinuz ...... qemu-system-aarch64 -smp 8 -m 8G -machine virt …...
Python版《消消乐》,附源码
曾经风靡一时的消消乐,至今坐在地铁上都可以看到很多人依然在玩,想当年我也是大军中的一员,那家伙,吃饭都在玩,进入到高级的那种胜利感还是很爽的,连续消,无限消,哈哈,现…...
Kubernetes ingress
目录 一.ingress 1.ingress简介 2.实现外部应用能访问内部集群服务的方法 (1)NodePort: (2)LoadBalancer: (3)externalIPs: (4)ingress&am…...
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
🔥 个人主页:空白诗 🔥 热门专栏:【JavaScript】 文章目录 🌿 引言五、 Destructuring Assignment - 解构赋值,数据提取的艺术 🎨📌 数组解构📌 对象解构&...
Linux入门学习指南
天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。…...
纯血鸿蒙实战开发—如何添加顶部tab页面
1.Tabs组件 Tabs组件的页面组成包含两个部分,分别是TabContent和TabBar。TabContent是内容页,TabBar是导航页签栏. 根据不同的导航类型,布局会有区别,可以分为底部导航、顶部导航、侧边导航,其导航栏分别位于底部、顶…...
数仓建模—指标拆解和选取
数仓建模—指标拆解和选取 第一节指标体系初识介绍了什么是指标体系 第二节指标体系分类分级和评价管理介绍了指标体系管理相关的,也就是指标体系的分级分类 这一节我们看一下指标体系的拆解和指标选取,这里我们先说指标选取,其实在整个企业的数字化建设过程中我们其实最…...
HTML静态网页成品作业(HTML+CSS)——VIVO介绍网页(1个页面)
🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS,未使用Javacsript代码,共有1个页面。 二、作品演示 三、代…...
MySQL(四) - SQL优化
一、SQL执行流程 MySQL是客户端-服务器的模式。一条SQL的执行流程如下: 在执行过程中,主要有三类角色:客户端、服务器、存储引擎。 大致可以分为三层: 第一层:客户端连接到服务器,构造SQL并发送给服务器…...
用 DataGridView 控件显示数据
使用DataGridView,可以很方便显示数据。 1.为解决方案添加数据集XSD,用作为项目数据源。 2.拖DataGridView控件到WinForms上。 3.在DataGridView控件的任务处,选择数据源。 4.选好数据源后,VS自动添加DataSet、BindingSourse和T…...
VisualSVN Server/TortoiseSVN更改端口号
文章目录 概述VisualSVN Server端更改端口号TortoiseSVN客户端更改远程仓库地址 概述 Subversion(SVN)是常用的版本管理系统之一。部署在服务器上的SVN Server端通常会在端口号80,或者端口号443上提供服务。其中80是HTTP访问方式的默认端口。…...
如何解决研发数据传输层面安全可控、可追溯的共性需求?
研发数据在企业内部跨网文件交换,是相对较为普遍而频繁的文件流转需求,基于国家法律法规要求及自身安全管理需要,许多企业进行内部网络隔离。不同企业隔离方案各不相同,比如银行内部将网络隔离为生产网、办公网、DMZ区,…...
表 ,索引的 degree 检查, trim(degree) default INSTANCES
检查degree >1 的 select substr(owner,1,15) Owner , ltrim(degree) Degree, ltrim(instances) Instances, count(*) "Num Tables" , Parallel from dba_tables where ( trim(degree) > 1 ) and table_name not like ET$% group by owner, degree , ins…...
Git - Rebase命令介绍
Git rebase 是版本控制系统 Git 中一个功能强大、使用广泛的命令。它用于将一个分支中的改动整合到另一个分支中。rebase与merge不同, merge会创建一个新的提交,而rebase则是将一系列提交移动或合并到一个新的基础提交中。下面是详细解释: G…...
JavaScript 从入门到精通Object(对象)
文章目录 对象文本和属性方括号计算属性 属性值简写属性名称限制属性存在性测试,“in” 操作符“for…in” 循环像对象一样排序 总结✅任务你好,对象检查空对象对象属性求和将数值属性值都乘以 2 对象引用和复制通过引用来比较克隆与合并,Obj…...
Postgresql中json和jsonb类型区别
在我们的业务开发中,可能会因为特殊【历史,偷懒,防止表连接】经常会有JSON或者JSONArray类的数据存储到某列中,这个时候再PG数据库中有两种数据格式可以直接一对多或者一对一的映射对象。所以我们也可能会经常用到这类格式数据&am…...
太强了,使用 C# 开发的开源内网穿透工具
🏆作者:科技、互联网行业优质创作者 🏆专注领域:.Net技术、软件架构、人工智能、数字化转型、DeveloperSharp、微服务、工业互联网、智能制造 🏆欢迎关注我(Net数字智慧化基地),里面…...
leetcode及牛客网二叉树相关题、单值二叉树、相同的树、二叉树的前序、中序、后序遍历、另一棵树的子树、二叉树的遍历、 对称二叉树等的介绍
文章目录 前言一、单值二叉树二、相同的树三、二叉树的前序遍历四、二叉树的中序遍历五、二叉树的后序遍历六、另一棵树的子树七、二叉树的遍历八、 对称二叉树总结 前言 leetcode及牛客网二叉树相关题、单值二叉树、相同的树、二叉树的前序、中序、后序遍历、另一棵树的子树、…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色,华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型,能助力我们轻松驾驭 DeepSeek-V3/R1,本文中将分享如何…...
Java 二维码
Java 二维码 **技术:**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...
三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值,最大值左侧的数值严格单调递增,最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值,最小值左侧的数值严格单调递减,最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...
uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
逻辑回归暴力训练预测金融欺诈
简述 「使用逻辑回归暴力预测金融欺诈,并不断增加特征维度持续测试」的做法,体现了一种逐步建模与迭代验证的实验思路,在金融欺诈检测中非常有价值,本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...
手机平板能效生态设计指令EU 2023/1670标准解读
手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读,综合法规核心要求、最新修正及企业合规要点: 一、法规背景与目标 生效与强制时间 发布于2023年8月31日(OJ公报&…...
Kafka主题运维全指南:从基础配置到故障处理
#作者:张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1:主题删除失败。常见错误2:__consumer_offsets占用太多的磁盘。 主题日常管理 …...
LangChain【6】之输出解析器:结构化LLM响应的关键工具
文章目录 一 LangChain输出解析器概述1.1 什么是输出解析器?1.2 主要功能与工作原理1.3 常用解析器类型 二 主要输出解析器类型2.1 Pydantic/Json输出解析器2.2 结构化输出解析器2.3 列表解析器2.4 日期解析器2.5 Json输出解析器2.6 xml输出解析器 三 高级使用技巧3…...
