vue使用x6画流程图,简单使用

官网
https://x6.antv.antgroup.com/tutorial/getting-started

安装
npm install @antv/x6 --save

使用

<template><div>3333<div id="container" style="width: 800px;height: 800px;"></div></div>
</template>
<script>
import { Graph } from '@antv/x6'
export default {data() {return {}},computed: {},mounted() {const data = {nodes: [{id: 'node1',shape: 'rect',x: 40,y: 40,width: 100,height: 40,label: 'hello',attrs: {// body 是选择器名称,选中的是 rect 元素body: {stroke: '#8f8f8f',strokeWidth: 1,fill: '#fff',rx: 6,ry: 6,},},},{id: 'node2',shape: 'rect',x: 160,y: 180,width: 100,height: 40,label: 'world',attrs: {body: {stroke: '#8f8f8f',strokeWidth: 1,fill: '#fff',rx: 6,ry: 6,},},},],edges: [{shape: 'edge',source: 'node1',target: 'node2',label: 'x6',attrs: {// line 是选择器名称,选中的边的 path 元素line: {stroke: '#8f8f8f',strokeWidth: 1,},},},],}const graph = new Graph({container: document.getElementById('container'),width: 800,height: 600,background: {color: '#F2F7FA',},})graph.fromJSON(data) // 渲染元素graph.centerContent() // 居中显示},methods: {}
};
</script>
<style></style>

2、一个一个节点添加

<template><div style="margin: 10px;"><el-button size="mini"  @click="rowclick('/#/new/purchase/request?background=1','请购单')">请购单</el-button><el-button size="mini"  @click="rowclick('/#/new/purchase/purchaseplan?background=1','采购计划单')">采购计划单</el-button><el-button size="mini"  @click="rowclick('/#/new/purchase/order?background=1','采购订单')">采购订单</el-button><div id="container"></div></div>
</template><script>import { Graph } from '@antv/x6'export default {props:['win'],data() {return {};},mounted() {//画布const graph = new Graph({container: document.getElementById('container'),width: 800,height: 600,background: {color: '#F2F7FA',},})//节点1graph.addNode({id: 'node1',shape: 'rect',label: 'hello',x: 100,y: 40,width: 100,height: 40,attrs: {// body 是选择器名称,选中的是 rect 元素body: {stroke: '#8f8f8f',strokeWidth: 1,fill: '#fff',rx: 6,ry: 6,},},})//节点2graph.addNode({id: 'node2',shape: 'rect',label: 'hello',x: 100,y: 100,width: 100,height: 40,attrs: {// body 是选择器名称,选中的是 rect 元素body: {stroke: '#8f8f8f',strokeWidth: 1,fill: '#fff',rx: 6,ry: 6,},},})//节点1连接节点2graph.addEdge({shape: 'edge',source: 'node1',target: 'node2',attrs: {// line 是选择器名称,选中的边的 path 元素line: {stroke: '#8f8f8f',strokeWidth: 1,},},})graph.centerContent() // 居中显示},methods: {//点击rowclick(id, path, name){this.win(id,path,name);},}};</script>
</script><style>
</style>

在这里插入图片描述

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

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

相关文章

网络安全----防御----防火墙双机热备

实验要求&#xff1a; 1&#xff0c;对现有网络进行改造升级&#xff0c;将当个防火墙组网改成双机热备的组网形式&#xff0c;做负载分担模式&#xff0c;游客区和DMZ区走FW4&#xff0c;生产区和办公区的流量走FW1 2&#xff0c;办公区上网用户限制流量不超过100M&#xff0…

WPF/C#:实现导航功能

前言 在WPF中使用导航功能可以使用Frame控件&#xff0c;这是比较基础的一种方法。前几天分享了wpfui中NavigationView的基本用法&#xff0c;但是如果真正在项目中使用起来&#xff0c;基础的用法是无法满足的。今天通过wpfui中的mvvm例子来说明在wpfui中如何通过依赖注入与M…

第三篇 Vue项目目录结构介绍

1、最外层目录结构 passagerFrontPage ├── .vscode //vscode配置&#xff0c;不用理会 ├── node_modules //项目依赖&#xff0c;npm install命令执行后自动生成 ├── public //公共资源存放 ├── src //源码 ├── tests //选装&#xff1a;测试模块 ├── .git…

最新开源的PDF版面分析工具 PDF-Extract-Kit

最近有一个新开源的版面分析的模型&#xff0c;做PDF版面分析效果非常好。而且对公式的解析效果比较好。虽然现在star数量不高&#xff0c;但是绝对会涨起来的。我们调研对比过很多开源的工具&#xff0c;效果都强差人意&#xff0c;这个是我看到的最满意的一个。甚至要比我们生…

使用 XPath 定位 HTML 中的 img 标签

引言 随着互联网内容的日益丰富&#xff0c;网页数据的自动化处理变得愈发重要。图片作为网页中的重要组成部分&#xff0c;其获取和处理在许多应用场景中都显得至关重要。例如&#xff0c;在社交媒体分析、内容聚合平台、数据抓取工具等领域&#xff0c;图片的自动下载和处理…

Springboot 启动时Bean的创建与注入-面试热点-springboot源码解读-xunznux

Springboot 启动时Bean的创建与注入&#xff0c;以及对应的源码解读 文章目录 Springboot 启动时Bean的创建与注入&#xff0c;以及对应的源码解读构建Web项目流程图&#xff1a;堆栈信息&#xff1a;堆栈信息简介堆栈信息源码详解1、main:10, DemoApplication (com.xun.demo)2…

【开发踩坑】使用PageHelper工具正常sql后面多无关语句

背景 SQL日志打印出现了脏东西&#xff1a; 本来结束的 where muc.code ?;后面凭空多出了一个 LIMIT语句 ### Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your …

2024辽宁省数学建模B题【钢铁产品质量优化】原创论文分享

大家好呀&#xff0c;从发布赛题一直到现在&#xff0c;总算完成了2024 年辽宁省大学数学建模竞赛B题钢铁产品质量优化完整的成品论文。 本论文可以保证原创&#xff0c;保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半成品论文。 B题论文…

解决element-ui e-table表格中使用多选,当翻页时已选中的数据丢失

用element-ui中的table时&#xff0c;当有多选又有翻页功能时&#xff0c;点击翻页后之前选中的数据会丢失&#xff0c;怎么使表格具有记忆功能呢 element-ui API中有几个属性可以供我们完美解决这个问题 1.单元格的属性和方法&#xff1a; 2.表格的方法&#xff1a; <el-…

Linux部署Prometheus+Grafana

【Linux】PrometheusGrafana 一、Prometheus&#xff08;普罗米修斯&#xff09;1、Prometheus简述2、Prometheus特点3、Prometheus生态组件4、Prometheus工作原理 二、部署Prometheus1、系统架构2、部署Prometheus3、修改配置文件4、配置系统启动文件 三、部署 Node Exporter …

DevExpress WPF中文教程 - 为项目添加GridControl并将其绑定到数据

DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…

[开源]语雀+Vercel:打造免费个人博客网站

大家好,我是白露。 今天我想和大家分享我的今年的第一个开源项目 —— 基于语雀+Nextjs+Vercel实现免费的博客系统。 简单来说,你在语雀写博客,然后直接一键同步到个人网站上,网站自动部署! 而且,整个过程几乎不需要额外的成本,也不用充值语雀超级会员,hh。这个项目…

阿里云 申请免费ssl 证书

1控制台--数字证书管理服务 2 创建所需域名证书

PyTorch张量索引

文章目录 1、简介1.1、基本概念1.2、索引类型1.3、数据准备1.4、技术摘要⭐ 2、简单行、列索引3、列表索引4、范围索引5、布尔索引6、多维索引 &#x1f343;作者介绍&#xff1a;双非本科大三网络工程专业在读&#xff0c;阿里云专家博主&#xff0c;专注于Java领域学习&#…

Vue3 + uni-app 微信小程序:仿知乎日报详情页设计及实现

引言 在移动互联网时代&#xff0c;信息的获取变得越来越便捷&#xff0c;而知乎日报作为一款高质量内容聚合平台&#xff0c;深受广大用户喜爱。本文将详细介绍如何利用Vue 3框架结合微信小程序的特性&#xff0c;设计并实现一个功能完备、界面美观的知乎日报详情页。我们将从…

1. 个人谈心 ——【如何学习编程及合理安排休息时间】

&#x1f4d6; 声明 ! ! ! 此文章仅仅属于个人思想&#xff0c;如有不满或者意见不相同&#xff0c;可以在评论区讨论留言&#xff0c;非常感谢支持&#xff01;&#xff01;&#xff01; &#x1f495;个人主页&#xff1a;三亿老奶奶心中的梦 &#x1f4d8;收录专栏&#xff…

github上的工程如何下载子模块.gitmodules如何下载指定的模块download submodules开源项目子模块下载externals

github上的工程如何下载子模块.gitmodules如何下载指定的模块download submodules 说明(废话)解决方案无法执行下载子模块无法下载子项目 说明(废话) 今天在编译一个开源库时&#xff0c;该开源库依赖其他项目&#xff0c;并且项目还挺多的&#xff0c;所以有此解决方案 在编…

收银系统源码-商城下单,门店接单

随着新零售时代的不断进步&#xff0c;线下线上一体化的收银系统&#xff0c;被很多门店越来越重视。用户在线上商城下单后&#xff0c;门店如何接单呢&#xff0c;如何处理订单呢&#xff1f; 1.收银系统开发语言 核心开发语言: PHP、HTML5、Dart后台接口: PHP7.3后合管理网…

STM32全栈嵌入式人脸识别考勤系统:融合OpenCV、Qt和SQLite的解决方案

1. 项目概述 本项目旨在设计并实现一个基于STM32的全栈人脸识别考勤系统。该系统结合了嵌入式开发、计算机视觉和数据库技术&#xff0c;实现了自动人脸检测、识别和考勤记录功能。 主要特点: 使用STM32F4系列微控制器作为主控制器采用OpenCV进行人脸检测和识别Qt开发跨平台…

LVS+Nginx高可用集群---keepalived原理与实战

1.高可用集群架构keepalived双机主备原理 高可用&#xff1a;(HA) 部署nginx存在两台nginx。当主节点的nginx宕机停止服务的时候&#xff0c;nginx备用机起到跟nginx(主) keepalived的概念&#xff1a;解决单点故障&#xff1b;组件免费&#xff1b;可以实现高可用HA机制&…