> G6是一个简单、易用、完备的图可视化引擎，能帮助开发者搭建属于自己的图，图分析应用或是图编辑器应用（来自官网）。 G6不依赖其他的框架，只需要开发者使用js开发，可以轻松让初学者接触到可视化领域，完成较为高质量可视化项目。在这里我简单介绍G6的用法，适合新手快速入门。 # 1.安装和引用 1）安装 ```js npm install --save @antv/g6 ``` 2）引入 ```js import G6 from '@antv/g6' ``` # 2.创建第一个图 1）创建一个div作为渲染区域（可以为div设置样式，让它全屏展示，方便后续调整）  2）编写js部分代码 - 首先，实例化G6.graph，并在里面传入你需要的配置  - 然后，设置渲染的json数据 ```js const data = { // 点集 nodes: [{ id: '1', // String，该节点存在则必须，节点的唯一标识 label: 'node1', },{ id: '2', // String，该节点存在则必须，节点的唯一标识 label: 'node2', },{ id: '3', // String，该节点存在则必须，节点的唯一标识 label: 'node3', },{ id: '4', // String，该节点存在则必须，节点的唯一标识 label: 'node4', },{ id: '5', // String，该节点存在则必须，节点的唯一标识 label: 'node5', }], // 边集 edges: [{ source: '1', // String，必须，起始点 id target: '2', // String，必须，目标点 id }, { source: '2', // String，必须，起始点 id target: '3', // String，必须，目标点 id },{ source: '2', // String，必须，起始点 id target: '4', // String，必须，目标点 id },{ source: '3', // String，必须，起始点 id target: '5', // String，必须，目标点 id },{ source: '4', // String，必须，起始点 id target: '5', // String，必须，目标点 id }] }; ``` - 传入数据 ```js graph.data(data); ``` - 渲染图 ```js graph.render(); // 渲染图 ``` - 简单的图就完成了，渲染后展示如下  # 3.一些其他的配置项介绍 具体的配置项可以去官网查阅，在这里我简单列举（内容来自[官网](链接地址https://www.yuque.com/antv/g6/graph)） 名称| 类型| 描述 ------- | ------- | ------- fitView| Boolean| 是否开启画布自适应。开启后图自动适配画布大小。 modes| Object| 设置画布的模式。详情可见 G6 中的 Mode 文档。 defaultNode| Object| 默认状态下节点的配置，比如 shape, size, color。会被写入的 data 覆盖。 defaultEdge| Object| 默认状态下边的配置，比如 shape, size, color。会被写入的 data 覆盖。 animate| Boolean|是否启用全局动画。默认false。 layout| Object|布局配置项，使用 type 字段指定使用的布局方式，type可取以下值：random, radial, mds, circular, fruchterman, force, dagre。
