antV G6流程圖在Vue中的使用

張憲坤發布于2019-08-23 12:02 / 1929人閱讀

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

更新內容

最新版本

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

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

相關資源下載

antV G6( v1.2.8)

字體圖標

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

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

技術棧

Vue v2.0.1

Element-ui v2.4.5

antV G6 v1.2.8

Sass

效果圖

引入

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

實例代碼

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

流圖屬性

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

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

流圖事件

事件名	說明	參數
saveData	當用戶手動點擊保存觸發事件	source,type

參數type可為空，在此項目中主要用來區分新建與編輯

流圖方法

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

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

參考文檔

使用 G6關系圖類庫開發流程圖工具

舊版本G6 1.x API 文檔

新版本G6 2.x API 文檔

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97870.html

antV G6流程圖在Vue中的使用

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

cnio 2019-08-02 16:06 評論0 收藏0
G6 2.0 開源發布 -- 裂變·聚變

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

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

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

venmos 2019-08-26 14:05 評論0 收藏0
G6的插件系統

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

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

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

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