antV G6流程图在Vue中的使用

最新推荐文章于 2024-08-10 08:46:15 发布

w1366352655

最新推荐文章于 2024-08-10 08:46:15 发布

阅读量6.7k

点赞数 3

本文链接：https://blog.csdn.net/w1366352655/article/details/86156099

版权

本文介绍了如何在Vue项目中结合Element-ui和Sass，使用antV G6库创建流程图。文章提供了引入G6、组件代码示例、流图属性、事件及方法的详细说明，并引用了G6的官方API文档作为参考。

摘要由CSDN通过智能技术生成

antV G6流程图在Vue中的使用

最近我司项目中需要加入流程图制作功能，于是乎百度各种找可视化绘制拓扑图的轮子，大部分都是国外的，看文档太吃力，不过好在最终让我发现了AntV G6流程图图表库，最新版为2.0，不过编辑器在2.0版本还没有进行开源，所以只能退而求其次，使用了1.2.8版本。希望2.0版本的编辑器尽早开源，在交互方面1.2.8版本还是差了一些。
该组件并非开箱即食，需要根据自己的业务进行修改，右侧属性表单部分如果有时间考虑改为插槽形式，方便以后复用~

技术栈

Vue v3.0.1
Element-ui v2.4.5
antV G6 v1.2.8
Sass

效果图

在这里插入图片描述

引入

在index.html中进行了全局引用



&lt;script src="./static/plugin/g6.min.js"&gt;&lt;/script&gt;

实例代码

仿照2.0版本的编辑器将G6作为了一个组件使用，代码：


&lt;template&gt;
  &lt;div id="flowChart"&gt;
    &lt;div class="operating"&gt;
      &lt;div class="btn-group"&gt;
        &lt;div class="btn" @click="addCircle" title="起始节点"&gt;
          &lt;i class="iconfont icon-circle-oeps"&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;div class="btn" @click="addRect" title="常规节点"&gt;
          &lt;i class="iconfont icon-square-oeps"&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;div class="btn" @click="addRhombus" title="条件节点"&gt;
          &lt;i class="iconfont icon-square-ling"&gt;&lt;/i&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="btn-group"&gt;
        &lt;div class="btn" @click="addLine" title="直线"&gt;
          &lt;i class="iconfont icon-zhixian"&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;div class="btn" @click="addSmooth" title="曲线"&gt;
          &lt;i class="iconfont icon-quxian"&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;div class="btn" @click="addArrowLine" title="箭头直线"&gt;
          &lt;i class="iconfont icon-jiantouzhixian"&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;div class="btn" @click="addArrowSmooth" title="箭头曲线"&gt;
          &lt;i class="iconfont icon-jiantouquxian"&gt;&lt;/i&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="btn-group"&gt;
        &lt;div class="btn" @click="changeMode('edit')" title="选择模式"&gt;
          &lt;i class="iconfont icon-chose"&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;div class="btn" @click="changeMode('drag')" title="拖拽模式"&gt;
          &lt;i class="iconfont icon-move"&gt;&lt;/i&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="btn-group"&gt;
        &lt;div class="btn" @click="del" style="margin-top: 5px;" title="删除"&gt;
          &lt;i class="el-icon-delete"&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;div class="btn" @click="save" title="保存"&gt;
          &