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

時間 2019-11-08

標籤微信程序圖表組件 f2 简体版

原文原文鏈接

轉載：https://www.jianshu.com/p/6b9fe45f799f

Github地址：github.com/antvis/wx-f…
AntV F2地址： AntV F2html

https://antv.alipay.com/zh-cn/f2/3.x/demo/

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

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

wx-f2

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

快速體驗

微信掃碼體驗

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

文檔結構

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

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

如下是目錄結構說明：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 的按需加載）替換。api

快速開始

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

以繪製柱狀圖爲例：

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

組件 Github地址

github.com/antvis/wx-f…

F2 微信小程序圖表 Demo

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

快速體驗

微信掃碼體驗

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

如何使用

本 demo 圖表使用微信小程序 F2 自定義圖表組件 f2-canvas 繪製，故須要微信小程序支持使用 npm 安裝第三包。 重要：版本要求

小程序基礎庫版本 2.2.1 或以上
開發者工具 1.02.1808300 或以上開始，小程序支持使用 npm 安裝第三方包。

若是須要使用原始版本，請 checkout 該項目的分支： github.com/antvis/wx-f…

使用微信開發者工具打開此項目，而後在項目根目錄下運行：

npm install --production複製代碼

安裝好依賴包以後，點擊工具頂部菜單欄的詳情：

勾選「使用 npm 模塊」選項：

最後點擊開發者工具中的菜單欄：工具 --> 構建 npm 便可運行。

說明

@antv/f2-canvas 模塊爲 F2 的微信小程序圖表自定義組件，依賴於 @antv/wx-f2(F2 對於微信小程序進行的適配)，請直接使用 @antv/f2-canvas。
若是須要單獨引入 F2 全局變量時，請安裝 @antv/wx-f2，如不須要，則不須要安裝。
非 npm 包安裝的自定義組件使用方式見 custom-components 分支。