因?yàn)楣卷?xiàng)目需求，要畫(huà)出相關(guān)業(yè)務(wù)的流程圖，以便客戶了解自己身處何處

成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營(yíng)銷(xiāo)、網(wǎng)站重做改版、賀蘭網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為賀蘭等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

搜索框輸入 “前端流程圖插件”，查了很多資料，總結(jié)一下有以下幾種

flow-chart

代碼寫(xiě)法繁瑣，不是json就可以解決，效果也比較丑,PASS

darge-d3

github :https://github.com/dagrejs/dagre-d3

效果圖

下載里面的demo,改一下json就可以了

// States 
var states = [ "NEW", "SUBMITTED","FINISHED" ,"FAILED","DELIVER", 
    "CANCELED", "ABOLISHED" , "DELETED","REFUNDING","REFUNDED"];
var map = ['新創(chuàng)建','已提交','已完成','提交失敗',"交付中",
    '已取消','廢除','已刪除','退款中',"已退款"]
// Automatically label each of the nodes
states.forEach(function(state,index) { g.setNode(state, { label: `${map[index]}(${state})`})});

// Set up the edges
g.setEdge("NEW", "FAILED",  { label: "后臺(tái)接口自動(dòng)"});
g.setEdge("NEW", "SUBMITTED", { label: "后臺(tái)接口自動(dòng)" });
g.setEdge("NEW", "CANCELED", { label: "用戶取消訂單" });
g.setEdge("SUBMITTED","CANCELED",  { label: "用戶取消訂單" });
g.setEdge("SUBMITTED", "ABOLISHED", { label: "用戶超過(guò)48小時(shí)未支付，\n系統(tǒng)自動(dòng)取消"});
g.setEdge("ABOLISHED","DELETED",  { label: "已刪除" });
g.setEdge("CANCELED", "DELETED", { label: "已刪除"});
g.setEdge("FAILED", "SUBMITTED",  { label: "后臺(tái)接口自動(dòng)" });

g.setEdge("SUBMITTED", "DELIVER",  { label: "用戶支付" });
g.setEdge("FINISHED", "REFUNDING",  { label: "用戶退款" });

g.setEdge("DELIVER", "FINISHED",  { label: "交付完成" });
g.setEdge("REFUNDING", "REFUNDED",  { label: "已退款" });
g.setEdge("REFUNDED", "DELETED",  { label: "已刪除" });
g.setEdge("DELIVER", "REFUNDING",  { label: "用戶退款" });
g.setEdge("FAILED", "CANCELED",  { label: "用戶取消訂單" });

不滿意的地方：畫(huà)出來(lái)的圖是垂直方向的，我要的是水平方向,PASS

gojs

GoJS是一個(gè)實(shí)現(xiàn)交互類圖表（比如流程圖，樹(shù)圖，關(guān)系圖，力導(dǎo)圖等等）的JS庫(kù)。本文將介紹GoJs的精華部分。
因?yàn)镚oJS依賴于HTML5，所以請(qǐng)保證您的瀏覽器版本支持HTML5，當(dāng)然還要加載這個(gè)庫(kù)。

github :https://github.com/NorthwoodsSoftware/GoJS

可以通過(guò)npm install gojs -save安裝

效果圖

看里面的demo我自己包裝了一下

不滿意的地方：

1. 免費(fèi)版gojs是有水印的，百度搜索“gojs如何去水印”有一堆答案，我就不寫(xiě)了。
2. 因?yàn)橐约菏謩?dòng)去掉水印，所以我只能手動(dòng)下載go.js放在我自己的組件目錄下，但是這個(gè)文件太大了，800+KB,npm run dev 的時(shí)候停在這里停了好久。有時(shí)候還爆出“......maximun ....500KB”的錯(cuò)誤，我也不知道是什么原因，不知道有什么方法，有的話麻煩通知我。
3. 代碼寫(xiě)法有點(diǎn)太繁瑣

這是我自己包裝的代碼地址：https://github.com/LRY1994/vue-lib/tree/master/src/components/process-go

jointjs

相比Dagre-D3和jsPlumb，JointJS的API很詳細(xì)，代碼量少，連接線有多種選擇，封裝了多種常用的形狀，而且能畫(huà)的圖很多，官方也給了一些demo可以參考。

github : https://github.com/clientIO/joint

效果圖

可以通過(guò)npm install jointjs -save安裝

參照了很多demo和文檔，用的是矩形，但是可以設(shè)置圓角的度數(shù)變成橢圓形，其他形狀我就無(wú)力了。

可以自定義矩形的樣式和矩形框里面的文字樣式

//data.vue

這是我自己包裝的代碼地址：https://github.com/LRY1994/vue-lib/tree/master/src/components/process-joint

這個(gè)目前看來(lái)還算滿意

jsplumb

這個(gè)看了官網(wǎng)，不太友好，而且下載只有一個(gè)js文件，沒(méi)有demo代碼，不知如何下手

參考資料：

https://gojs.net/latest/samples/pageFlow.html
http://www.daviddurman.com/assets/autolayout.js
http://resources.jointjs.com/demos/layout

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。