【vue2 & G6】快速上手

学习委员

关注

发布于: 2021 年 02 月 22 日

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】”的注释方式一一对应。

<template>  <div class="page-x">    <!-- 【步骤1】 创建容器 -->    <div class="g6-x" id="containerG6" ref="containerG6"></div>  </div></template>
<script>// 【步骤2】 引入G6import G6 from '@antv/g6'
export default {  name: "Started",  data() {    return {      graph: null,      // 【步骤3】 准备数据      graphData: {        // 点集        nodes: [          {            id: "node1", // String，该节点存在则必须，节点的唯一标识            x: 100, // Number，可选，节点位置的 x 值            y: 200 // Number，可选，节点位置的 y 值          },          {            id: "node2", // String，该节点存在则必须，节点的唯一标识            x: 300, // Number，可选，节点位置的 x 值            y: 200 // Number，可选，节点位置的 y 值          }        ],        // 边集        edges: [          {            source: "node1", // String，必须，起始点 id            target: "node2" // String，必须，目标点 id          },        ]      }    }  },  methods: {    // 初始化关系图，并渲染数据    initGraph() {      // 【步骤4】 创建关系图      const containerG6  = this.$refs.containerG6 // 获取容器（DOM元素）      this.graph = new G6.Graph({        container: containerG6, // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身        width: containerG6.offsetWidth, // Number，必须，图的宽度        height: containerG6.offsetHeight // Number，必须，图的高度      })
      // 【步骤5】 匹配数据源并渲染      this.graph.data(this.graphData) // 读取 Step 2 中的数据源到图上      this.graph.render() // 渲染图    }  },  mounted() {    this.initGraph()  }};</script>
<style scoped>.g6-x {  width: 800px;  height: 500px;  box-sizing: border-box;  border: 1px solid #ccc;  margin-left: 20px;}</style>

复制代码

效果如下图所示

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

步骤 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 的使用。

本例所参考的文献

创作场景