审批流AntV框架蚂蚁数据可视化X6饼图(附注释)

news2025/3/15 6:21:11

大家好,这次使用的是AntV的蚂蚁数据可视化X6框架,类似于审批流的场景等,代码如下:
X6框架参考网址:https://x6.antv.vision/zh/examples/showcase/practices#bpmn
可以进入该网址,直接复制下方代码进行调试或观察。
效果图如下:
在这里插入图片描述

<canvas id="container"></canvas>
import { Graph, Cell } from '@antv/x6'

const data = [
  {
    "id": "1",
    "shape": "event",
    "width": 40,
    "height": 40,
    "position": {
      "x": 50,
      "y": 180
    }
  },
  {
    "id": "2",
    "shape": "activity",
    "width": 100,
    "height": 60,
    "position": {
      "x": 20,
      "y": 280
    },
    "label": "请假申请"
  },
  {
    "id": "3",
    "shape": "bpmn-edge",
    "source": "1",
    "target": "2"
  },
  {
    "id": "4",
    "shape": "gateway",
    "width": 55,
    "height": 55,
    "position": {
      "x": 170,
      "y": 282.5
    }
  },
  {
    "id": "5",
    "shape": "bpmn-edge",
    "source": "2",
    "target": "4"
  },
  {
    "id": "6",
    "shape": "activity",
    "width": 100,
    "height": 60,
    "position": {
      "x": 300,
      "y": 240
    },
    "label": "领导审批"
  },
  {
    "id": "7",
    "shape": "activity",
    "width": 100,
    "height": 60,
    "position": {
      "x": 300,
      "y": 320
    },
    "label": "人事审批"
  },
  {
    "id": "8",
    "shape": "bpmn-edge",
    "source": "4",
    "target": "6"
  },
  {
    "id": "9",
    "shape": "bpmn-edge",
    "source": "4",
    "target": "7"
  },
  {
    "id": "10",
    "shape": "gateway",
    "width": 55,
    "height": 55,
    "position": {
      "x": 460,
      "y": 282.5
    }
  },
  {
    "id": "11",
    "shape": "bpmn-edge",
    "source": "6",
    "target": "10"
  },
  {
    "id": "12",
    "shape": "bpmn-edge",
    "source": "7",
    "target": "10"
  },
  {
    "id": "13",
    "shape": "activity",
    "width": 100,
    "height": 60,
    "position": {
      "x": 560,
      "y": 280
    },
    "label": "人事审批"
  },
  {
    "id": "14",
    "shape": "bpmn-edge",
    "source": "10",
    "target": "13"
  },
  {
    "id": "15",
    "shape": "event",
    "width": 40,
    "height": 40,
    "position": {
      "x": 710,
      "y": 290
    },
    "attrs": {
      "body": {
        "strokeWidth": 4
      }
    }
  },
  {
    "id": "16",
    "shape": "bpmn-edge",
    "source": "13",
    "target": "15"
  }
]
// 设置event类型节点的样式(起点和终点的样式)
Graph.registerNode(
  'event',
  {
    inherit: 'circle',
    attrs: {
      body: {
        strokeWidth: 2,
        stroke: '#5F95FF',
        fill: '#FFF',
      },
    },
  },
  true,
)
// 设置activity类型节点的样式
Graph.registerNode(
  'activity',
  {
    inherit: 'rect',
    markup: [
      {
        tagName: 'rect',
        selector: 'body',
      },
      {
        tagName: 'image',
        selector: 'img',
      },
      {
        tagName: 'text',
        selector: 'label',
      },
    ],
    attrs: {
      body: {
        rx: 6,
        ry: 6,
        stroke: '#5F95FF',
        fill: '#EFF4FF',
        strokeWidth: 1,
      },
      img: {
        x: 6,
        y: 6,
        width: 16,
        height: 16,
        'xlink:href':
          'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*pwLpRr7QPGwAAAAAAAAAAAAAARQnAQ',
      },
      label: {
        fontSize: 12,
        fill: '#262626',
      },
    },
  },
  true,
)
// 设置gateway类型节点的样式
Graph.registerNode(
  'gateway',
  {
    inherit: 'polygon',
    attrs: {
      body: {
        refPoints: '0,10 10,0 20,10 10,20',
        strokeWidth: 2,
        stroke: '#5F95FF',
        fill: '#EFF4FF',
      },
      label: {
        text: '+',
        fontSize: 40,
        fill: '#5F95FF',
      },
    },
  },
  true,
)
// 设置bpmn-edge类型线段的样式
Graph.registerEdge(
  'bpmn-edge',
  {
    inherit: 'edge',
    attrs: {
      line: {
        stroke: '#A2B1C3',
        strokeWidth: 2,
      },
    },
  },
  true,
)
// 设置展示canvas图表的容器
const graph = new Graph({
  container: document.getElementById('container')!,
  connecting: {
    router: 'orth',
  },
})

// 处理一下数据的格式,开始渲染图表
const cells = []
data.forEach((item: any) => {
  if (item.shape === 'bpmn-edge') {
    cells.push(graph.createEdge(item))
  } else {
    cells.push(graph.createNode(item))
  }
})
graph.resetCells(cells)
graph.zoomToFit({ padding: 10, maxScale: 1 })

最后,原创不易,如本文对您有所帮助,麻烦点个赞收藏谢谢!

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

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

相关文章

【SpringBoot】深入解析 Maven 的操作与配置

Maven 1.什么是Maven? Maven是一个项目管理工具&#xff0c;通过pom.xml文件的配置获取jar包&#xff0c;而不用手动去添加jar包&#xff1b; 2. 创建一个Maven项目 IDEA本身已经集成了Maven&#xff0c;我们可以直接使用&#xff0c;无需安装 以下截图的idea版本为&#xff…

搭建一个简单的node服务,模拟后端接口

目录 一、查看是否安装了node和npm 二、创建一个文件夹&#xff0c;用于放你的node服务代码 三、初始化一个package.json 四、安装 Express&#xff08;快速搭建服务的框架&#xff09; 五、创建serve.js 六、运行服务即可 七、测试接口 法一&#xff1a;使用 curl 法…

【落羽的落羽 C++】C++入门基础:引用,内联,nullptr

文章目录 一、引用1. 引用的概念2. 引用的特点3. 引用的使用4. const引用5. 引用和指针 二、inline内联三、nullptr 一、引用 1. 引用的概念 引用是C中的一个较为重要的概念。它是给已存在变量取的“别名”&#xff0c;编译器不会为引用变量开辟内存空间&#xff0c;它和它引…

Python的那些事第四十一篇:简化数据库交互的利器Django ORM

Django ORM:简化数据库交互的利器 摘要 随着互联网技术的飞速发展,Web开发越来越受到重视。Django作为一款流行的Python Web框架,以其高效、安全、可扩展等特点受到了广大开发者的喜爱。其中,Django ORM(对象关系映射)是Django框架的核心组件之一,它为开发者提供了一种…

通过多线程同时获取H264和H265码流

目录 一.RV1126 VI采集摄像头数据并同时编码H264、H265的大概流程​编辑​编辑 1.1初始化VI模块&#xff1a; 1.2H264、H265的VENC模块初始化&#xff1a; 1.3VI分别绑定H264的VENC层和H265的VENC层&#xff1a; ​​​​​​​1.4开启H264线程采集H264的VENC数据&#xff…

DeepSeek V3 源码:从入门到放弃!

从入门到放弃 花了几天时间&#xff0c;看懂了DeepSeek V3 源码的逻辑。源码的逻辑是不难的&#xff0c;但为什么模型结构需要这样设计&#xff0c;为什么参数需要这样设置呢&#xff1f;知其然&#xff0c;但不知其所以然。除了模型结构以外&#xff0c;模型的训练数据、训练…

海量数据融合互通丨TiDB 在安徽省住房公积金监管服务平台的应用实践

导读 安徽省住房公积金监管服务平台通过整合全省 17 家公积金中心的数据&#xff0c;致力于实现数据共享、规范化管理与高效数据分析。为了应对海量数据处理需求&#xff0c;安徽省选择 TiDB 作为底层数据库&#xff0c;利用其分布式架构和 HTAP 能力&#xff0c;实现了快速的…

Linux12-UDP\TCP

一、UDP 1.特点: 尽最大努力交付,存在丢包的可能 无连接 面向数据报 机制简单,传输效率高 2.应用场景: 1.画面传输 VNC 直播:要求实时性高、允许数据丢失、 二、TCP 1.特点: 面向数据流(流式套接字) 建立连接 安全可靠的传输协议 三次握手:TCP建立连接时,…

【HeadFirst系列之HeadFirst设计模式】第14天之与设计模式相处:真实世界中的设计模式

与设计模式相处&#xff1a;真实世界中的设计模式 设计模式是软件开发中的经典解决方案&#xff0c;它们帮助我们解决常见的设计问题&#xff0c;并提高代码的可维护性和可扩展性。在《Head First设计模式》一书中&#xff0c;作者通过生动的案例和通俗的语言&#xff0c;深入…

自由学习记录(42)

可能会出现到后面没有教程可以看&#xff0c;走不动&#xff0c;&#xff0c;但还是尝试吧 过程远比想象的要多 那连Live2d的这些脚本怎么控制的都要了解一下 ------------ 文件类型和扩展名 | 编辑手册 | Live2D Manuals & Tutorials 全部导入之后 在这下载SDK Live2D…

excel vlookup的精确查询、模糊查询、反向查询、多列查询

目录 入门 精确查询 模糊查询 反向查询 (搭配 if 函数) 多列查询 (搭配 match 函数) 入门 精确查询 需求: 查找 学生编号是008 所在的班级 操作: 在I2单元格输入公式如下,VLOOKUP(H2,B1:E12,4,FALSE), 得出结果 看一下vlookup 公式每一个参数应该怎么写? 语法: vlookup…

安装remixd,在VScode创建hardhat

在终端&#xff0c;以管理员身份&#xff0c;cmd 需要科学上网 npm install -g remix-project/remixd 在vscode插件中&#xff0c;安装solidity插件&#xff0c;是暗灰色那款 1.将nodeJs的版本升级至18以上 2.在vscode打开一个新的文件&#xff0c;在终端输入 npx hardhat 3.…

【Python爬虫】利用代理IP爬取跨境电商AI选品分析

引言 随着DeepSeek的流行&#xff0c;越来越多的用户开始尝试将AI工具融入到日常工作当中&#xff0c;借助AI的强大功能提高工作效率。最近又掀起了一波企业出海的小高潮&#xff0c;那么如果是做跨境电商业务&#xff0c;怎么将AI融入工作流中呢&#xff1f;在做跨境电商的时候…

捣鼓180天,我写了一个相册小程序

&#x1f64b;为什么要做土著相册这样一个产品&#xff1f; ➡️在高压工作之余&#xff0c;我喜欢浏览B站上的熊猫幼崽视频来放松心情。有天在家族群里看到了大嫂分享的侄女卖萌照片&#xff0c;同样感到非常解压。于是开始翻阅过去的聊天记录&#xff0c;却发现部分图片和视…

洛谷 P1480 A/B Problem(高精度详解)c++

题目链接&#xff1a;P1480 A/B Problem - 洛谷 1.题目分析 1&#xff1a;说明这里是高精度除以低精度的形式&#xff0c;为什么不是高精度除以高精度的形式&#xff0c;是因为它很少见&#xff0c;它的模拟方式是用高精度减法来做的&#xff0c;并不能用小学列竖式的方法模拟…

图像滑块对比功能的开发记录

背景介绍 最近&#xff0c;公司需要开发一款在线图像压缩工具&#xff0c;其中的一个关键功能是让用户直观地比较压缩前后的图像效果。因此&#xff0c;我们设计了一个对比组件&#xff0c;它允许用户通过拖动滑块&#xff0c;动态调整两张图像的显示区域&#xff0c;从而清晰…

基于Arcgis的python脚本实现相邻矢量面的高度字段取平均值

文章目录 背景效果实现逻辑步骤1、准备数据2、python脚本3、执行通过脚本工具箱来执行背景 在地理信息系统(GIS)数据处理或三维建模等实际应用场景中,我们常常会遇到需要对矢量面数据进行精细化处理的需求。其中一个常见的任务便是对相邻的矢量面中的高度字段开展特定操作。…

Golang的网络流量控制

# Golang的网络流量控制 什么是网络流量控制&#xff1f; 网络流量控制是指针对网络数据传输过程中的流量进行管理和调控的一种技术手段。通过网络流量控制&#xff0c;我们可以对网络中的数据传输速率、带宽使用情况、数据包丢失率等进行监控和调整&#xff0c;以达到优化网络…

Python教程(一):基本语法、流程控制、数据容器

Python&#xff08;一&#xff09; 文章目录 Python&#xff08;一&#xff09;一、基础语法二、数据类型2.1 字符串2.2 空值2.3 类型转换&运算符 三、流程控制3.1 条件判断3.2 循环3.2.1 while循环3.2.2 for循环 四、数据结构4.1 字符串str4.1.1 字符串的格式化输出4.1.1.…

【AI深度学习基础】PyTorch初探

引言 PyTorch 是由 Facebook 开源的深度学习框架&#xff0c;专门针对 GPU 加速的深度神经网络编程&#xff0c;它的核心概念包括张量&#xff08;Tensor&#xff09;、计算图和自动求导机制。PyTorch作为Facebook开源的深度学习框架&#xff0c;凭借其动态计算图和直观的API设…