前言

最近在项目中有遇到拓扑图的展示，刚好项目中有引入g6插件，于是边研究边做项目，记录一下g6的学习过程。

介绍

G6是支付宝前端团队推出的一款功能强大、易于使用的JavaScript图形库，可实现流程图，拓扑图等实现图形可视化。

官网

antv官网

一.安装

1.命令

npm install --save @antv/g6

2.安装成功

二.按需引入

在需要用到的g6组件的文件中引入即可

 import G6 from '@antv/g6'

三.第一个简单的demo

1.安装引入之后就可以展示一个简单的demo，具体说明如下图：

2.具体效果如下图（简单的展示）：

只是简单的展示，不可拖拽，不可放大缩小，不可点击

3.完整代码：

<template>
 <div>
   <div id="containerID" class="containeroo"></div>
 </div>
</template>
<script>
import G6 from '@antv/g6'
export default {
 name: 'g6',
 mounted () {
   this.initComponent()
 },
 data () {
   return {
     graghData: {}, // 拓扑图数据
     graph: undefined, // g6对象
   }
 },
 methods: {
   /**
    * 创建G6，并对G6的一些设置
    * */
   initComponent () {
     // 拓扑图数据
     this.graghData = {
       // 节点数据
       nodes: [
         {
           id: 'node1',
           label: '总的类目',
           ip: '192.168.1.1',
           status: 0
         },
         {
           id: 'node2',
           label: '分类1',
           ip: '192.168.1.2',
           status: 1
         },
         {
           id: 'node3',
           label: '分类2',
           ip: '192.168.1.3',
           status: 2
         },
         {
           id: 'node4',
           label: '分类3',
           ip: '192.168.1.4',
           status: 3
         },
         {
           id: 'node5',
           label: '分类4',
           ip: '192.168.1.8',
           status: 4
         }
       ],
       // 节点连线关系
       edges: [
         {
           source: 'node1',
           target: 'node2'
         },
         {
           source: 'node1',
           target: 'node3'
         },
         {
           source: 'node1',
           target: 'node4'
         },
          {
           source: 'node1',
           target: 'node5'
         }
       ]
     }
     // 创建g6实例
     this.graph = new G6.Graph({
       container: 'containerID',
       width: 600,
       height: 800,
       layout: {
         type: 'force'/*  */
       },
       modes: {
         default: ['drag-canvas', 'zoom-canvas', 'drag-node'] // 允许拖拽画布、放缩画布、拖拽节点，【2use22use22use2节点连线高亮】
       },
       // 节点样式修改
       defaultNode: { 
         size: 20 // 当节点为一个点时可设置
       },
       animate: true
     })
     // 接收数据并渲染
     this.graph.data(this.graghData)
     this.graph.render() 
   }
 }
}
</script>

下一篇：antvG6 实现画布拖拽放缩，节点拖拽

转载请注明原作者 不喜勿喷，欢迎补充~~