【vue2 & G6】快速上手

1,693 阅读3分钟

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

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



开发环境

  • 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 目录,证明安装成功了。


2、代码+注释

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

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

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

<template>
  <div class="page-x">
    <!-- 【步骤1】 创建容器 -->
    <div class="g6-x" id="containerG6" ref="containerG6"></div>
  </div>
</template>

<script>
// 【步骤2】 引入G6
import 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 的数据中,主要用到 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官方快速上手文档

本例源码地址