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 的用法類(lèi)似。

結(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/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)建一個(gè)圖表容器

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

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

• 漏斗圖分基礎(chǔ)漏斗圖（底部是方形）和尖底漏斗圖，兩者使用時(shí)的區(qū)別是實(shí)例化圖表時(shí)幾何標(biāo)記對(duì)象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 => {
  //這里寫(xiě)自定義事件
 })

此處使用interval:click是因?yàn)槁┒穲D對(duì)應(yīng)的geom類(lèi)型是 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封裝時(shí)也是基于此。

替換前：

 <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ì)的例子。

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

最新評(píng)論