G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。
翻译成白话： G6可以实现 拓扑图、流程图、脑图 等各种奇奇怪怪的图表的开发，并在浏览器呈现出来。
开发环境
- chrome ^88.0.4324.104（正式版本）
- vue ^2.6.11
- g6 ^4.1.11
请认清本文所使用的开发环境。本例使用 Vue2 进行开发！！！
如果在练习中所使用到的库或浏览器版本与文本不一致，可能会出现某些功能无法实现。
本文的运行环境是 chrome 浏览器，如果在其他浏览器出现兼容问题，可以留言一起探讨一起解决。
学前准备
- 有一定的
html和css基础，本文不讲解这方面的基础知识。 - 有一定的
vue 2开发经验，本文不会讲解vue基础用法。 - 建议有
canvas基础（没有也没关系）。
本文使用 vue-cli 进行开发，所以会使用 npm 的方式安装 G6 。
快速上手
快速上手 - 官方文档
1、安装
CDN 的方式很简单，可以自行看文档。
本文使用 vue-cli 进行开发，所以会使用 npm 的方式安装 G6 。
这里默认读者已经使用 vue-cli 创建好一个 vue 2 的项目了。
进入创建好的 vue 项目，在终端输入以下命令进行安装：
$ npm install --save @antv/g6
$ 号不需要输入， $ 号代表命令。
安装成功后可以在 node_modules 目录查看到：在@antv 目录下找到 g6 目录，证明安装成功了。
2、代码+注释
根据官方文档提示，要快速创建图表只需5大步骤。
- 创建容器
- 引入G6
- 准备数据
- 创建关系图
- 匹配数据源并渲染
以上步骤，会在代码中以“【步骤xxx】”的注释方式一一对应。
效果如下图所示
这个案例参考了官方的起步案例。
步骤3 的数据中，主要用到 nodes 和 edges 。
nodes 是所有点的集合，是数据类型。每个点都需要有一个 id 属性，且 id 是唯一的。
nodes 里的 x 和 y 代表该点在画布中的位置。
本例的 edges 是依赖于 nodes 的。
edges 是所有边的集合，是数组类型。需要画多少条边就有多少个对象元素。
每条边需要一个 source 和 一个 target。
source 是指 起始点，值是 起始点 的 id 。
target 是指 目标点，值是 目标点 的 id 。
步骤4 使用 new G6.Graph 创建关系图。
其中 container、width 和 height 是必填项。如果没填这几项会报错。
container 是容器的 id 或者容器实例。本例使用 vue 2 开发，所以使用了 $refs 获取容器实例（本例中容器实例为 containerG6）。
width 是图的宽度，本例使用了 containerG6.offsetWidth ，让容器的宽度作为图的宽度。
height 是图的高度，本例使用了 `containerG6.offsetHeight，让容器的高度作为图的高度。
步骤5
使用 graph.data() 来初始化图数据。传入的参数就是 步骤2 中准备的数据。
使用 graph.render() 方法把数据渲染出来。
graph.data() 官方文档
graph.render() 官网文档
3、源码地址
本例源码地址
这个项目里还是用了 vue-router 进行开发，但 vue-router 部分不会影响 G6 的使用。
本例所参考的文献
延伸阅读
G6 国内官网
G6官方快速上手文档
本例源码地址（欢迎Star，长期维护）