antv g6 禁止移动_antV G6流程图在Vue中的使用

最近我司项目中需要加入流程图制作功能，于是乎百度各种找可视化绘制拓扑图的轮子，大部分都是国外的，看文档太吃力，不过好在最终让我发现了AntV G6流程图图表库，最新版为2.0，不过编辑器在2.0版本还没有进行开源，所以只能退而求其次，使用了1.2.8版本。希望2.0版本的编辑器尽早开源，在交互方面1.2.8版本还是差了一些。

该组件并非开箱即食，需要根据自己的业务进行修改，右侧属性表单部分如果有时间考虑改为插槽形式，方便以后复用~

如何将数据进行数据可视化展现？

技术栈

Vue v3.0.1

Sass

效果图

引入

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

<script src="./static/plugin/g6.min.js"></script>

实例代码

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

<template>

<div id="flowChart">

<div class="operating">

<div class="btn-group">

<div class="btn" @click="addCircle" title="起始节点">

<i class="iconfont icon-circle-oeps"></i>

</div>

<div class="btn" @click="addRect" title="常规节点">

<i class="iconfont icon-square-oeps"></i>

</div>

<div class="btn" @click="addRhombus" title="条件节点">

<i class="iconfont icon-square-ling"></i>

</div>

</div>

<div class="btn-group">

<div class="btn" @click="addLine" title="直线">

<i class="iconfont icon-zhixian"></i>

</div>

<div class="btn" @click="addSmooth" title="曲线">

<i class="iconfont icon-quxian"></i>

</div>

<div class="btn" @click="addArrowLine" title="箭头直线">

<i class="iconfont icon-jiantouzhixian"></i>

</div>

<div class="btn" @click="addArrowSmooth" title="箭头曲线">

<i class="iconfont icon-jiantouquxian"></i>

</div>

</div>

<div class="btn-group">

<div class="btn" @click="changeMode('edit')" title="选择模式">

<i class="iconfont icon-chose"></i>

</div>

<div class="btn" @click="changeMode('drag')" title="拖拽模式">

<i class="iconfont icon-move"></i>

</div>

</div>

<div class="btn-group">

<div class="btn" @click="del" style="margin-top: 5px;" title="删除">

<i class="el-icon-delete"></i>

</div>

<div class="btn" @click="save" title="保存">

<i class="iconfont icon-baocun"></i>

</div>

</div>

<div class="btn-group">

<el-input size="mini" v-model="workflowName" placeholder="请输入流图名称..."></el-input>

</div>

</div>

<div class="info">

<div class="title">

<span>{ {infoTitle}}属性</span>

</div>

<div class="content">

<el-checkbo