在使用wx-f2时遇到了延迟加载问题，网上搜了很久找不到解决方案。

最主要原因是wx-f2进行了更新，使用了微信新版的canvas绘制，而网上大多只是照抄了readme里的内容，或是使用的老版本。新版本和老版本页面中主要区别在于：

1）老版本由于当时微信不支持npm install 而将文件夹拷贝到自己项目，并且引入ff-canvas；

新版本直接使用npm构建，项目中引入@antv/wx-f2

2）老版本在组件中绑定opts（Object），将初始化函数作为值放入opts中，opts: { onInit: initFunction }；

新版本不再有opts，直接将初始化函数绑定在onInit上，查看@/antv/wx-f2/index.js中的文件，发现在onReady时会触发onInit，所以无法做到延迟加载

后来终于在GitHub的issue中找到了类似问题，这里可以查看，我自己也做个整理，方便自己的学习。

1.修改@antv/wx-f2/index.js里的内容，请注意使用的版本，我这里是@2.1.1

搜索Component，定位到组件中的属性区域，修改为以下内容

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    onInit: {
      type: 'Function',
      value: () => {}
    },
    opts: {
      type: Object,
      value: {}
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  ready() {
    // 延时加载不执行 onInit
    if (this.data.opts.lazyLoad) return
    const query = wx.createSelectorQuery().in(this);
    query.select('.f2-canvas')
      .fields({
        node: true,
        size: true
      })
      .exec(res => {
        const { node, width, height } = res[0];
        const context = node.getContext('2d');
        const pixelRatio = wx.getSystemInfoSync().pixelRatio;
        // 高清设置
        node.width = width * pixelRatio;
        node.height = height * pixelRatio;

        const config = { context, width, height, pixelRatio };
        const chart = this.data.onInit(F2, config);
        if (chart) {
          this.chart = chart;
          this.canvasEl = chart.get('el');
        }
      });
  },

  /**
   * 组件的方法列表
   */
  methods: {
    lazyInit (func) {
      const query = wx.createSelectorQuery().in(this);
      query.select('.f2-canvas')
        .fields({
          node: true,
          size: true
        })
        .exec(res => {
          const { node, width, height } = res[0];
          const context = node.getContext('2d');
          const pixelRatio = wx.getSystemInfoSync().pixelRatio;
          // 高清设置
          node.width = width * pixelRatio;
          node.height = height * pixelRatio;

          const config = { context, width, height, pixelRatio };
          const chart = func(F2, config);
          if (chart) {
            this.chart = chart;
            this.canvasEl = chart.get('el');
          }
        });
    },
    touchStart(e) {
      const canvasEl = this.canvasEl;
      if (!canvasEl) {
        return;
      }
      canvasEl.dispatchEvent('touchstart', wrapEvent(e));
    },
    touchMove(e) {
      const canvasEl = this.canvasEl;
      if (!canvasEl) {
        return;
      }
      canvasEl.dispatchEvent('touchmove', wrapEvent(e));
    },
    touchEnd(e) {
      const canvasEl = this.canvasEl;
      if (!canvasEl) {
        return;
      }
      canvasEl.dispatchEvent('touchend', wrapEvent(e));
    }
  }
});

2.修改wxml文件，去除onInit

<f2 class="f2-chart" opts="{{opts}}" id="f2pie"/>

3.修改js文件，即可在异步加载结束后渲染图形

Page({
  data: {
    opts: {
      lazyLoad: true // 延迟加载组件
    },
    chartComponent: null
  },
  onLoad () {
    // 异步获取数据
    const self = this;
    wx.request({
      url: '',
      success: function (res) {
        let data = res.data;
        self.data.chartComponent = self.selectComponent('#f2pie');
        self.data.chartComponent.lazyInit((F2, config) => {
          const chart = new F2.Chart(config);
          chart.source(data);
          chart.render();
          self.chart = chart;
          return chart;
        });
      }
    })
  }
  }
})