AntV G6的第一个demo

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

代码的布局结构如下：

 实现效果如下：

完整代码如下：

<template>
  <div>
    <div id="container"></div>
  </div>
</template>
<script>
import G6 from '@antv/g6'
export default {
  name: 'g6',
  mounted () {
    this.initComponent()
  },
  data () {
    return {
      data: {}, // 拓扑图数据
      graph: undefined // new G6
    }
  },
  methods: {
    /**
     * 创建G6，并对G6的一些设置
     * */
    initComponent () {
      this.data = {
        nodes: [
          {
            id: 'node1',
            label: '采集服务器',
            ip: '192.168.1.1'
          },
          {
            id: 'node2',
            label: '数据库',
            ip: '192.168.1.2'
          },
          {
            id: 'node3',
            label: '终端',
            ip: '192.168.1.3'
          },
          {
            id: 'node4',
            label: '引擎',
            ip: '192.168.1.4'
          }
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2'
          },
          {
            source: 'node1',
            target: 'node3'
          },
          {
            source: 'node1',
            target: 'node4'
          }
        ]
      }
      this.graph = new G6.Graph({
        container: 'container',
        width: 800,
        height: 800,
        layout: {
          type: 'force'
        },
        defaultNode: { // 节点样式修改
          size: 15
        }
      })
      this.graph.data(this.data)
      this.graph.render()
    }
  }
}
</script>

虽然实现的效果很丑，没啥特点，但是高兴的是，效果最起码有了，拓扑图有显示出来，接下来我们需要的效果，在此基础上完善即可

官方文档示例