【vue2 & G6】快速上手

德育处主任

发布于 2022-04-15 14:57:36

1K0

发布于 2022-04-15 14:57:36

文章被收录于专栏：前端数据可视化

主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

贡献主题：https://github.com/xitu/juejin-markdown-themes

theme: juejin highlight:

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】 引入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>

效果如下图所示