“Error: Ensure the container of the graph is specified and valid“：antv-x6报错

antv-X6快速上手报错：

发现原因是因为：

正确的代码如下：

<template>
  <div id="container">
  </div>
</template>

<script>
import { Graph } from '@antv/x6';
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
    },
  ],
};


export default {
  name: "index",
  mounted () {
    this.init();
  },
  methods: {
    init(){
      new Graph({
        container: document.getElementById('container'),
        width: 800,
        height: 600,
      }).fromJSON(data)
    }
  }
}

</script>

<style scoped>

</style>