G2筆記

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

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

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

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

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

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

1. 在vue中直接使用G2

安裝

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

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

文件中引用

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

創(chuàng)建圖表

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

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

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

• 漏斗圖分基礎(chǔ)漏斗圖（底部是方形）和尖底漏斗圖，兩者使用時的區(qū)別是實(shí)例化圖表時幾何標(biāo)記對象Geom的shape()方法，shape('funnel') 表示基礎(chǔ)漏斗，shape('pyramid') 表示尖底漏斗。（https://www.yuque.com/antv/g2-docs/api-geom）
• 關(guān)于圖表的事件處理（https://www.yuque.com/antv/g2-docs/tutorial-chart-event），官方文檔中有詳細(xì)介紹，這里只介紹漏斗圖點(diǎn)擊事件綁定方法，如下：

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

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

2. 在vue中使用viser-vue：

安裝

npm install viser-vue
npm 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封裝時也是基于此。

替換前：

 <v-pyramid
  :position="funnelOpts.position"
  :color="funnelOpts.color"
  ...
 />

替換后：

 <v-funnel
  :position="funnelOpts.position"
  :color="funnelOpts.color"
  ...
 />

如果需要加點(diǎn)擊事件，在<v-funnel>標(biāo)簽里使用:on-click綁定事件。

我的github項(xiàng)目地址：https://github.com/Inspiration1/asteroid,里面有詳細(xì)的例子。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論