vue2使用antv x6 的2.0版本

项目场景：记在vue2使用antv x6 的2.0版本layout布局的一些错误

最近工作中需要使用到antv x6绘制可折叠的树状图，树状图生成需要有x,y的坐标才行，后端返回的数据需要前端来进行处理与赋值x，y。使用了官网推荐的@antv/layout这个库。出现了一些问题记录一下。

---

问题

按照官网的过程走，安装的@antv/layout引入会报错，处理了引入问题又使用不了.layout方法

import { Graph } from '@antv/x6'
import { GridLayout } from '@antv/layout' // umd模式下， const { GridLayout } = window.layout

const graph = new Graph({
  container: document.getElementById('container'),
  width: 600,
  height: 400,
})

const model = {
  nodes: [
    {
      id: 'node1',
    }, {
      id: 'node2',
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    },
  ],
}

const gridLayout = new GridLayout({
  type: 'grid',
  width: 600,
  height: 400,
  center: [300, 200],
  rows: 4,
  cols: 4,
})

const newModel = gridLayout.layout(model)

graph.fromJSON(newModel)

@antv/layout引入报错

调用报错

---

解决方案：

引入的@antv/layout库有问题，直接引入的是有beta.的

只需要指定安装版本，就可以正常使用了

npm install @antv/layout@0.3.25

出现这样的就可以使用布局了。