> ## Content Index
> Fetch the complete content index at: https://iiong.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Vue.js 使用 Ant X6 实践
- URL: https://iiong.com/vue-js-uses-ant-x6-to-practice/
- Published: 2021-01-05T15:27:24.000Z
- Updated: 2026-06-22T15:31:57.000Z
- Description: 因为项目用到流程图，并且需求也算是不详细，所以选择比较灵活的 x6 图形编辑器作为流程图编辑器，从文档来看不算复杂，这边就是作为参考教程。
- Author: 淮城一只猫
- Tags: 奇技淫巧, Vue.js

### 0x0 前言

因为项目用到流程图，并且需求也算是不详细，所以选择比较灵活的 `x6` 图形编辑器作为流程图编辑器，从文档来看不算复杂，这边就是作为参考教程。

[Ant X6 文档](https://x6.antv.vision/zh/docs/tutorial/about?ref=iiong.com)

### 0x1 安装

根据教程提示安装 `x6` 依赖即可，然后新建个容器进行实例化：

```html
<div ref="containerRef" class="area-center-container" />

```

```javascript
const data = {
  // 节点
  nodes: [
    {
      id: 'node1', // String，可选，节点的唯一标识
      x: 40,       // Number，必选，节点位置的 x 值
      y: 40,       // Number，必选，节点位置的 y 值
      width: 80,   // Number，可选，节点大小的 width 值
      height: 40,  // Number，可选，节点大小的 height 值
      label: 'hello', // String，节点标签
    },
    {
      id: 'node2', // String，节点的唯一标识
      x: 160,      // Number，必选，节点位置的 x 值
      y: 180,      // Number，必选，节点位置的 y 值
      width: 80,   // Number，可选，节点大小的 width 值
      height: 40,  // Number，可选，节点大小的 height 值
      label: 'world', // String，节点标签
    },
  ],
  // 边
  edges: [
    {
      source: 'node1', // String，必须，起始节点 id
      target: 'node2', // String，必须，目标节点 id
    },
  ],
}

function initGraph() {
  const graph = new Graph({
    container: this.$refs.containerRef,
    grid: {
      size: 10, // 网格大小 10px
      visible: true // 渲染网格背景
    },
    snapline: {
      enabled: true, // 对齐线
      sharp: true
    },
    scroller: {
      enabled: true,
      pageVisible: false,
      pageBreak: false,
      pannable: true
    }
  })
  // 画布居中
  graph.centerContent()

  graph.fromJSON(data)
}

```

就这样最简单例子实现了，上面不同的参数请参考文档对应的解释。

### 0x2 节点侧边栏

根据文档的 [stencil](https://x6.antv.vision/zh/docs/tutorial/basic/dnd/?ref=iiong.com#stencil) 例子，可以简化很多代码量，直接用封装好的业务就行了，和上面一样直接写个容器实例化即可：

```html
<el-aside ref="stencilRef" class="area-left" />

```

```javascript
this.stencil = new Stencil({
    title: '流程节点侧边栏',
    target: graph,
    search: false,
    collapsable: true,
    stencilGraphWidth: this.$refs.stencilRef.$el.clientWidth,
    stencilGraphHeight: this.$refs.stencilRef.$el.clientHeight,
    groups: [
        {
            name: 'group',
            title: '流程图节点',
            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
    }
})
// 加载节点
this.stencil.load([new Rect(rectInfo), new Circle(circleInfo), new Polygon(polygonInfo)], 'group')

```

### 0x3 整合例子

在线：[https://codesandbox.io/s/icy-meadow-rqihx](https://codesandbox.io/s/icy-meadow-rqihx?ref=iiong.com)