当前位置: 首页 > news >正文

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 人狠话不多&#xff0c;直接上代码 <template><div class"er-graph-container"><!-- 画布容器 --><div ref"graphContainerRef" id"gr…...

如何在XDMA中查看LTSSM状态机

简介 经常会遇到PCIe不能识别的问题&#xff0c;到底怎么去定位。本文以XDMA 为例&#xff0c;一方面复习下LTSSM状态机&#xff0c;一方面描述下如何通过FPGA的XDMA查看这个状态机 技术名词 LTSSM是一种常用于PCI Express&#xff08;PCIe&#xff09;接口的状态机&#xf…...

编译和运行qemu-uboot-arm64单板的Armbian系统

这篇文章ARM虚拟机安装OMV-CSDN博客遗留一个启动qemu-uboot-arm64单板Armbian镜像的问题&#xff0c;使用官方下载的镜像&#xff0c;会报错&#xff1a; fatal: no kernel available .... Failed to load /vmlinuz ...... qemu-system-aarch64 -smp 8 -m 8G -machine virt …...

Python版《消消乐》,附源码

曾经风靡一时的消消乐&#xff0c;至今坐在地铁上都可以看到很多人依然在玩&#xff0c;想当年我也是大军中的一员&#xff0c;那家伙&#xff0c;吃饭都在玩&#xff0c;进入到高级的那种胜利感还是很爽的&#xff0c;连续消&#xff0c;无限消&#xff0c;哈哈&#xff0c;现…...

Kubernetes ingress

目录 一.ingress 1.ingress简介 2.实现外部应用能访问内部集群服务的方法 &#xff08;1&#xff09;NodePort&#xff1a; &#xff08;2&#xff09;LoadBalancer&#xff1a; &#xff08;3&#xff09;externalIPs&#xff1a; &#xff08;4&#xff09;ingress&am…...

【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析

🔥 个人主页:空白诗 🔥 热门专栏:【JavaScript】 文章目录 🌿 引言五、 Destructuring Assignment - 解构赋值,数据提取的艺术 🎨📌 数组解构📌 对象解构&...

Linux入门学习指南

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…...

纯血鸿蒙实战开发—如何添加顶部tab页面

1.Tabs组件 Tabs组件的页面组成包含两个部分&#xff0c;分别是TabContent和TabBar。TabContent是内容页&#xff0c;TabBar是导航页签栏. 根据不同的导航类型&#xff0c;布局会有区别&#xff0c;可以分为底部导航、顶部导航、侧边导航&#xff0c;其导航栏分别位于底部、顶…...

数仓建模—指标拆解和选取

数仓建模—指标拆解和选取 第一节指标体系初识介绍了什么是指标体系 第二节指标体系分类分级和评价管理介绍了指标体系管理相关的,也就是指标体系的分级分类 这一节我们看一下指标体系的拆解和指标选取,这里我们先说指标选取,其实在整个企业的数字化建设过程中我们其实最…...

HTML静态网页成品作业(HTML+CSS)——VIVO介绍网页(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…...

MySQL(四) - SQL优化

一、SQL执行流程 MySQL是客户端-服务器的模式。一条SQL的执行流程如下&#xff1a; 在执行过程中&#xff0c;主要有三类角色&#xff1a;客户端、服务器、存储引擎。 大致可以分为三层&#xff1a; 第一层&#xff1a;客户端连接到服务器&#xff0c;构造SQL并发送给服务器…...

用 DataGridView 控件显示数据

使用DataGridView&#xff0c;可以很方便显示数据。 1.为解决方案添加数据集XSD&#xff0c;用作为项目数据源。 2.拖DataGridView控件到WinForms上。 3.在DataGridView控件的任务处&#xff0c;选择数据源。 4.选好数据源后&#xff0c;VS自动添加DataSet、BindingSourse和T…...

VisualSVN Server/TortoiseSVN更改端口号

文章目录 概述VisualSVN Server端更改端口号TortoiseSVN客户端更改远程仓库地址 概述 Subversion&#xff08;SVN&#xff09;是常用的版本管理系统之一。部署在服务器上的SVN Server端通常会在端口号80&#xff0c;或者端口号443上提供服务。其中80是HTTP访问方式的默认端口。…...

如何解决研发数据传输层面安全可控、可追溯的共性需求?

研发数据在企业内部跨网文件交换&#xff0c;是相对较为普遍而频繁的文件流转需求&#xff0c;基于国家法律法规要求及自身安全管理需要&#xff0c;许多企业进行内部网络隔离。不同企业隔离方案各不相同&#xff0c;比如银行内部将网络隔离为生产网、办公网、DMZ区&#xff0c…...

表 ,索引的 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不同&#xff0c; merge会创建一个新的提交&#xff0c;而rebase则是将一系列提交移动或合并到一个新的基础提交中。下面是详细解释&#xff1a; G…...

JavaScript 从入门到精通Object(对象)

文章目录 对象文本和属性方括号计算属性 属性值简写属性名称限制属性存在性测试&#xff0c;“in” 操作符“for…in” 循环像对象一样排序 总结✅任务你好&#xff0c;对象检查空对象对象属性求和将数值属性值都乘以 2 对象引用和复制通过引用来比较克隆与合并&#xff0c;Obj…...

Postgresql中json和jsonb类型区别

在我们的业务开发中&#xff0c;可能会因为特殊【历史&#xff0c;偷懒&#xff0c;防止表连接】经常会有JSON或者JSONArray类的数据存储到某列中&#xff0c;这个时候再PG数据库中有两种数据格式可以直接一对多或者一对一的映射对象。所以我们也可能会经常用到这类格式数据&am…...

太强了,使用 C# 开发的开源内网穿透工具

&#x1f3c6;作者&#xff1a;科技、互联网行业优质创作者 &#x1f3c6;专注领域&#xff1a;.Net技术、软件架构、人工智能、数字化转型、DeveloperSharp、微服务、工业互联网、智能制造 &#x1f3c6;欢迎关注我&#xff08;Net数字智慧化基地&#xff09;&#xff0c;里面…...

leetcode及牛客网二叉树相关题、单值二叉树、相同的树、二叉树的前序、中序、后序遍历、另一棵树的子树、二叉树的遍历、 对称二叉树等的介绍

文章目录 前言一、单值二叉树二、相同的树三、二叉树的前序遍历四、二叉树的中序遍历五、二叉树的后序遍历六、另一棵树的子树七、二叉树的遍历八、 对称二叉树总结 前言 leetcode及牛客网二叉树相关题、单值二叉树、相同的树、二叉树的前序、中序、后序遍历、另一棵树的子树、…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...