【vue2 & G6】快速上手

封面.jpg

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明,简单。让用户获得关系数据的 Insight。

翻译成白话: G6可以实现 拓扑图、流程图、脑图 等各种奇奇怪怪的图表的开发,并在浏览器呈现出来。

01.png



开发环境

  • chrome ^88.0.4324.104(正式版本)
  • vue ^2.6.11
  • g6 ^4.1.11


请认清本文所使用的开发环境。本例使用 Vue2 进行开发!!!

如果在练习中所使用到的库或浏览器版本与文本不一致,可能会出现某些功能无法实现。


本文的运行环境是 chrome 浏览器,如果在其他浏览器出现兼容问题,可以留言一起探讨一起解决。



学前准备

  1. 有一定的 htmlcss 基础,本文不讲解这方面的基础知识。
  2. 有一定的 vue 2 开发经验,本文不会讲解 vue 基础用法。
  3. 建议有 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 目录,证明安装成功了。

02.png


2、代码+注释

根据官方文档提示,要快速创建图表只需5大步骤。

  1. 创建容器
  2. 引入G6
  3. 准备数据
  4. 创建关系图
  5. 匹配数据源并渲染


以上步骤,会在代码中以“【步骤xxx】”的注释方式一一对应。






效果如下图所示

03.png


这个案例参考了官方的起步案例。


步骤3 的数据中,主要用到 nodesedges

nodes 是所有点的集合,是数据类型。每个点都需要有一个 id 属性,且 id 是唯一的。

nodes 里的 xy 代表该点在画布中的位置。

本例的 edges 是依赖于 nodes 的。

edges 是所有边的集合,是数组类型。需要画多少条边就有多少个对象元素。

每条边需要一个 source 和 一个 target

source 是指 起始点,值是 起始点id

target 是指 目标点,值是 目标点id


步骤4 使用 new G6.Graph 创建关系图。

其中 containerwidthheight 是必填项。如果没填这几项会报错。

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,长期维护)

你可能感兴趣的:(【vue2 & G6】快速上手)