Vue组合式API 使用 AntV x6报错： “Error: Ensure the container of the graph is specified and valid”

现象

刚开始用vue3的组合式API，还不是很习惯，跟着X6的教程一顿复制，报错：

 

原因

错误原因是在 mounted 生命周期时，id 为 container 的 div 还没有被挂载到页面中。这就导致我们想要将 graph 绘制在 id 为 container 的 div 上时，该节点还不存在，也就导致了报错。

解决方案

只需要确保需要挂在的的目标元素存在即可，比如在mounte之后再进行X6的绘制

onMounted(() => {
    const graph = new Graph({
      container: document.getElementById('container'),
      width: 800,
      height: 600,
    });

    graph.fromJSON(data)
  })

这就成功绘制了