Vue2.0+AntvX6基础用法

什么是antv-x6？
antv-x6是蚂蚁集团数据可视化团队开发维护的antv旗下的一款图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。

基础用法：
Step 1 创建容器
Step 2 准备数据
Step 3 渲染画布

<template>
  <div>
    <!-- Step 1 创建容器 -->
    <div ref="container" id="container"></div>
  </div>
</template>
<script>
// Step 2 准备数据
import { Graph } from '@antv/x6'
export default {
  data() {
    return {
      graph: null,
      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',
            x: 160,
            y: 180,
            width: 80,
            height: 40,
            label: 'world'
          }
        ],
        // 边
        edges: [
          {
            source: 'node1', // String，必须，起始节点 id
            target: 'node2' // String，必须，目标节点 id
          }
        ]
      }
    }
  },
  created() {},
  mounted() {
    this.initGraph()
  },
  methods: {
    initGraph() {
      // Step 3 渲染画布
      this.graph = new Graph({
        container: this.$refs.container,
        width: 800,
        height: 600
      })
      this.graph.fromJSON(this.data)
    }
  }
}
</script>
<style scoped>
</style>