微信小程序圖表組件 wx-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 組件來繪製圖表吧,這裏假設用戶已經初步瞭解微信小程序的基礎框架,如不瞭解,請先閱讀官網教程: 官方教程

以繪製柱狀圖爲例:

<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

組件 Github地址

github.com/antvis/wx-f…

F2 微信小程序圖表 Demo

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

快速體驗

  • 微信掃碼體驗

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

如何使用

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

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

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

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

npm install --production複製代碼

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

image

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

image

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

image

說明

  • @antv/f2-canvas 模塊爲 F2 的微信小程序圖表自定義組件,依賴於 @antv/wx-f2(F2 對於微信小程序進行的適配),請直接使用 @antv/f2-canvas

  • 若是須要單獨引入 F2 全局變量時,請安裝 @antv/wx-f2,如不須要,則不須要安裝。

  • 非 npm 包安裝的自定義組件使用方式見 custom-components 分支。

API

相關文章
相關標籤/搜索