微信小程序圖表組件 wx-f2

摘自 殺個程序猿祭天  https://www.jianshu.com/p/6b9fe45f799f

 

 

Github地址：https://github.com/antvis/wx-f2
AntV F2地址： AntV F2

微信小程序圖表組件 wx-f2，源於 F2，專爲移動而生
F2，專爲移動而生的可視化解決方案，特爲你們提供了微信小程序端版本，體積小巧，性能卓越，底層基於圖形語法，能夠提供很是豐富的圖表類型。

可使用微信掃描如下二維碼先體驗一番：

 

image

wx-f2

F2 的微信小程序版本，支持原生 F2 的全部功能，歡迎使用反饋。

快速體驗

• 微信掃碼體驗

<img src="https://gw.alipayobjects.com/zos/rmsportal/wmRJtPHkkoimGbPCeScc.jpg" width="344">

• 使用微信開發者工具打開此項目

文檔結構

本項目參考了 echarts-for-weixin 的封裝思路，即封裝一個自定義組件 <f2-canvas>，方便用戶使用，該組件位於 /f2-canvas 目錄下。

微信小程序自定義組件結構和使用請參考: 自定義組件

如下是目錄結構說明：

├── f2-canvas                    // f2-canvas 組件 │ ├── f2-canvas.js │ ├── f2-canvas.json │ ├── f2-canvas.wxml │ ├── f2-canvas.wxss │ └── lib // f2-canvas 組件依賴的類庫 │ ├── EventEmitter.min.js // 事件發射器，用於監聽、觸發事件， 3.1K │ ├── f2.js // f2 腳本（壓縮），155K │ └── renderer.js // f2 專爲適配微信小程序繪圖上下文 context 而封裝的僞 Canvas ├── pages // f2-canvas 組件使用示例 │ 

下載

因爲目前微信小程序中不支持經過 npm install 來安裝第三方的工具庫，因此須要將本項目中的 /f2-canvas 文件夾拷貝到本身的項目中以便使用。

注意

/f2-canvas/lib/ 目錄下的 f2.js 文件默認咱們會保證它始終爲 F2 最新穩定版。若有必要，也能夠由用戶本身編譯（如要使用 F2 的按需加載）替換。

快速開始

下面咱們就開始使用 f2-canvas 組件來繪製圖表吧，這裏假設用戶已經初步瞭解微信小程序的基礎框架，如不瞭解，請先閱讀官網教程： 官方教程。

以繪製柱狀圖爲例：

<img src="https://gw.alipayobjects.com/zos/rmsportal/aDmzXXwkPmUFLCXwXBvo.gif" width="332">

• STEP 1：在 pages 目錄下新建 column 目錄，該目錄須要包含如下幾個文件：

  • index.js
  • index.json
  • index.wxml
  • index.wxss

  各個文件的內容以下：

  • index.json 配置文件，引入 f2-canvas 組件，這裏須要注意路徑要正確，因爲微信小程序組件名不容許包含數字，因此這裏將其命名爲 ff-canvas

  // index.json { "usingComponents": { "ff-canvas": "../../../f2-canvas/f2-canvas" } } 

  • index.wxml 視圖，使用 ff-canvas 組件，其中 opts 是一個咱們在 index.js 中定義的對象，必設屬性，它使得圖表可以在頁面加載後被初始化並設置，詳見 index.js 中的使用。

  <!--index.wxml--> <view class="container"> <ff-canvas id="column-dom" canvas-id="column" opts="{{ opts }}"></ff-canvas> </view> 

  • index.js 邏輯處理，這裏還須要引入 F2 用於繪製圖表，結構以下，注意路徑正確。

  // index.js import F2 from '../../../f2-canvas/lib/f2'; let chart = null; function initChart(canvas, width, height) { // 使用 F2 繪製圖表 const data = [ { year: '1951 年', sales: 38 }, { year: '1952 年', sales: 52 }, { year: '1956 年', sales: 61 }, { year: '1957 年', sales: 145 }, { year: '1958 年', sales: 48 }, { year: '1959 年', sales: 38 }, { year: '1960 年', sales: 38 }, { year: '1962 年', sales: 38 }, ]; chart = new F2.Chart({ el: canvas, width, height }); chart.source(data, { sales: { tickCount: 5 } }); chart.tooltip({ showItemMarker: false, onShow(ev) { const { items } = ev; items[0].name = null; items[0].name = items[0].title; items[0].value = '¥ ' + items[0].value; } }); chart.interval().position('year*sales'); chart.render(); return chart; } Page({ data: { opts: { onInit: initChart } }, onReady() { } }); 

因爲 f2-canvas 組件主要是對小程序的畫布上下文和 html5 canvas 的上下文進行了適配以支持 F2 在小程序端的渲染，因此 F2 能繪製什麼圖表，小程序端就能繪製什麼圖表，使用時也只需按照 F2 的語法來寫便可。

本項目只展現了部分 demos，更全的見 AntV F2。

須要注意的是，在建立 chart 的時候，須要使用 'el' 屬性來指定容器，對應 this.data.opts.onInit 方法形參中的 canvas 屬性，另外該方法還會返回 width, height 屬性分別對應畫布的寬和高。

chart = new F2.Chart({ el: canvas, width, height }); 

不支持的功能

目前因爲小程序不支持 document，因此 Guide.Html 輔助元素組件目前仍沒法使用，其餘 F2 的功能所有支持。

微信版本要求

• 微信版本 >= 6.6.3
• 基礎庫版本 >= 1.9.91

如何貢獻

若是您在使用的過程當中碰到問題，能夠先經過 issues 看看有沒有相似的 bug 或者建議。

License

MIT license

<label for="" class="frm_label" style="float: left; width: 12em; margin-top: 0.3em; margin-right: 0px; font-size: 14px;">組件 Github地址</label>

https://github.com/antvis/wx-f2

做者：殺個程序猿祭天 連接：https://www.jianshu.com/p/6b9fe45f799f 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。