在vue中使用G2圖表作銷售漏斗

G2筆記

G2是螞蟻金服的一套開源圖表插件，因項目須要研究了一下，相比Echarts來講，G2文檔比較難懂，網上也沒有太多示例，因此在這裏記錄一些使用G2遇到的問題。

官方推薦在vue項目中使用Viser，它對G2進行了封裝，使用起來可能更方便，又研究了一下Viser，結果Viser整個只對viser-react如何使用進行了介紹，對viser-vue一筆帶過，官網是這麼介紹的：

咱們以 viser-react 舉例寫一個 chore 圖爲例，viser-vue 和 viser-ng 的用法相似。

結果用的時候發現這區別也太大了 : ( ，去github上找issue，還算有些收穫，但如何定製一個符合產品需求的圖形仍是不知道啊，只能開啃文檔，把G2和Viser的文檔比對來比對去，最後得出一個結論：
直接在vue中用G2比使用viser-vue更方便（由於viser-vue一點文檔沒有啊！）

若是不懂G2的話，viser-vue是玩不轉的，因此仍是先講G2。

1. 在vue中直接使用G2

1. 安裝

npm install @antv/g2

    npm install @antv/data-set

DataSet必不可少，它是G2的數據處理模塊。

1. 文件中引用

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

1. 建立圖表

先建立一個圖表容器

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

以後實例化chart對象，參考官網示例代碼，這裏主要記錄如何修改一些配置屬性來定製符合需求的圖形。

• 漏斗圖分基礎漏斗圖（底部是方形）和尖底漏斗圖，二者使用時的區別是實例化圖表時幾何標記對象Geom的shape()方法，shape('funnel') 表示基礎漏斗，shape('pyramid') 表示尖底漏斗。（https://www.yuque.com/antv/g2-docs/api-geom）
• 關於圖表的事件處理（https://www.yuque.com/antv/g2-docs/tutorial-chart-event），官方文檔中有詳細介紹，這裏只介紹漏斗圖點擊事件綁定方法，以下：

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

此處使用interval:click是由於漏斗圖對應的geom類型是 interval （https://www.yuque.com/antv/g2-docs/tutorial-geom）。

2. 在vue中使用viser-vue：

1. 安裝

npm install viser-vue

    npm install @antv/data-set

1. main.js中全局引用

import Viser from 'viser-vue'

    Vue.use(Viser)

1. 繪製圖表（以漏斗圖爲例）

Viser官網給了基礎漏斗圖（實際上是尖底漏斗圖）的例子，首先就是要把它改形成真的基礎漏斗圖（漏斗底部是方形），將示例代碼中的<v-pyramid>標籤替換成<v-funnel>標籤，由於在G2中「funnel」表明基礎漏斗，「pyramid」表明尖底漏斗，Viser封裝時也是基於此。

替換前：

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

替換後：

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

若是須要加點擊事件，在<v-funnel>標籤裏使用:on-click綁定事件。

個人github項目地址：https://github.com/Inspiration1/asteroid,裏面有詳細的例子。