国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

antV G6流程圖在Vue中的使用

cnio / 2922人閱讀 

原文首發(fā)于我的博客，歡迎點(diǎn)擊查看獲得更好的閱讀體驗(yàn)~
更新內(nèi)容

最新版本

請關(guān)注G6官方的github倉庫https://github.com/antvis/g6

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

相關(guān)資源下載

antV G6( v1.2.8)

字體圖標(biāo)

最近我司項(xiàng)目中需要加入流程圖制作功能，于是乎百度各種找可視化繪制拓?fù)鋱D的輪子，大部分都是國外的，看文檔太吃力，不過好在最終讓我發(fā)現(xiàn)了AntV G6流程圖圖表庫，最新版為2.0，不過編輯器在2.0版本還沒有進(jìn)行開源，所以只能退而求其次，使用了1.2.8版本。希望2.0版本的編輯器盡早開源，在交互方面1.2.8版本還是差了一些。
該組件并非開箱即食，需要根據(jù)自己的業(yè)務(wù)進(jìn)行修改，右側(cè)屬性表單部分如果有時(shí)間考慮改為插槽形式，方便以后復(fù)用~
技術(shù)棧

Vue v2.0.1

Element-ui v2.4.5

antV G6 v1.2.8

Sass

效果圖

引入

在index.html中進(jìn)行了全局引用
實(shí)例代碼

仿照2.0版本的編輯器將G6作為了一個(gè)組件使用，代碼：
流圖屬性
參數(shù) 說明 類型 可選值 默認(rèn)值
actionList 動(dòng)作數(shù)據(jù) Array —— []
funcList 功能數(shù)據(jù) Array —— []
accountList 賬號數(shù)據(jù) Array —— []
workflowList 流圖數(shù)據(jù) Array —— []
nodeTypeList 節(jié)點(diǎn)類型數(shù)據(jù) Array —— [{id: 0, label: "普通節(jié)點(diǎn)"},{id: 1, label: "入口節(jié)點(diǎn)"},{id: 2, label: "出口節(jié)點(diǎn)"}] 
所有屬性接收的數(shù)據(jù)格式需要與nodeTypeList的默認(rèn)值相同
流圖事件
事件名 說明 參數(shù)
saveData 當(dāng)用戶手動(dòng)點(diǎn)擊保存觸發(fā)事件 source,type 
參數(shù)type可為空，在此項(xiàng)目中主要用來區(qū)分新建與編輯
流圖方法
方法名 說明 參數(shù)
clearView 清空當(dāng)前視圖 ——
source 渲染數(shù)據(jù) nodes, edges, name, type 
參數(shù)type與事件中相同，參數(shù)name的作用是用來取流圖名
參考文檔

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

舊版本G6 1.x API 文檔

新版本G6 2.x API 文檔

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/54670.html

相關(guān)文章

  • antV G6流程圖在Vue中的使用

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

    張憲坤 評論0 收藏0

  • G6 2.0 開源發(fā)布 -- 裂變·聚變

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

    ThinkSNS 評論0 收藏0

  • G6文檔

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

    venmos 評論0 收藏0

  • G6的插件系統(tǒng)

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

    Ilikewhite 評論0 收藏0

  • [BizCharts學(xué)習(xí)筆記] --- 數(shù)據(jù)可視化

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

    CoffeX 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<