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

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

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

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

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

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