wx-f2如何完成延迟加载！就是在完成请求之后，将数据加载到图表中

[xpfei306]

• F2 Version:
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:

[chaucerling]

需要改一下封装的组件

// components/f2.js
import F2 from '@antv/f2';

function wrapEvent (e) {
  if (!e) return
  if (!e.preventDefault) {
    e.preventDefault = function () {}
  }
  return e
}

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))
    }
  }
})

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

[callmesoul]

最基本的异步都要改一下？

[wangjie605620873]

这是需要修改node_modules文件下的组件，在重新build生成dist文件，然后在重新构建小程序npm吗