mxGraph使用(vue)

最新推荐文章于 2025-06-06 09:05:38 发布
最新推荐文章于 2025-06-06 09:05:38 发布
阅读量2.1k 收藏 8
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 工具 问题解决 vue 文章标签： vue css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/helenjuan/article/details/121553111
本文介绍了如何在Vue项目中使用mxGraph库来渲染流程图。通过npm安装mxGraph后，创建mxGraph.js文件，根据数据动态绘制流程图，并详细讨论了阶段划分线的定位计算、流程图销毁及鼠标交互功能的实现。文章提供了最终效果图和关键代码注释。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

mxGraph使用(vue)

  1. 安装
    npm install mxgraph --save
  2. 新建mxGraph.js
    import mx from 'mxgraph'
const mxgraph = mx({
     
     
  mxImageBasePath: './src/images',
  mxBasePath: './src'
})
window.mxGraph = mxgraph.mxGraph
window.mxGraphModel = mxgraph.mxGraphModel
window.mxEditor = mxgraph.mxEditor
window.mxGeometry = mxgraph.mxGeometry
window.mxDefaultKeyHandler = mxgraph.mxDefaultKeyHandler
window.mxDefaultPopupMenu = mxgraph.mxDefaultPopupMenu
window.mxStylesheet = mxgraph.mxStylesheet
window.mxDefaultToolbar = mxgraph.mxDefaultToolbar
window.mxToolbar = mxgraph.mxToolbar
window.mxCell = mxgraph.mxCell
window.mxCodec = mxgraph.mxCodec
window.mxEvent = mxgraph.mxEvent
window.mxUtils = mxgraph.mxUtils
window.mxConstants = mxgraph.mxConstants

export default mxgraph

3. 页面引入, 定义元素,可以使用id,也可以使用ref
```html
<div id="graph_container" class="svg-container" style="width: 100%; height: 100%;padding: 10px;"></div>
  1. 根据数据渲染流程图 (数据定义)
graphData: [
        {
   
   
            "name": "年度审计计划",
            "state": 3,
            "userName": null,
            "time": null,
            "target": [
                {
   
   
                    "solidLine": 1,
                    "targetIndex": 1
                }
            ]
        },
        {
   
   
            "name": "项目开始",
            "state": 3,
            "userName": null,
            "time": null,
            "target": [
                {
   
   
                    "solidLine": 1,
                    "targetIndex": 2
                }
            ]
        },
        {
   
   
            "name": "项目审前符合性调查",
            "state": 3,
            "userName": "zbb",
            "time": null,
            "target": [
                {
   
   
                    "solidLine": 0,
                    "targetIndex": 3
                },
                {
   
   
                    "solidLine": 1,
                    "targetIndex": 4
                }
            ]
        },
        {
   
   
            "name": "协审招选结果",
            "state": 0,
            "userName": null,
            "time": null,
            "target": [
                {
   
   
                    "solidLine": 1,
                    "targetIndex": 4
                }
            ]
        },
        {
   
   
            "name": "组成审计组",
            "state": 0,
            "userName": null,
            "time": null,
            "target": [
                {
   
   
                    "solidLine": 1,
                    "targetIndex": 5
                }
            ]
        },
        {
   
   
            "name": "代拟审计通知书",
            "state": 3,
            "userName": "cqj",
            "time": "2021-11-05 17:46:13",
            "target": [
                {
   
   
                    "solidLine": 1,
                    "targetIndex": 6
                }
            ]
        },
        {
   
   
            "name": "调查了解情况",
            "state": 0,
            "userName": null,
            "time": null,
            "target": [
                {
   
   
                    "solidLine": 0,
                    "targetIndex": 7
                },
                {
   
   
                    "solidLine": 1,
                    "targetIndex": 8
                }
            ],
            divider: 1
        },
        {
   
   
            "name": "审计工作方案",
            "state": 3,
            "userName": "zbb",
            "time": null,
            "target": [
                {
   
   
                    "solidLine": 1,
                    "targetIndex": 8
                }
            ]
        },
        {
   
   
            "name": "审计实施方案",
            "state": 3,
            "userName": "www",
            "time": null,
            "target": [
                {
   
   
                    "solidLine": 0,
                    "targetIndex": 9
                },
                {
   
   
                    "solidLine": 1,
                    "targetIndex": 10
                }
            ]
        },
        {
   
   
            "name": "审计进点会",
            "state": 0,
            "userName": null,
            "time": null,
            "target": [
                {
   
   
                    "solidLine": 1,
                    "targetIndex": 10
                }
            ]
        },
        {
   
   
            "name": "现场审计",
            "state": 0,
            "userName": null,
            "time": null,
            "target": [
                {
   
   
                    "solidLine": 1,
                    "targetIndex": 11
                }
            ]
        },
        {
   
   
            "name": "内控质量交叉复合",
            "state": 0,
            "userName": null,
            "time": null,
            "target": [
                {
   
   
                    "solidLine": 0,
                    "targetIndex": 12
                },
                {
   
   
                    "solidLine": 1,
                    "targetIndex": 13
                }
            ]
        },
        {
   
   
            "name": "外聘中介服务考核",
            "state": 0,
            "userName": null,
            "time": null,
            "target": [
                {
   
   
                    "solidLine": 1,
                    "targetIndex": 13
                }
            ],
            divider: 2
        },
        {
   
   
            "name": "审计资料整理",
            "state": 0,
            "userName": null,
            "time": null,
            "target": [
                {
   
   
                    "solidLine": 1,
                    "targetIndex": 14
                }
            ]
        },
        {
   
   
            "name": "法规处网上审查",
            "state": 0,
            "userName": null,
            "time": null,
            "target": [
                {
   
   
                    "solidLine": 1,
                    "targetIndex": 15
                }
            ]
        },
        {
   
   
            "name": "草拟审计报告(征求意见稿)",
            "state": 1,
            "userName": null,
            "time": null,
            "target": [
                {
   
   
                    "solidLine": 1,
                    "targetIndex": 16
                }
            ]
        },
        {
   
   
            "name": "征求被审计单位意见",
            "state": 1
最低0.47元/天 解锁文章

200万优质内容无限畅学
MxGraph从入门到精通之5：在Vue项目中使用MxGraph
祈晴小义
07-03 3466
第一步：安装npm包 npm install mxgraph 第二步：在mxgraph.vue中使用mxgraph <template> <div> <div ref="graphContainer"> </div> </div> </template> <script> import mx from 'mxgraph' export default { name: 'Application
vue 引入 mxgraph
weixin_43678110的博客
11-02 1125
** vue 安装mxgraph ** 1.npm 下载 npm install mxgraph --save 2.创建配置文件：内容 import mx from 'mxgraph'; const mxgraph = mx({ ​ mxImageBasePath: './src/images', ​ mxBasePath: './src' }); // decode bug https://github.com/jgraph/mxgraph/issues/49 wind..
vue中使用mxgraph的方法实例代码详解
10-16
主要介绍了vue中使用mxgraph的方法实例代码详解,需要的朋友可以参考下
【Mxgraph】Vue中使用mxgraph开发流程图工具
热门推荐
节省钱的博客
03-11 2万+
1.什么是mxgraph mxGraph是一个JavaScript图表库，可以快速创建交互式图形和图表应用程序，这些应用程序可以在其供应商支持的任何主要浏览器中运行。mxGraph 提供图形绘制、图形可视化、图形交互、图形布局、图形分析等能力， 适用于工作流程图、BPMN图、网络图、UML图、循环图、组织结构图、MindMap图、机架图、甘特图、信息图、平面图等绘制。 mxGraph在2005年创建，作为商业项目一直持续到2016年，2016年创建者以Apache 2.0开源协议在GitHub上公布源码。
mxGraph 完全指南：JavaScript 图表库核心技术解析
最新发布
gitblog_01113的博客
06-06 314
mxGraph 完全指南：JavaScript 图表库核心技术解析 一、mxGraph 核心概念与技术架构 mxGraph 是一个强大的 JavaScript 图表库，专为需要展示交互式图表和图形的 Web 应用而设计。作为开发者工具库，它提供了完整的绘图、交互和上下文关联功能。 1.1 技术架构解析 mxGraph 采用纯前端架构，主要包含以下技术组件： 核心 JavaScript 文件：包含...
采用Mxgraph在Vue中开发流程图
简单点的博客
12-23 1215
采用Mxgraph在Vue中开发流程图
vue中引入mxGraph的步骤详解
11-29
在Vue项目中集成mxGraph库，需要按照一定的步骤进行，以确保正确地引入和使用mxGraph的功能。mxGraph是一款强大的JavaScript图形编辑库，用于创建可交互的图表和流程图。以下是一个详细的步骤详解： **第一步：安装...
Mxgraph 使用教程（3）：本地引入mxgraph和 vue中引入mxgraph
qq_43955202的博客
08-07 7521
1.本地引入mxgraph 第一步：下载mxgraph库 github地址：https://github.com/jgraph/mxgraph 第二步：clone项目 打开项目-》进入javascript 第三步：本地使用mxgraph 一个官方示例demo: <html> <head> <title>Hello, World! example for mxGraph</title> <!-- Sets the basepath for the
vue中使用mxgraph杂谈记
欢乐时光已经开始---博客
04-19 5468
mxgraph
vue-mxgraph-example:根据要求提供mxGraph示例程序，以帮助您快速入门
05-10
English | 特征 在vue下提供mxGraph示例程序，以帮助您快速入门。 现在，仅是几个简单的小示例，如果想要查看mxGraph Demo可以给我带来什么问题，或者通过以下方式与我联系。 演示清单 级联删除 工具列 自定义工具栏 模具工具栏 HtmlLabel EdgeStyle CustomConnectionConstraints 手动绘图 组编辑器 接触
vue-mxgraph-example-master (2).zip
11-25
vue配合mxGraph 入门实例项目，
Vue-cli3生成的Vue项目加载Mxgraph方法示例
10-15
主要介绍了Vue-cli3生成的Vue项目加载Mxgraph方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中使用mxgraph插件流程图（第1弹）
weixin_44523852的博客
06-16 5784
主要功能介绍 最近需要开发一款营销流程图项目，需要各种节点流程任务的拖拽跑出数据结果，需要用到节点的增删改查，插销删除流程测试执行各种操作，于是发现了mxgraph这款插件。 mxGraph是一款基于web的绘制流程图的javascript库工具 英文官方网站：http://jgraph.github.io/mxgraph/docs/js-api/files/index-txt.html gitDemo地址：https://github.com/jgraph/mxgraph2 npm可以直接安装
mxgraph + vue 入门 (概念篇)
懒牛不爱梳毛
03-19 2万+
本教程是基于mxgraph 3.9.12，mxgraph感觉在国内用的人比较少，百度上搜一圈都是一些简单的操作，稍微偏一些的操作或者问题都没有涉及，在官方example和官方API挣扎了几个月后终于有所感悟，于是写下这篇教程，一是方便后人，二是做为自己的记录。（mxgraph 和 vue的集成可以参考我另一篇博客。https://blog.csdn.net/dikentoujing99/artic...
mxgraph整合vue入门和事件处理
Leonards_1998的博客
02-21 2093
mxgraph的事件处理机制/自定义事件/事件传递参数
mxgraph vue 简陋编辑器
日常编码
12-03 2044
可以画图，导入导出xml文件，更改cell样式（填充颜色） 上代码： editor.vue <template> <div> <div class="topbar"> <div class="topbar-left"> <el-select v-model="reques...
vue中使用mxgraph_使用vue和mxGraph构建Typeflow的绘图工具
cuk5340的博客
07-29 1642
vue中使用mxgraph 类型流编辑器 (typeflow-editor) build with the vue and mxGraph. 使用vue和mxGraph构建。 核心外观 (Core appearance) 拖动“定义”中的元素之一后，将显示表格以填充 (After drag the one of the elements in "definitions", the fo...
vue使用mxgraph 使用教程
03-20
### Vue 中集成和使用 mxGraph 的方法 在 Vue 项目中集成和使用 mxGraph 是一项常见的需求，尤其是在开发图形化编辑器或流程图工具时。以下是详细的实现方式： #### 集成 mxGraph 到 Vue 项目 为了将 mxGraph 成功...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值