如果在練習(xí)中所使用到的庫或?yàn)g覽器版本與文本不一致，可能會(huì)出現(xiàn)某些功能無法實(shí)現(xiàn)。

本文的運(yùn)行環(huán)境是 chrome 瀏覽器，如果在其他瀏覽器出現(xiàn)兼容問題，可以留言一起探討一起解決。

學(xué)前準(zhǔn)備

1. 有一定的 html 和 css 基礎(chǔ)，本文不講解這方面的基礎(chǔ)知識(shí)。
2. 有一定的 vue 2 開發(fā)經(jīng)驗(yàn)，本文不會(huì)講解 vue 基礎(chǔ)用法。
3. 建議有 canvas 基礎(chǔ)（沒有也沒關(guān)系）。

本文使用 vue-cli 進(jìn)行開發(fā)，所以會(huì)使用 npm 的方式安裝 G6 。

快速上手

快速上手 - 官方文檔

1、安裝

CDN 的方式很簡單，可以自行看文檔。

本文使用 vue-cli 進(jìn)行開發(fā)，所以會(huì)使用 npm 的方式安裝 G6 。

這里默認(rèn)讀者已經(jīng)使用 vue-cli 創(chuàng)建好一個(gè) vue 2 的項(xiàng)目了。

進(jìn)入創(chuàng)建好的 vue 項(xiàng)目，在終端輸入以下命令進(jìn)行安裝：

$ npm install --save @antv/g6

$ 號(hào)不需要輸入， $ 號(hào)代表命令。

安裝成功后可以在 node_modules 目錄查看到：在@antv 目錄下找到 g6 目錄，證明安裝成功了。

02.png

2、代碼+注釋

根據(jù)官方文檔提示，要快速創(chuàng)建圖表只需5大步驟。

1. 創(chuàng)建容器
2. 引入G6
3. 準(zhǔn)備數(shù)據(jù)
4. 創(chuàng)建關(guān)系圖
5. 匹配數(shù)據(jù)源并渲染

以上步驟，會(huì)在代碼中以“【步驟xxx】”的注釋方式一一對(duì)應(yīng)。

<template>
  <div class="page-x">
    <!-- 【步驟1】 創(chuàng)建容器 -->
    <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】 準(zhǔn)備數(shù)據(jù)
      graphData: {
        // 點(diǎn)集
        nodes: [
          {
            id: "node1", // String，該節(jié)點(diǎn)存在則必須，節(jié)點(diǎn)的唯一標(biāo)識(shí)
            x: 100, // Number，可選，節(jié)點(diǎn)位置的 x 值
            y: 200 // Number，可選，節(jié)點(diǎn)位置的 y 值
          },
          {
            id: "node2", // String，該節(jié)點(diǎn)存在則必須，節(jié)點(diǎn)的唯一標(biāo)識(shí)
            x: 300, // Number，可選，節(jié)點(diǎn)位置的 x 值
            y: 200 // Number，可選，節(jié)點(diǎn)位置的 y 值
          }
        ],
        // 邊集
        edges: [
          {
            source: "node1", // String，必須，起始點(diǎn) id
            target: "node2" // String，必須，目標(biāo)點(diǎn) id
          },
        ]
      }
    }
  },
  methods: {
    // 初始化關(guān)系圖，并渲染數(shù)據(jù)
    initGraph() {
      // 【步驟4】 創(chuàng)建關(guān)系圖
      const containerG6  = this.$refs.containerG6 // 獲取容器（DOM元素）
      this.graph = new G6.Graph({
        container: containerG6, // String | HTMLElement，必須，在 Step 1 中創(chuàng)建的容器 id 或容器本身
        width: containerG6.offsetWidth, // Number，必須，圖的寬度
        height: containerG6.offsetHeight // Number，必須，圖的高度
      })

      // 【步驟5】 匹配數(shù)據(jù)源并渲染
      this.graph.data(this.graphData) // 讀取 Step 2 中的數(shù)據(jù)源到圖上
      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>

效果如下圖所示

03.png

這個(gè)案例參考了官方的起步案例。

步驟3 的數(shù)據(jù)中，主要用到 nodes 和 edges 。

nodes 是所有點(diǎn)的集合，是數(shù)據(jù)類型。每個(gè)點(diǎn)都需要有一個(gè) id 屬性，且 id 是唯一的。

nodes 里的 x 和 y 代表該點(diǎn)在畫布中的位置。

本例的 edges 是依賴于 nodes 的。

edges 是所有邊的集合，是數(shù)組類型。需要畫多少條邊就有多少個(gè)對(duì)象元素。

每條邊需要一個(gè) source 和 一個(gè) target。

source 是指 起始點(diǎn)，值是 起始點(diǎn) 的 id 。

target 是指 目標(biāo)點(diǎn)，值是 目標(biāo)點(diǎn) 的 id 。

步驟4 使用 new G6.Graph 創(chuàng)建關(guān)系圖。

其中 container、width 和 height 是必填項(xiàng)。如果沒填這幾項(xiàng)會(huì)報(bào)錯(cuò)。

container 是容器的 id 或者容器實(shí)例。本例使用 vue 2 開發(fā)，所以使用了 $refs 獲取容器實(shí)例（本例中容器實(shí)例為 containerG6）。

width 是圖的寬度，本例使用了 containerG6.offsetWidth ，讓容器的寬度作為圖的寬度。

height 是圖的高度，本例使用了 `containerG6.offsetHeight，讓容器的高度作為圖的高度。

步驟5

使用 graph.data() 來初始化圖數(shù)據(jù)。傳入的參數(shù)就是 步驟2 中準(zhǔn)備的數(shù)據(jù)。

使用 graph.render() 方法把數(shù)據(jù)渲染出來。

graph.data() 官方文檔

graph.render() 官網(wǎng)文檔

3、源碼地址

本例源碼地址

這個(gè)項(xiàng)目里還是用了 vue-router 進(jìn)行開發(fā)，但 vue-router 部分不會(huì)影響 G6 的使用。

本例所參考的文獻(xiàn)

延伸閱讀

G6 國內(nèi)官網(wǎng)

G6官方快速上手文檔

本例源碼地址（歡迎Star，長期維護(hù)）