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>
效果如下圖所示
這個案例參考了官方的起步案例。
步驟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() 方法把數據渲染出來。
3、源碼地址
這個項目裏還是用了 vue-router 進行開發，但 vue-router 部分不會影響 G6 的使用。