在Vue中如何使用AntV X6库动态展示组织架构图？

npm install @antv/x6

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

<script>
import { Graph } from '@antv/x6';

export default {
  data() {
    return {
      graph: null,
      orgChartData: null, // 后端返回的数据
    };
  },
  mounted() {
    this.graph = new Graph({
      container: document.getElementById('container'),
      width: 800,
      height: 600,
    });

    // 模拟后端返回的数据 (实际应用中，应替换为从后端获取的数据)
    this.orgChartData = {
      nodes: [
        { id: '1', label: 'CEO', x: 300, y: 50 },
        { id: '2', label: 'CTO', parent: '1', x: 100, y: 150 },
        { id: '3', label: 'CFO', parent: '1', x: 500, y: 150 },
        { id: '4', label: '研发经理', parent: '2', x: 50, y: 250 },
        { id: '5', label: '测试经理', parent: '2', x: 150, y: 250 },
      ],
      edges: [
        { source: '1', target: '2' },
        { source: '1', target: '3' },
        { source: '2', target: '4' },
        { source: '2', target: '5' },
      ],
    };

    this.renderChart();
  },
  methods: {
    renderChart() {
      this.graph.clear(); // 清空之前的图形

      this.orgChartData.nodes.forEach(node => {
        this.graph.addNode({
          id: node.id,
          x: node.x,
          y: node.y,
          width: 80,
          height: 40,
          label: node.label,
        });
      });

      this.orgChartData.edges.forEach(edge => {
        this.graph.addEdge({
          source: edge.source,
          target: edge.target,
        });
      });
    },
  },
};
</script>