H5移動端vue項目中使用 Antv F2數據分析可視化圖表

項目須要求在移動端H5須要展現一些數據統計的圖表，雖然第一時間想到的是echarts，經常使用還有Highcharts，D3等，antv家族的圖表UI好看一些，再加上F2是移動端可視化方案因而就選擇F2，打開官網果真眼前一亮F2提供的正能知足需求，F2官網地址：https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html

初次使用記錄一下掘坑之路：

一，快速上手（此處參考官方api文檔就能夠完成https://www.yuque.com/antv/f2/getting-started）

1.習慣在vue裏面使用cnpm安裝，執行 cnpm install @antv/f2 --save

2.安裝完成以後就是使用了，根據api提供的引用方式在vue裏面是玩不轉的，涉及到圖表交互的須要點擊的圖表會報js錯誤（ 'interaction' is not a function），固然也不是沒有解決的辦法的，看過源碼會發現能夠修改引用路徑解決：

const F2 = require('@antv/f2/lib/index')複製代碼

二，開始使用

使用也特別的簡單，官方api給到的很是的詳細，首先須要建立 <canvas> 標籤，咱們就能夠進行簡單的圖表繪製:

1. 建立 Chart 圖表對象，指定圖表 ID、指定圖表的寬高、邊距等信息；

2. 載入圖表數據源；

3. 使用圖形語法進行圖表的繪製；

4. 渲染圖表。

在官方demo中選擇相應本身想要的圖表能夠查看到代碼，應用到vue項目中就能夠了，根據需求做相應的更改。

至此就能夠看到效果了，是否是很簡單大廠的東西就是香，真正作到了開箱即用！

三，效果展現