vue 使用 AntV X6 绘制流程图

已于 2024-02-23 17:18:01 修改
阅读量3.4k 收藏 5
点赞数 2
文章标签： vue.js 流程图 javascript
于 2023-06-01 17:27:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46328739/article/details/130992694
版权

vue 使用 AntV X6 绘制流程图

在这里插入图片描述
在这里插入图片描述

安装及使用

  1. 通过 npm 命令 node16 X6。

    npm install @antv/x6 --save

  2. 在使用的页面用 import 进行引用。

    import { Graph } from ‘@antv/x6’;

  3. 在页面中创建一个用于容纳 X6 绘图的容器，可以是一个 div 标签。
<div id='container1' class='step-box' ref='stepBox'></div>
  1. X6 支持 JSON 格式数据，该对象中需要有节点 nodes 和边 edges 字段，分别用数组表示：
let nodeList = [
  {
    id: 'START', // String，可选，节点的唯一标识
     x: 40, // Number，必选，节点位置的 x 值
      y: 40, // Number，必选，节点位置的 y 值
      width: 150, // Number，可选，节点大小的 width 值
      height: 60, // Number，可选，节点大小的 height 值
      label: 'node1', // String，节点标签
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92' },// 边框颜色
      label: { text: 'node1', fill: '#6bcd92', fontSize: 24 }
    },
    data: { disableMove: false }//true为可拖拽，false不可拖拽
  },
  {
    id: 'node2',
    x: 280,
    y: 40,
    width: 150,
    height: 60,
    label: 'node2',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: { text: 'node2', fill: '#6bcd92', fontSize: 24, cursor: 'pointer' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node3',
    x: 520,
    y: 40,
    width: 150,
    height: 60,
    label: 'node3',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: { text: 'node3', fill: '#6bcd92', fontSize: 24, cursor: 'pointer' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node4',
    x: 520,
    y: 160,
    width: 150,
    height: 60,
    label: 'node4',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: { text: 'node4', fill: '#6bcd92', fontSize: 24, cursor: 'pointer' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node5',
    x: 760,
    y: 40,
    width: 150,
    height: 60,
    label: 'node5',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: { text: 'node5', fill: '#6bcd92', fontSize: 24, cursor: 'pointer' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node6',
    x: 1000,
    y: 40,
    width: 150,
    height: 60,
    label: 'node6',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: { text: 'node6', fill: '#6bcd92', fontSize: 24, cursor: 'pointer' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node7',
    x: 1000,
    y: 160,
    width: 150,
    height: 60,
    label: 'node7',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: { text: 'node7', fill: '#6bcd92', fontSize: 24, cursor: 'pointer' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node8',
    x: 1240,
    y: 40,
    width: 150,
    height: 60,
    label: 'node8',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: { text: 'node8', fill: '#6bcd92', fontSize: 24, cursor: 'pointer' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node9',
    x: 1480,
    y: 40,
    width: 150,
    height: 60,
    label: 'node7',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: { text: 'node7', fill: '#6bcd92', fontSize: 24, cursor: 'pointer' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node10',
    x: 1720,
    y: 40,
    width: 150,
    height: 60,
    label: 'node10',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: {
        text: 'node10',
        fill: '#6bcd92',
        fontSize: 24,
        cursor: 'pointer'
      }
    },
    data: { disableMove: false }
  },
  {
    id: 'node11',
    x: 1960,
    y: 40,
    width: 150,
    height: 60,
    label: 'node11',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#e7ba7a', cursor: '' },
      label: { text: 'node11', fill: '#e7ba7a', fontSize: 24, cursor: '' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node12',
    x: 2200,
    y: 40,
    width: 150,
    height: 60,
    label: 'node12',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#a6a6a6', cursor: '' },
      label: { text: 'node12', fill: '#a6a6a6', fontSize: 24, cursor: '' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node13',
    x: 2440,
    y: 40,
    width: 150,
    height: 60,
    label: 'node13',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#a6a6a6', cursor: '' },
      label: { text: 'node13', fill: '#a6a6a6', fontSize: 24, cursor: '' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node14',
    x: 2440,
    y: 160,
    width: 150,
    height: 60,
    label: 'node14',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#6bcd92', cursor: 'pointer' },
      label: {
        text: 'node14',
        fill: '#6bcd92',
        fontSize: 24,
        cursor: 'pointer'
      }
    },
    data: { disableMove: false }
  },
  {
    id: 'node15',
    x: 2680,
    y: 40,
    width: 150,
    height: 60,
    label: 'node15',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#a6a6a6', cursor: '' },
      label: { text: 'node15', fill: '#a6a6a6', fontSize: 24, cursor: '' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node16',
    x: 2920,
    y: 40,
    width: 150,
    height: 60,
    label: 'node16',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#a6a6a6', cursor: '' },
      label: { text: 'node16', fill: '#a6a6a6', fontSize: 24, cursor: '' }
    },
    data: { disableMove: false }
  },
  {
    id: 'node17',
    x: 3160,
    y: 40,
    width: 150,
    height: 60,
    label: 'node17',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#a6a6a6', cursor: '' },
      label: { text: 'node17', fill: '#a6a6a6', fontSize: 24, cursor: '' }
    },
    data: { disableMove: false }
  },
  {
    id: 'FINISH',
    x: 3400,
    y: 40,
    width: 150,
    height: 60,
    label: 'node18',
    attrs: {
      body: { rx: 12, ry: 12, stroke: '#a6a6a6' },
      label: { text: 'node18', fill: '#a6a6a6', fontSize: 24 }
    },
    data: { disableMove: false }
  }
]
let edgesList = [
  {
    source: 'START', // 起始节点 id
    target: 'node2', // 目标节点 id
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node2',
    target: 'node3',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node2',
    target: 'node4',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node3',
    target: 'node5',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node4',
    target: 'node6',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node5',
    target: 'node6',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node6',
    target: 'node8',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node6',
    target: 'node7',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node7',
    target: 'node14',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node8',
    target: 'node9',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node9',
    target: 'node10',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node10',
    target: 'node11',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node11',
    target: 'node12',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node12',
    target: 'node13',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node13',
    target: 'node15',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node14',
    target: 'node15',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node15',
    target: 'node16',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node16',
    target: 'node17',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  },
  {
    source: 'node17',
    target: 'FINISH',
    router: { name: 'manhattan' },
    connector: { name: 'rounded' },
    attrs: { line: { stroke: '#a6a6a6', targetMarker: 'classic' } }
  }
]
  1. 渲染画布
  • 创建一个 Graph 对象，并为其指定一个页面上的绘图容器，通常也会指定画布的大小
const graph = new Graph({
  container: document.getElementById('container1'),
  height: this.$refs.stepBox.clientHeight,
  panning: true, //是否支持拖拽平移
  resizing: true,
  interacting: function (cellView) {
    // 'nodeMovable' 节点是否可以被移动。
    if (
      cellView.cell.getData() != undefined &&
      !cellView.cell.getData().disableMove
    ) {
      return { nodeMovable: false }
    }
    return true
  }
})
// 通过当前浏览器缩放计算流程图的缩放值
if (window.devicePixelRatio <= 1) {
  graph.scale(1)
} else {
  graph.scale(document.documentElement.clientWidth / window.screen.width)
}
  • 使用刚刚创建的 graph 来渲染我们的节点和边
const data = {
  // 节点
  nodes: nodeList,
  // 边
  edges: edgesList
}
graph.fromJSON(data)
  1. 此时我们的流程图就全部渲染完成了
其他显示方式

如果流程节点想要展示一个title或者其他信息以这种方式展示，如图
在这里插入图片描述

  • 需要单个设置每个label块的字号及节点块背景
graph.addNode({
  shape: 'path',
  x: 200,
  y: 40,
  width: 150,
  height: 90,
  label: 'path',
  markup: [
              {
                tagName: 'rect',
                selector: 'body',
              },
              {
                tagName: 'rect',
                selector: 'name-rect',
              },
              {
                tagName: 'path',
                selector: 'attrs-rect',
              },
              // {
              //   tagName: 'rect',
              //   selector: 'border-rect',
              // },
              {
                tagName: 'text',
                selector: 'name-text',
              },
              {
                tagName: 'text',
                selector: 'attrs-text',
              }
            ],
            attrs: {
              body: {
                width: 150,
  height: 90,
                rx: 12,
                ry: 12,
                stroke: '#000',// 边框颜色
              },
              'name-text': {
                text: 'aa',
                fill: '#000',
                fontSize: 24,
               
                refY: 60,
              },
              'name-rect': {
                fill: '#000',
              },
              // 'border-rect': {
              //   width: 150,
              //   height:1,
              //   fill: 'none',
              //   stroke:'#b1b1b1',
              //   refY: 45,
              // },
              'attrs-rect': {
                d: 'M 12 0 L 138 0 L 149 7 L 149 35 L 0 35 L 0 7 Z',
               
                fill: '#b1b1b1',
                // refY: 0
              },
              'attrs-text': {
                text: '标题',
                fill: '#ffffff',
                fontSize: 22,
               
                refY: 20,
                // refX: 55,
              }
            },
})
皮卡丘-杰尼龟
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
AntV 开发 —— x6 图编辑引擎 v2
qq_16670995的博客
05-12 2746
前文再续 前序： v1笔记 碎碎念： 此文个人笔记，官网文档搬运 x6 版本：2.9.7 x6-vue-shape 版本：2.0.11 x6-plugin-selection 版本：2.1.7 vue 版本：2.6.11 vue-template-compiler 版本：2.6.11 Element-UI 版本：2.15.13 示例只展示单个节点的，多节点请下载demo自行查看源码 demo...
antv-流程图，一个简易的基于antv x6实现的流程图绘制
12-15
antv-流程图，一个简易的基于antv x6实现的流程图绘制
Vuex和antv/g6实现在线绘制分析流程图功能演示Demo
09-07
基于vue框架实现流程图绘制在项目中实际是一个复杂的应用，但是因为有很多算法都是和项目中业务相关不一定符合其他小伙伴的实际应用情况并且项目存在保密机制不方便全部分享出来，所以本Demo中仅抽取最基础的部分简单演示流程图创建、节点链接、节点删除、菜单操作、重新渲染、本地存储的交互。仅供有类似需求的小伙伴参考使用。如遇bug请自行思考修复，本博主懒，概不负责解决修复bug问题....
antV X6的简要使用教程
爱蹦跶的全栈大A阿
05-09 1752
在我们的日常开发工作中，我们经常需要构建复杂的交互式图表。这是一项挑战，因为我们需要处理大量的数据，同时还要保证图表的可读性和用户体验。幸运的是，有一些强大的工具可以帮助我们完成这项任务，antv x6就是其中之一。在这篇博客中，我将向你介绍如何使用antv x6构建交互式图表，并提供一些代码示例。​antv x6还允许我们创建自定义的节点。
Vue+Antv X6绘制流程图demo
07-05
在Vue项目中使用AntV X6组件库绘制流程图，需要实现以下需求： 需求1：左侧菜单中的模块可以拖拽进入画布中生成对应的流程图模块 需求2：流程图中的节点之间可以进行连线交互 需求3：点击对应的节点后可以进行操作节点（删除、查看节点的相关信息参数） 需求4：鼠标悬浮在连线上时可以删除当前连线 隐含需求：节点样式需要满足`UI`设计，所以需要自定义节点样式 一个满足以上需求的Vue+Antv X6的项目 具体效果如下： https://img-blog.csdnimg.cn/a24d2e30b5a0481297f83c5a75b78b4f.png#pic_center
VUE+antv/x6实现拖拽自定义流程图 X6FlowChart
qq_32396313的博客
12-24 7122
基于vue2.0与X6开发的流程图,开箱即用
Vue项目中使用AntV X6绘制流程图
热门推荐
BreenCL的博客
07-05 1万+
在Vue2.x项目中使用AntV X6组件库绘制流程图，需要实现以下需求： 需求1：左侧菜单中的模块可以拖拽进入画布中生成对应的流程图模块 需求2：流程图中的节点之间可以进行连线交互 需求3：点击对应的节点后可以进行操作节点（删除、查看节点的相关信息参数） 需求4：鼠标悬浮在连线上时可以删除当前连线 隐含需求：节点样式需要满足`UI`设计，所以需要自定义节点样式............
vue使用antv-x6 绘制流程图DAG图
贵林之恋的博客
11-01 1733
2.x 的写法： 注册vue组件节点。
antv x6 工艺路径 流程图 前端工厂工艺路径流程图绘制 源码 版本号： "@antv/x6": "^1.33.1",
10-11
本文将详细探讨AntV X6在工艺路径流程图绘制中的运用，以及如何利用Vue3框架进行实际操作。 首先，我们来看AntV X6的核心特性。它基于SVG和HTML，支持丰富的图形元素和交互设计，使得开发者能够轻松创建出高度定制...
vue3+antv x6+tsx 制作自定义流程图
09-23
在本文中，我们将深入探讨如何使用Vue3、AntV X6和TSX技术栈来创建一个自定义的流程图。这个项目旨在利用这些强大的工具，提供一个可扩展且用户友好的流程图编辑环境。 首先，Vue3是Vue.js框架的最新版本，它引入了...
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器源码
11-02
总之，这个流程图编辑器利用了Vue3、TypeScript、Element-Plus和AntV X6等前沿技术，构建出一个强大且易于使用的工具。Vue3提供了高效的组件化开发，TypeScript确保代码质量，Element-Plus助力快速构建UI，而AntV X6...
基于@antv/x6的流程图
qq_59315646的博客
05-24 796
基于 antv/x6 实现自定义流程图。实现的功能有：背景网格编辑、链接桩隐藏与显示、适应画布、小地图、放大、缩小、层级改变、复制、剪切、粘贴、全选、框选、撤销、重做、重置、删除、清空、数据保存、另存为图片以及一些快捷键设置。
推荐开源项目：AntV X6 Vue - 强大的Web图形引擎
gitblog_00088的博客
04-21 519
推荐开源项目：AntV X6 Vue - 强大的Web图形引擎 项目地址:https://gitcode.com/lloydzhou/antv-x6-vue 项目简介 AntV X6 是一个基于Vue.js的高性能、高度可定制化的Web图可视化框架，由阿里云AntV团队开发并维护。它提供了丰富的图形操作和交互能力，适用于构建各种复杂的流程图、网络拓扑图、思维导图等应用场景。 技术分析 强大的渲...
介绍几种antvX6常用的方法或配置（使用数据渲染节点和连线、图像居中完整展示、节点不可移出画布、节点图片和标签变化）
wzy_PROTEIN的博客
03-01 3975
接本专栏的上一篇antv X6新手教程，补充一些新的需求实现，丰富巩固antv X6的使用。此篇是以上一篇为基础的，如有初学者可以看本专栏的上一篇。将编辑好的拓扑图展示在其他页面、根据节点数据来改变节点的图片和标签等
使用 AntV X6 + vue 实现单线流程图
Big_YiFeng的博客
08-01 5253
X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
从业计算机毕业设计10年，打算用一年时间分享10年毕设经验！
07-23 502
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
Vue.js中自定义Markdown插件实现References解析
最新发布
浮游的博客
07-25 316
是一个快速、灵活的Markdown解析器，它支持CommonMark标准，并且可以通过插件来扩展其功能。在Vue.js项目中，我们可以使用来将Markdown文本转换为HTML。在某些情况下，我们可能需要在Markdown文本中包含自定义的HTML标签，例如标签，用于显示参考文献或其他额外信息。为了能够在中解析这些自定义标签，我们需要编写一个自定义插件。首先，我们需要定义插件应该执行的功能。在我们的例子中，插件需要识别标签，并将其转换为相应的HTML结构。我们使用正则表达式来匹配Markdown文本中的。
Python Formulas模型以JSON格式文件导出导入
Humbunklung的专栏
07-23 392
Python Formulas库，JSON格式导出导入。
vue2项目,使用antv x6绘制树形流程图示例
11-03
Vue是一种流行的JavaScript框架，Vue 2是其第二个版本。AntV X6是一个基于Vue 2的图表绘制库，可以用于绘制各种类型的图表，包括树形流程图。 要在Vue 2项目中使用AntV X6绘制树形流程图，首先需要安装和引入AntV X6库。可以通过npm或yarn进行安装： npm install @antv/x6 或者 yarn add @antv/x6 然后，可以在Vue的组件中使用AntV X6。首先，引入`Graph`和`Node`组件： import { Graph, Node } from '@antv/x6-vue' 接下来，在Vue的模板中添加一个`Graph`组件，并设置一些必要的属性： ``` <template> <div> <Graph :initConfig="graphConfig"> <Node :shape="nodeShape" :x="nodeX" :y="nodeY" :width="nodeWidth" :height="nodeHeight" /> </Graph> </div> </template> <script> export default { data() { return { graphConfig: { width: 800, height: 600, gridSize: 10, background: { color: '#f8f8f8' }, scroller: { enabled: true, pannable: true } }, nodeShape: 'rect', nodeX: 100, nodeY: 100, nodeWidth: 80, nodeHeight: 40 } } } </script> ``` 在上面的代码中，创建了一个Graph组件和一个Node组件。Graph组件定义了整个绘图区域的配置，例如大小、网格和背景颜色等。Node组件定义了一个矩形节点的形状、位置和尺寸。 通过设置Node组件的属性，可以绘制更多的节点，并使用适当的形状、位置和尺寸。 以上是一个简单的示例，展示了如何在Vue 2项目中使用AntV X6绘制树形流程图。通过修改组件属性，可以创建更复杂的图表，并通过AntV X6的其他功能来增强图表的交互性和可视化效果。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值