F2的微信小程序使用

1.F2簡介及語法參照網(wǎng)址
https://www.yuque.com/antv/f2/miniprogram
2.F2的微信小程序圖表示例參照
https://github.com/antvis/wx-f2
3.@antv/f2-canvas 模塊為 F2 的微信小程序圖表自定義組件，依賴于 @antv/wx-f2(F2 對于微信小程序進行的適配)，請直接使用 @antv/f2-canvas。
https://github.com/antvis/f2-canvas

F2的微信小程序使用詳解

此教程適用于初步了解微信小程序基礎框架的用戶

1.創(chuàng)建標準小程序
2.在項目根目錄下，初始化創(chuàng)建package.json文件

npm init    /*此處如果直接使用官方npm install 可能會出現(xiàn)沒有node_modules錯誤*/

3.安裝npm install --production

npm install --production    /*建議使用--production選項，可以減少安裝一些業(yè)務無關的 npm 包，從而減少整個小程序包的大小*/

4.安裝微信小程序 F2 圖表組件

npm i @antv/f2-canvas

5.安裝好依賴包之后，運行

點擊開發(fā)者工具頂部詳情，勾選 使用npm模塊，再點擊菜單欄中工具下的構建npm即可運行

運行圖示.png

6.開始繪制柱狀圖

1.pages下創(chuàng)建單頁目錄，包含

    xx.js
    xx.json
    xx.wxml
    xx.wxss

2.各個文件內(nèi)容如下

xx.json 配置文件，引入 f2-canvas 組件，由于微信小程序組件名不允許包含數(shù)字，所以這里將其命名為 ff-canvas。
// index.json
{
  "usingComponents": {
    "ff-canvas": "@antv/f2-canvas"
  }
}

xx.wxml 視圖，使用 ff-canvas 組件，
其中 opts 是一個我們在 xx.js 中定義的對象，必設屬性，
它使得圖表能夠在頁面加載后被初始化并設置，詳見 xx.js 中的使用
<!--index.wxml-->
<view class="container">
  <ff-canvas id="column-dom" canvas-id="column" opts="{{ opts }}"></ff-canvas>
</view>

xx.wxss 定義 ff-canvas 組件寬、高度
#column-dom{
  height: 100%;
  width: 100%
}

x.js 邏輯處理，這里還需要引入 F2 用于繪制圖表，結構如下，注意路徑正確。
// index.js
import F2 from '@antv/wx-f2'; // 注：也可以不引入， initChart 方法已經(jīng)將 F2 傳入，如果需要引入，注意需要安裝 @antv/wx-f2 依賴

let chart = null;

function initChart(canvas, width, height, F2) { // 使用 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() {
  }
});

3說明與注意事項

由于 f2-canvas 組件主要是對小程序的畫布上下文和 html5 canvas 的上下文進行了適配以支持 F2 在小程序端的渲染，
所以 F2 能繪制什么圖表，小程序端就能繪制什么圖表，使用時也只需按照 F2 的語法來寫即可。
需要注意的是，在創(chuàng)建 chart 的時候，需要使用 'el' 屬性來指定容器，
對應 this.data.opts.onInit 方法形參中的 canvas 屬性，
另外該方法還會返回 width, height 屬性分別對應畫布的寬和高。

目前由于小程序不支持 document，所以 Guide.Html 輔助元素組件目前仍無法使用，其他 F2 的功能全部支持。

微信版本 >= 6.6.3
基礎庫版本 >= 2.2.1
開發(fā)者工具版本 >= 1.02.1808300

7.常見問題

Q1：如果報如下圖錯誤，檢查是否有在 .wxss 文件中為 ff-canvas 組件定義 width 和 height 樣式屬性，如沒有，加上即可，如此代碼所示：

報錯示圖

/**app.wxss**/
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} 

Q2：當圖表渲染出來之后，數(shù)據(jù)發(fā)生改變需要更新圖表數(shù)據(jù)時，可采用chart.changeData(data)；
如果存在多圖表時，可通過 this.selectComponent('#column-dom')，來獲取組件的實例

參考1  此處通過獲取數(shù)據(jù) 存儲在globalData中來實現(xiàn)數(shù)據(jù)更新
// 圖表渲染出來之后更新數(shù)據(jù)
let salesTrend = this.selectComponent('#line4-dom');
    salesTrend.chart.changeData(app.globalData.trade.salesTrendData.salesTrends)

Q3：進頁面通過異步請求獲取數(shù)據(jù)，可使用延遲加載的方式 lazyLoad

參考2（與參考1 互不相關）
 data: {
    salesTrendData: {
      lazyLoad: true   //延遲加載
    },
    ...
  },
當多圖表時，也可以以此方式繪制圖表（以其中某一個圖表舉例）
    //以下兩行寫在繪制圖表數(shù)據(jù)的地方
    let salesTrendChartComponent = this.selectComponent('#line-dom');
    salesTrendChartComponent.init(salesTrend)


function salesTrend(canvas, width, height, F2) {
  const data = app.globalData.index.salesTrendData.salesTrends
  //此處data數(shù)據(jù)可通過 異步獲取數(shù)據(jù)
  const chart = new F2.Chart({
    el: canvas,
    width,
    height
  });

  chart.source(data, {
    month: {
      range: [0, 1],
      ticks: [1, 2,3,4,5,6,7,8,9,10,11,12]
    },
    value: {
      tickCount: 10,
      formatter(val) {
        return val;
      }
    }
  });
  chart.legend({
    position: 'top'
  });
  chart.tooltip({
    custom: true, // 自定義 tooltip 內(nèi)容框
    onChange(obj) {
      const legend = chart.get('legendController').legends.top[0];
      const tooltipItems = obj.items;
      const legendItems = legend.items;
      const map = {};
      legendItems.map(item => {
        map[item.name] = Object.assign({}, item);
      });
      tooltipItems.map(item => {
        const { name, value } = item;
        if (map[name]) {
          map[name].value = value + '元';
        }
      });
      legend.setItems(Object.values(map));
    },
    onHide() {
      const legend = chart.get('legendController').legends.top[0];
      legend.setItems(chart.getLegendItems().country);
    }
  });

歡迎留下建議或者更好的解決方案。