Vue-X6-Flow：构建可定制化流程图的强大框架

<template>
  <div id="x6-graph-container"></div>
</template>
 
<script>
import { onMounted, ref } from 'vue';
import { Graph } from '@antv/x6';
 
export default {
  setup() {
    const container = ref(null);
    let graph = null;
 
    onMounted(() => {
      graph = new Graph({
        container: container.value,
        width: 800,
        height: 600,
        grid: true,
      });
 
      graph.addNode({
        x: 100,
        y: 40,
        width: 80,
        height: 40,
        label: 'Hello',
      });
 
      graph.addNode({
        x: 300,
        y: 100,
        width: 80,
        height: 40,
        label: 'World',
      });
 
      graph.addEdge({
        source: { x: 100, y: 40 },
        target: { x: 300, y: 100 },
      });
    });
 
    return {
      container,
    };
  },
};
</script>
 
<style>
#x6-graph-container {
  width: 100%;
  height: 100vh;
}
</style>

这个例子展示了如何在Vue组件中初始化X6的Graph对象，并添加了一个节点和一条边。它演示了如何在Vue的生命周期钩子onMounted中进行图的初始化，并且通过ref来获取DOM元素的引用。这个例子简洁明了，并且是一个很好的起点，可以帮助开发者理解如何在Vue应用中集成X6。