Antv X6的第一个demo

在上一篇文章学习了如果安装与搭建antv X6后，我相信好多小伙伴都想迫不及待的完成x6的第一个demo了，那么就跟着我一起上手吧。

代码的布局结构如下：

实现效果如下：

完整代码：

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


<script>
import { Graph } from '@antv/x6'
export default {
  name: 'X6',
  mounted () {
    this.initComponent()
  },
  data () {
    return {
      data: {}, // X6 数据
      graph: undefined // new X6
    }
  },
  methods: {
    initComponent () {
      this.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
          }
        ]
      }
      this.graph = new Graph({
        container: document.getElementById('container'),
        width: 800,
        height: 600
      })
      this.graph.fromJSON(this.data)
    }


  }
}
</script>


<style scoped>


</style>

从demo中可以看出，nodes节点中的坐标x,y是必选项。看到这里，就感觉没有antV G6那么好了，因为在G6中，我并没有自己算坐标