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

資訊專欄INFORMATION COLUMN

antV G6流程圖在Vue中的使用

cnio / 2909人閱讀 

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

最新版本

請(qǐng)關(guān)注G6官方的github倉(cāng)庫(kù)https://github.com/antvis/g6

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

相關(guān)資源下載

antV G6( v1.2.8)

字體圖標(biāo)

最近我司項(xiàng)目中需要加入流程圖制作功能，于是乎百度各種找可視化繪制拓?fù)鋱D的輪子，大部分都是國(guó)外的，看文檔太吃力，不過(guò)好在最終讓我發(fā)現(xiàn)了AntV G6流程圖圖表庫(kù)，最新版為2.0，不過(guò)編輯器在2.0版本還沒(méi)有進(jìn)行開(kāi)源，所以只能退而求其次，使用了1.2.8版本。希望2.0版本的編輯器盡早開(kāi)源，在交互方面1.2.8版本還是差了一些。
該組件并非開(kāi)箱即食，需要根據(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ù) 說(shuō)明 類(lèi)型 可選值 默認(rèn)值
actionList 動(dòng)作數(shù)據(jù) Array —— []
funcList 功能數(shù)據(jù) Array —— []
accountList 賬號(hào)數(shù)據(jù) Array —— []
workflowList 流圖數(shù)據(jù) Array —— []
nodeTypeList 節(jié)點(diǎn)類(lèi)型數(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)值相同
流圖事件
事件名 說(shuō)明 參數(shù)
saveData 當(dāng)用戶手動(dòng)點(diǎn)擊保存觸發(fā)事件 source,type 
參數(shù)type可為空，在此項(xiàng)目中主要用來(lái)區(qū)分新建與編輯
流圖方法
方法名 說(shuō)明 參數(shù)
clearView 清空當(dāng)前視圖 ——
source 渲染數(shù)據(jù) nodes, edges, name, type 
參數(shù)type與事件中相同，參數(shù)name的作用是用來(lái)取流圖名
參考文檔

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

舊版本G6 1.x API 文檔

新版本G6 2.x API 文檔

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

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

相關(guān)文章

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

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

    張憲坤 評(píng)論0 收藏0

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

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

    ThinkSNS 評(píng)論0 收藏0

  • G6文檔

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

    venmos 評(píng)論0 收藏0

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

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

    Ilikewhite 評(píng)論0 收藏0

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

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

    CoffeX 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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