现象
刚开始用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)
})
这就成功绘制了