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

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

news 来源：原创 2025/8/25 16:44:37

大家好，这次使用的是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 })

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

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

大家好，这次使用的是AntV的蚂蚁数据可视化X6框架，类似于审批流的场景等，代码如下： X6框架参考网址：https://x6.antv.vision/zh/examples/showcase/practices#bpmn 可以进入该网址，直接复制下方代码进行调试…...

编程日记 2025/8/25 16:44:37

git 添加额外的远程仓库 URL

要使用 git branch -a 查看 net-next 远程仓库中的所有分支，请按照以下步骤操作： 步骤 1: 确保已添加 net-next 远程仓库如果尚未添加 net-next 远程仓库，请运行以下命令： git remote add net-next git://git.kernel.org/pub/s…...

编程日记 2025/8/23 5:21:07

Qt中实现多个QMainWindow同时显示

在Qt中实现多个QMainWindow同时显示，可通过以下方法实现： 一、直接显示多个实例必须使用new创建堆对象，避免栈对象因作用域结束被销毁‌。 int main(int argc, char *argv[]) {QApplication a(argc, argv);// 创建两个独立的主窗口QMainW…...

编程日记 2025/8/23 2:14:47

在ArcMap中通过Python编写自定义工具（Python Toolbox）实现点转线工具

文章目录一、需求二、实现过程2.1、创建Python工具箱（.pyt）2.2、使用catalog测试代码2.3、在ArcMap中使用工具三、测试一、需求通过插件的形式将点转线功能嵌入ArcMap界面，如何从零开始创建一个插件，包括按钮的添加、工具的实…...

编程日记 2025/8/20 14:09:14

关于AI数据分析可行性的初步评估

一、结论：可在部分环节嵌入，无法直接处理大量数据 1.非本地部署的AI应用处理非机密文件没问题，内部文件要注意数据安全风险。 2.AI（指高规格大模型）十分适合探索性研究分析，对复杂报告无法全流程执行&…...

编程日记 2025/8/22 7:35:03

cdn取消接口缓存

添加cdn后，使用cdn加速域名访问接口是缓存，不是最新的数据，如果使用局域网则是最新的数据，如果修改配置，确保使用cdn域名请求的接口返回不是缓存要确保通过CDN加速域名访问接口时返回的是最新的数据，而不…...

编程日记 2025/8/23 4:46:18

Android 屏幕适配 Tips

概念屏幕尺寸：屏幕的对角线的长度屏幕分辨率：屏幕分辨率是指在横纵向上的像素点数，单位是px，1px1个像素点。一般以纵向像素x横向像素，如1960x1080屏幕像素密度：每英寸上的像素点数，单位是dpi …...

编程日记 2025/8/21 11:27:57

【Academy】HTTP Host 标头攻击 ------ HTTP Host header attacks

HTTP Host 标头攻击 ------ HTTP Host header attacks 1. 什么是 HTTP Host 标头？2. 什么是 HTTP Host 标头攻击？3. HTTP Host 标头漏洞是如何产生的？4. 如何测试 HTTP Host 标头漏洞4.1 提供任意 Host 标头4.2 检查有缺陷的验证4.3 发送不明…...

编程日记 2025/8/24 6:53:47

大模型架构记录2

一应用场景 1.1 prompt 示例 1.2 自己搭建一个UI界面，调用接口可以选用不同的模型，需要对应的API KEY 二 Agent 使用 2.1 构建GPT...

编程日记 2025/8/16 11:42:06

在Windows 11的WSL中安装Kali Linux

Kali Linux 是网络安全从业者和爱好者的首选工具集，但直接在物理机或虚拟机上运行可能占用较多资源。借助 Windows Subsystem for Linux (WSL)，我们可以在Windows 11中原生运行Kali Linux，轻量且高效。本教程将手把手教你如何在WSL2中安装并配…...

编程日记 2025/8/24 20:36:06

QT编程环境 QT在Windows操作系统下的三种编程环境搭建。方案编程环境编译器调试器1Qt CreatorMinGW GCCGDB2Qt CreatorMicrosoft Visual C CompilerDebugging Tools for Widows3Microsoft Visual Studio VS自带VS自带方案提及的QT安装程序及压缩包均能在官网Index of /off…...

编程日记 2025/8/23 12:45:41

一篇文章讲解清楚ARM9芯片启动流程

SAM9X60 ARM9 boot启动流程关键词介绍： 第一级bootloader - 也叫boot ROM，是集成在MPU内部的ROM里面它的主要功能是执行对MPU的基本初始化和配置，查找并将第二级bootloader从外部NVM中读取出来并放到MPU内部的SRAM. 可以让MPU强制停留在第一…...

编程日记 2025/8/19 9:04:37

DeepSeek未来发展趋势：开创智能时代的新风口

DeepSeek未来发展趋势：开创智能时代的新风口随着人工智能（AI）、深度学习（DL）和大数据的飞速发展，众多创新型技术已经逐渐走向成熟，而DeepSeek作为这一领域的新兴力量，正逐步吸引越…...

编程日记 2025/8/21 8:39:39

Spring Boot与Axon Framework整合教程

精心整理了最新的面试资料和简历模板，有需要的可以自行获取点击前往百度网盘获取点击前往夸克网盘获取简介 Axon Framework是一个用于构建CQRS（命令查询职责分离）和事件溯源（Event Sourcing）应用的框架&#xff0…...

编程日记 2025/8/25 16:44:08

从技术角度看大语言模型进化技术路线与落地应用详解：未来的最佳实践方向是什么？

文章大纲 **一、模型架构创新：从Transformer到下一代架构****二、训练与优化技术：从暴力Scaling到精细调控****三、数据与知识工程：从粗放喂养到智能增强****四、应用层进化：从通用能力到垂直场景突破****五、伦理与可持续性技术**未来技术路线图参考文献**一、大模型架构创…...

编程日记 2025/8/20 23:27:43

LSM-Tree (日志结构合并树)

LSM-Tree（日志结构合并树）是一种高效处理写操作的存储结构，广泛应用于NoSQL数据库如LevelDB和RocksDB。其核心思想是将随机写入转换为顺序写入，提升吞吐量。以下是其原理及Java实现示例： ### **LSM-Tree 原理** 1. **…...

编程日记 2025/8/16 11:46:35

自动驾驶---不依赖地图的大模型轨迹预测

1 前言早期传统自动驾驶方案通常依赖高精地图（HD Map）提供道路结构、车道线、交通规则等信息，可参考博客《自动驾驶---方案从有图迈进无图》，本质上还是存在问题：数据依赖性高：地图构建成本昂贵，且跨区域泛化能力受限。动态场景局限性：地图无法实时反映临时障碍物或施…...

编程日记 2025/8/21 10:25:56

记录一次mysql全文索引不生效

先是创建全文索引： alter table sms_img_library add fulltext index sms_img_library_title_idx(title) 但是执行下面sql，没有数据出来 select * from sms_img_library where match (title) against(壮丽);排查了最小分词，设置为2 SHOW…...

编程日记 2025/8/21 5:43:47

蓝桥杯题型

蓝桥杯蓝桥杯题型分类语法基础艺术与篮球（日期问题）时间显示（时间问题）跑步计划（日期问题）偶串(字符）最长子序列（字符）字母数（进制转换）6个0&…...

编程日记 2025/8/23 13:11:59

用Python分割并高效处理PDF大文件

在处理大型PDF文件时，将它们分解成更小、更易于管理的块通常是有益的。这个过程称为分区，它可以提高处理效率，并使分析或操作文档变得更容易。在本文中，我们将讨论如何使用Python和为Unstructured.io库将PDF文件划分为更小的部分。…...

编程日记 2025/8/24 2:11:11

DeepSeek×博云AIOS：突破算力桎梏，开启AI普惠新纪元

背景在全球人工智能技术高速迭代的背景下，算力成本高企、异构资源适配复杂、模型部署效率低下等问题，始终是制约企业AI规模化应用的关键。 DeepSeek以创新技术直击产业痛点，而博云先进算力管理平台AIOS的全面适配，则为这一技术…...

编程日记 2025/8/25 16:44:36

顶点着色器和片段着色器

在Unity渲染中，**顶点着色器（Vertex Shader）和片段着色器（Fragment Shader）**是图形渲染管线中的两个核心阶段。我们可以通过一个比喻来理解它们的分工：想象你要画一幅由三角形组成的3D模型，顶点…...

编程日记 2025/8/16 11:31:39

Uniapp打包H5端弱网络环境下存在页面UI渲染错乱问题方案实现

一.需求 uniapp打包的H5项目，首页模块的业务逻辑偏多，调用的接口数量庞大，在弱网络的情况下切换了页面或者网络较好但是页面的UI未渲染完成的情况下快速地切换了页面会出现UI渲染错乱的问题，针对该问题个人从两个方面来进行处理&…...

编程日记 2025/8/25 4:50:28

Dify+DeepSeek | Excel数据一键可视化（创建步骤案例）（echarts助手.yml）（文档表格转图表、根据表格绘制图表、Excel绘制图表）

Dify部署参考：Dify Rag部署并集成在线Deepseek教程（Windows、部署Rag、安装Ragan安装、安装Dify安装、安装ollama安装） DifyDeepSeek - Excel数据一键可视化（创建步骤案例）-DSL工程文件（可直接导入&#x…...

编程日记 2025/8/24 23:22:01

## DeepSeek写水果记忆配对手机小游戏

DeepSeek写水果记忆配对手机小游戏提问根据提的要求，让DeepSeek整理的需求，进行提问，内容如下： 请生成一个包含以下功能的可运行移动端水果记忆配对小游戏H5文件： 要求可以重新开始游戏可以暂停游戏卡片里的水果…...

编程日记 2025/8/22 5:21:30

Windows系统编程（八）线程同步

线程安全问题每个线程都有自己独立的堆栈，局部变量是存储在栈中的，这就意味着每个线程都会有一份自己的局部变量，当线程仅仅访问自己的局部变量时就不存在线程安全问题。但是全局变量是存储在全局区的，多线程共享全局变量&#…...

编程日记 2025/8/19 4:19:37

create_react_agent 函数，根据创建的 chat 模型实例和工具列表 tools 构造一个“反应式代理”（react agent）

graph create_react_agent(chat, tools)1. create_react_agent 函数的作用 create_react_agent 是一个工厂函数，它接收两个参数： chat 模型实例（这里是 ChatOpenAI 的对象）：它负责生成语言模型的回复，也…...

编程日记 2025/8/17 14:45:14

Unity ECS与MonoBehaviour混合架构开发实践指南

一、混合架构设计背景 1. 技术定位差异 ECS（Entity Component System）：面向数据设计（DOD），适用于大规模实体计算（如10万单位战斗） MonoBehaviour：面向对象设计&#x…...

编程日记 2025/8/22 8:18:29

在Linux中开发OpenGL——检查开发环境对OpenGL ES的支持

由于移动端GPU规模有限，厂商并没有实现完整的OpenGL特性，而是实现了它的子集——OpenGL ES。因此如果需要开发的程序要支持移动端平台，最好使用OpenGL ES开发。 1、下载支持库、OpenGL ES Demo 1.1、下载PowerVRSDK支持库作为准备&#xff…...

编程日记 2025/8/21 17:21:03

「DataX」数据迁移-IDEA运行DataX方法总结

背景业务需求希望把Oracle数据库中的数据，迁移至MySql数据库中，因为需要迁移全量和增量的数据，所以希望想用数据迁移工具进行操作。经过一些调研查询，最终打算使用DataX进行数据的迁移。 DataX简单介绍 DataX 是阿里云 DataW…...

编程日记 2025/8/21 5:28:21

python从入门到精通（二十六）：python文件操作之Word全攻略（基于python-docx）

python文件操作之word技巧大全 word技巧基础到高级操作大全A.准备工作1. 安装python-docx库2. 导入库 B.基础操作1. 创建Word文档1.1 创建文档对象1.2 添加word标题1.3 添加word段落1.4 设置段落样式1.5 创建有序列表1.6 创建无序列表1.7添加word分页1.8 添加word图片1.9 添加w…...

编程日记 2025/8/23 14:53:53

STM32 ST-LINK Utility 切换 NRST_MODE 后下载失败问题

在使用 STM32 ST-LINK Utility 烧录时，有需要改变芯片选择复位的时候需要修改 Option Bytes 中的 NRST_MODE 选项，可能会遇见 “Programming error 0x8000200!” 的错误，后面不管是取消读写加密还是复位都不能下载，包括再用 keil …...

编程日记 2025/8/22 23:59:04

【算法】010、合并两个有序链表

【算法】010、合并两个有序链表文章目录一、合并两个有序链表1.1 思路1.2 多语言解法一、合并两个有序链表 1.1 思路 // go package mainimport ("fmt""strconv" )type ListNode struct {Val intNext *ListNode }func (n *ListNode) String() (ans s…...

编程日记 2025/8/24 20:04:52

FreeRTOS任务状态查询

一.任务相关API vTaskList（），创建一个表格描述每个任务的详细信息 char biaoge[1000]; //定义一个缓存 vTaskList(biaoge); //将表格存到这缓存中 printf("%s /r/n",biaoge); 1.uxTaskPriorityGet（&#xf…...

编程日记 2025/8/25 6:44:22

Django小白级开发入门

1、Django概述 Django是一个开放源代码的Web应用框架，由Python写成。采用了MTV的框架模式，即模型M，视图V和模版T。 Django 框架的核心组件有： 用于创建模型的对象关系映射为最终用户设计较好的管理界面URL 设计设计者友好的模板…...

编程日记 2025/8/22 12:09:43

R语言的基础命令及实例操作

> T & F [1] FALSE > T & T [1] TRUE > T | F [1] TRUE > F | F [1] FALSE > a <- c(T,F,T) > b <- c(F,F,T) > a & b [1] FALSE FALSE TRUE > a | b [1] TRUE FALSE TRUE 在 R 中，大小写是敏感的，也就是说…...

编程日记 2025/8/23 7:28:56

通用信息抽取大模型PP-UIE开源发布，强化零样本学习与长文本抽取能力，全面适配多场景任务

背景与简介信息抽取（information extraction）是指，从非结构化或半结构化数据（如自然语言文本）中自动识别、提取并组织出结构化信息。通常包含多个子任务，例如：命名实体识别（NER&am…...

编程日记 2025/8/23 1:27:47

【玩转正则表达式】将正则表达式中的分组（group）与替换进行结合使用

在文本处理和数据分析领域，正则表达式（Regular Expressions，简称regex）是一种功能强大的工具。它不仅能够帮助我们匹配和搜索字符串中的特定模式，还能通过分组（Grouping）和替换（Subs…...

编程日记 2025/8/20 2:34:45

Kotlin和Java区别

哈哈哈，前段时间，面试的时候，突然问到我Kotlin和Java的区别，一下子把我问懵逼了，确实没遇到问这个的，想了下，说了下Kotlin的编译时空检查机制，代码更简洁，很多封装好的AP…...

编程日记 2025/8/16 13:04:59

大语言模型进化论：从达尔文到AI的启示与展望

文章大纲引言大语言模型中的“进化论”思想体现遗传变异过度繁殖和生存斗争大模型“过度繁殖”与“生存竞争”机制解析**一、过度繁殖：技术迭代的指数级爆发****二、生存竞争：计算资源的达尔文战场****三、生存竞争胜出关键要素****四、行业竞争格局演化趋势**核心结论自然选…...

编程日记 2025/8/16 12:39:17

Django系列教程（5）——Django模型详解

目录模型定义小案例模型的组成模型的字段基础字段关系字段 on_delete删除选项 related_name选项模型的META选项模型的方法标准方法示例一：自定义方法示例二：自定义Manager方法完美的高级Django模型示例小结 Model (模型) 简而…...

编程日记 2025/8/24 17:23:53

2008-2024年中国手机基站数据/中国移动通信基站数据

2008-2024年中国手机基站数据/中国移动通信基站数据 1、时间：2008-2024年 2、来源：OpenCelliD 3、指标：网络类型、网络代数、移动国家/地区、移动网络代码、区域代码、小区标识、单元标识、坐标经度、坐标纬度、覆盖范围、测量样本数、坐标…...

编程日记 2025/8/24 18:11:44

Java在word中动态增加表格行并写入数据

SpringBoot项目中在word中动态增加表格行并写入数据，不废话，直接上配置和代码：模板内容如下图所示：模板是一个空word表格即可，模板放在resources下的自定义目录下，如下图示例。实体类定义如下： @Data @AllArgsConstructor @NoArgsConstructor public class Person …...

编程日记 2025/8/21 23:41:17

记录小白使用 Cursor 开发第一个微信小程序（二）：创建项目、编译、预览、发布（250308）

文章目录记录小白使用 Cursor 开发第一个微信小程序（二）：创建项目、编译、预览、发布（250308）一、创建项目1.1 生成提示词1.2 生成代码二、编译预览2.1 导入项目2.2 编译预览三、发布3.1 在微信开发者工具进行上传3…...

编程日记 2025/8/18 5:19:52

JavaScript基础-比较运算符

在JavaScript编程中，比较运算符用于比较两个值，并返回一个布尔值（true或false），这对于我们进行条件判断和逻辑控制至关重要。掌握这些运算符不仅有助于编写高效的代码，也是处理复杂逻辑的基础。本文将详细介…...

编程日记 2025/8/25 6:41:42

2025 docker安装TiDB数据库

1.确保安装了docker和docker-compose sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-composesudo chmod x /usr/local/bin/docker-compose2.编写 Docker Compose 文…...

编程日记 2025/8/22 2:09:38

【大学生体质】智能 AI 旅游推荐平台(Vue+SpringBoot3)-完整部署教程

智能 AI 旅游推荐平台开源文档项目前端地址 ☀️项目介绍智能 AI 旅游推荐平台（Intelligent AI Travel Recommendation Platform）是一个利用 AI 模型和数据分析为用户提供个性化旅游路线推荐、景点评分、旅游攻略分享等功能的综合性系统。该系统融合…...

编程日记 2025/8/21 15:20:22

【定制开发】碰一碰发视频系统定制开发，支持OEM

在短视频营销爆发的2025年，"碰一碰发视频"技术已成为实体商家引流标配。某连锁餐饮品牌通过定制化开发，单月视频发布量突破10万条，获客成本降低80%！本文将深入解析该系统的技术架构与开发要点，助你快速搭建高…...

编程日记 2025/8/21 15:41:23

模型的原始输出为什么叫 logits

模型的原始输出为什么叫 logits flyfish 一、Logarithm（对数 log） 定义：对数是指数运算的逆运算，表示某个数在某个底数下的指数。公式：若 b x a b^x a bxa，则 log ⁡ b ( a ) x \log_b(a) x logb…...

编程日记 2025/8/23 7:58:18

YOLOv8改进SPFF-LSKA大核可分离核注意力机制

YOLOv8改进------------SPFF-LSKA 1、LSAK.py代码2、添加YAML文件yolov8_SPPF_LSKA.yaml3、添加SPPF_LSKA代码4、ultralytics/nn/modules/__init__.py注册模块5、ultralytics/nn/tasks.py注册模块6、导入yaml文件训练 1、LSAK.py代码论文代码 LSKA.py添加到ultralytics/nn/…...

编程日记 2025/8/22 4:07:40

相关文章：