因為項目用到流程圖，并且需求也算是不詳細(xì)，所以選擇比較靈活的 x6 圖形編輯器作為流程圖編輯器，從文檔來看不算復(fù)雜，這邊就是作為參考教程。

Antv X6 文檔

根據(jù)教程提示安裝 x6 依賴即可，然后新建個容器進(jìn)行實例化：

<div ref='containerRef' />

const data = { // 節(jié)點 nodes: [ { id: ’node1’, // String，可選，節(jié)點的唯一標(biāo)識 x: 40, // Number，必選，節(jié)點位置的 x 值 y: 40, // Number，必選，節(jié)點位置的 y 值 width: 80, // Number，可選，節(jié)點大小的 width 值 height: 40, // Number，可選，節(jié)點大小的 height 值 label: ’hello’, // String，節(jié)點標(biāo)簽 }, { id: ’node2’, // String，節(jié)點的唯一標(biāo)識 x: 160, // Number，必選，節(jié)點位置的 x 值 y: 180, // Number，必選，節(jié)點位置的 y 值 width: 80, // Number，可選，節(jié)點大小的 width 值 height: 40, // Number，可選，節(jié)點大小的 height 值 label: ’world’, // String，節(jié)點標(biāo)簽 }, ], // 邊 edges: [ { source: ’node1’, // String，必須，起始節(jié)點 id target: ’node2’, // String，必須，目標(biāo)節(jié)點 id }, ],}function initGraph() { const graph = new Graph({ container: this.$refs.containerRef, grid: { size: 10, // 網(wǎng)格大小 10px visible: true // 渲染網(wǎng)格背景 }, snapline: { enabled: true, // 對齊線 sharp: true }, scroller: { enabled: true, pageVisible: false, pageBreak: false, pannable: true } }) // 畫布居中 graph.centerContent() graph.fromJSON(data)}

就這樣最簡單例子實現(xiàn)了，上面不同的參數(shù)請參考文檔對應(yīng)的解釋。

根據(jù)文檔的 stencil 例子，可以簡化很多代碼量，直接用封裝好的業(yè)務(wù)就行了，和上面一樣直接寫個容器實例化即可：

<el-aside ref='stencilRef' />

this.stencil = new Stencil({ title: ’流程節(jié)點側(cè)邊欄’, target: graph, search: false, collapsable: true, stencilGraphWidth: this.$refs.stencilRef.$el.clientWidth, stencilGraphHeight: this.$refs.stencilRef.$el.clientHeight, groups: [{ name: ’group’, title: ’流程圖節(jié)點’, collapsable: false }], getDropNode: node => {let cloneNode = node.clone()switch (node.shape) { case ’rect’:cloneNode = new RectShape()break case ’circle’:cloneNode = new CircleShape()break case ’polygon’:cloneNode = new PolylineShape()break}cloneNode.updateInPorts(graph)return cloneNode }})// 加載節(jié)點this.stencil.load([new Rect(rectInfo), new Circle(circleInfo), new Polygon(polygonInfo)], ’group’)0x3 整合例子

在線：https://codesandbox.io/s/icy-meadow-rqihx

以上就是Vue.js 使用Antv X6的示例步驟的詳細(xì)內(nèi)容，更多關(guān)于Vue.js 使用 Antv X6的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！