antV G6流程圖在Vue中的使用

cnio 發(fā)布于2019-08-02 16:06 / 2932人閱讀

原文首發(fā)于我的博客，歡迎點擊查看獲得更好的閱讀體驗~

更新內容

最新版本

請關注G6官方的github倉庫https://github.com/antvis/g6

2.x版本后,可以通過npm install直接安裝使用了

相關資源下載

antV G6( v1.2.8)

字體圖標

最近我司項目中需要加入流程圖制作功能，于是乎百度各種找可視化繪制拓撲圖的輪子，大部分都是國外的，看文檔太吃力，不過好在最終讓我發(fā)現(xiàn)了AntV G6流程圖圖表庫，最新版為2.0，不過編輯器在2.0版本還沒有進行開源，所以只能退而求其次，使用了1.2.8版本。希望2.0版本的編輯器盡早開源，在交互方面1.2.8版本還是差了一些。

該組件并非開箱即食，需要根據(jù)自己的業(yè)務進行修改，右側屬性表單部分如果有時間考慮改為插槽形式，方便以后復用~

技術棧

Vue v2.0.1

Element-ui v2.4.5

antV G6 v1.2.8

Sass

效果圖

引入

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

實例代碼

仿照2.0版本的編輯器將G6作為了一個組件使用，代碼：

流圖屬性

參數(shù)	說明	類型	可選值	默認值
actionList	動作數(shù)據(jù)	Array	——	[]
funcList	功能數(shù)據(jù)	Array	——	[]
accountList	賬號數(shù)據(jù)	Array	——	[]
workflowList	流圖數(shù)據(jù)	Array	——	[]
nodeTypeList	節(jié)點類型數(shù)據(jù)	Array	——	[{id: 0, label: "普通節(jié)點"},{id: 1, label: "入口節(jié)點"},{id: 2, label: "出口節(jié)點"}]

所有屬性接收的數(shù)據(jù)格式需要與nodeTypeList的默認值相同

流圖事件

事件名	說明	參數(shù)
saveData	當用戶手動點擊保存觸發(fā)事件	source,type

參數(shù)type可為空，在此項目中主要用來區(qū)分新建與編輯

流圖方法

方法名	說明	參數(shù)
clearView	清空當前視圖	——
source	渲染數(shù)據(jù)	nodes, edges, name, type

參數(shù)type與事件中相同，參數(shù)name的作用是用來取流圖名

參考文檔

使用 G6關系圖類庫開發(fā)流程圖工具

舊版本G6 1.x API 文檔

新版本G6 2.x API 文檔

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/54670.html

antV G6流程圖在Vue中的使用

原文首發(fā)于我的博客，歡迎點擊查看獲得更好的閱讀體驗~ 更新內容最新版本請關注G6官方的github倉庫https://github.com/antvis/g6 2.x版本后,可以通過npm install直接安裝使用了相關資源下載 antV G6( v1.2.8) 字體圖標最近我司項目中需要加入流程圖制作功能，于是乎百度各種找可視化繪制拓撲圖的輪子，大部分都是國外的，看...

張憲坤 2019-08-23 12:02 評論0 收藏0
G6 2.0 開源發(fā)布 -- 裂變·聚變

摘要：從年月，立項至今，已經(jīng)過去了年半的時間。期間獲得過贊譽，也有吐槽，取得一定成就，也暴露過不少問題。這次，我們很高興的告訴大家，今天除了開源，還會開放取得了階段性成果的詳見鏈接。與產品深度融合為了避免和成為工程師閉門造車的產物。 showImg(https://segmentfault.com/img/remote/1460000015199265?w=1500&h=756); G6 是...

ThinkSNS 2019-08-26 12:00 評論0 收藏0
G6文檔

這個項目采用的是G6（阿里開源），由于現(xiàn)在已經(jīng)沒有維護了，導致很多的配置，參數(shù)，方法示例demo等都是自己摸索的，大概介紹下本案例中使用到的以及一些后續(xù)維護可能會用到的。 Editor 該類是整個編輯器的主控類，其主要職責是將編輯器的各個組件協(xié)同起來。 //實例化： import G6Editor from @antv/g6-editor const editor = new G6Editor()...

venmos 2019-08-26 14:05 評論0 收藏0
G6的插件系統(tǒng)

摘要：的插件系統(tǒng)做的相當完善可惜文檔沒有具體說到這里整理一下的插件插件大致分為四種類型行為可以理解為事件處理的插件就是和的樣式同樣是插件插件的布局之類這部分涉及的算法比較多插件就是自定義工具函數(shù)將其內置中這四種插件都有各自的寫法以及但是文檔中沒有 G6的插件系統(tǒng)做的相當完善, 可惜文檔沒有具體說到. 這里整理一下g6的插件. 插件大致分為四種類型: behaviour 行為, 可以理解為事...

Ilikewhite 2019-08-23 13:43 評論0 收藏0
[BizCharts學習筆記] --- 數(shù)據(jù)可視化

摘要：所以筆者選擇了，為什么會選擇一是因為它是阿里出品，經(jīng)歷了一年左右的打磨已經(jīng)完全適應在使用其次是它支持自由定制，不會像那樣高度封裝，所以在開發(fā)復雜圖表的時候會更加得心應手。只是阿里圖表庫中的一員。實際上，在數(shù)據(jù)可視化這一塊筆者并沒有很多的開發(fā)經(jīng)歷和經(jīng)驗，不過正是因為這個問題筆者才決定學習一門數(shù)據(jù)可視化框架來彌補自己在這一方面的不足。在這個大數(shù)據(jù)統(tǒng)治的時代，數(shù)據(jù)能給我們提供前所未有的便捷...

CoffeX 2019-08-23 11:56 評論0 收藏0