AntV G6的安装与搭建

项目中有遇到一个偏展示，但echarts的graph实现效果又不是很理想，所以就研究了antv G6,到目前为止支持的还可以，所以写几篇文件记录一下学习G6的过程

antv官网

首先，我在官网例子中找到了G6,感觉G6比较适合我们现在的拓扑图需求，所以就开始了一些简单的研究

官网的快速上手

1.安装与引用

 <1>使用npm安装与引用

（1）在项目中使用npm包引入，需要使用如下命令安装g6

npm install --save @antv/g6

具体效果如下图所示：

 

 （2）在需要用到G6的组件或JS文件中导入：

import G6 from '@antv/g6';

具体效果如下图所示：

  <2>使用CDN的方式引入，这种方法比较简单，我这边是vue例子，所以对html的内容就不详细解释了

 // version <= 3.2
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script>

// version >= 3.3
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/{$version}/dist/g6.min.js"></script>

// version >= 4.0
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>