G2筆記

G2是螞蟻金服的一套開(kāi)源圖表插件，因項(xiàng)目需要研究了一下，相比Echarts來(lái)說(shuō)，G2文檔比較難懂，網(wǎng)上也沒(méi)有太多示例，所以在這里記錄一些使用G2遇到的問(wèn)題。

官方推薦在vue項(xiàng)目中使用Viser，它對(duì)G2進(jìn)行了封裝，使用起來(lái)可能更方便，又研究了一個(gè)Viser，結(jié)果Viser整個(gè)只對(duì)viser-react如何使用進(jìn)行了介紹，對(duì)viser-vue一筆帶過(guò)，官網(wǎng)是這么介紹的：

我們以 viser-react 舉例寫(xiě)一個(gè) chore 圖為例，viser-vue 和 viser-ng 的用法類似。

結(jié)果用的時(shí)候發(fā)現(xiàn)這區(qū)別也太大了 : ( ，去github上找issue，還算有些收獲，但如何定制一個(gè)符合產(chǎn)品需求的圖形還是不知道啊，只能開(kāi)啃文檔，把G2和Viser的文檔比對(duì)來(lái)比對(duì)去，最后得出一個(gè)結(jié)論：

直接在vue中用G2比使用viser-vue更方便（因?yàn)関iser-vue一點(diǎn)文檔沒(méi)有啊?。?/p>

如果不懂G2的話，viser-vue是玩不轉(zhuǎn)的，所以還是先講G2。

1. 在vue中直接使用G2

安裝

npm install @antv/g2npm install @antv/data-set

DataSet必不可少，它是G2的數(shù)據(jù)處理模塊。

文件中引用

import G2 from '@antv/g2'import { View } from '@antv/data-set'

創(chuàng)建圖表

先創(chuàng)建一個(gè)圖表容器

<div id="funnelNode" ></div>

之后實(shí)例化chart對(duì)象，參考官網(wǎng)示例代碼，這里主要記錄如何修改一些配置屬性來(lái)定制符合需求的圖形。

 chart.on('interval:click', ev => {  //這里寫(xiě)自定義事件 })

此處使用interval:click是因?yàn)槁┒穲D對(duì)應(yīng)的geom類型是 interval （https://www.yuque.com/antv/g2-docs/tutorial-geom）。

2. 在vue中使用viser-vue：

安裝

npm install viser-vuenpm install @antv/data-set

main.js中全局引用

import Viser from 'viser-vue'Vue.use(Viser)

繪制圖表（以漏斗圖為例）

Viser官網(wǎng)給了基礎(chǔ)漏斗圖（其實(shí)是尖底漏斗圖）的例子，首先就是要把它改造成真的基礎(chǔ)漏斗圖（漏斗底部是方形），將示例代碼中的<v-pyramid>標(biāo)簽替換成<v-funnel>標(biāo)簽，因?yàn)樵贕2中“funnel”代表基礎(chǔ)漏斗，“pyramid”代表尖底漏斗，Viser封裝時(shí)也是基于此。

替換前：