antv-x6在vue中使用：快速上手测试

1、官方文档：

https://antv-x6.gitee.io/zh/docs/tutorial/getting-started

2、demo

<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(){
      const graph = new Graph({
        container: document.getElementById('container'),
        width: 800,
        height: 600,
      });

      graph.fromJSON(data)

    }
  }
}

</script>

<style scoped>

</style>

3、效果