新版怎么做延迟加载？

[ddscarf]

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

[TSjianjiao]

你是说等待请求完成后再setData初始函数吗

1. 初始化函数和f2组件显示必须几乎同时，所以在页面刚开始渲染的时候需要有个标志位控制f2组件隐藏和开启
2. 由于数据是外部给的，所以需要初始化函数要变成一个高阶函数 总结起来就像这样

data: {
   chartShow: false,
   initChart: null
},

// 假设这个函数请求数据
async getData() {
     const data = await requestData()
     this.setData({
         chartShow: true,
          initChart: (F2, config) => renderChar(F2, config, data)
     })
},

// renderChar就是你的chart配置
renderChar(F2, config, data) {
    const chart = new F2.chart(config)
    ...............
    return chart
}

[jsuper1980]

@TSjianjiao 按您的方法在开发工具里正常延迟加载了，但是上真机测试，直接闪退，另外用 chart.changeData(...) 也是闪退

[TSjianjiao]

@TSjianjiao 按您的方法在开发工具里正常延迟加载了，但是上真机测试，直接闪退，另外用 chart.changeData(...) 也是闪退

草，真会崩溃，除了第一个页面 只要是路由跳转的页面图表都会崩溃

[IFreeOvO]

你是说等待请求完成后再setData初始函数吗

1. 初始化函数和f2组件显示必须几乎同时，所以在页面刚开始渲染的时候需要有个标志位控制f2组件隐藏和开启
2. 由于数据是外部给的，所以需要初始化函数要变成一个高阶函数 总结起来就像这样

data: {
   chartShow: false,
   initChart: null
},

// 假设这个函数请求数据
async getData() {
     const data = await requestData()
     this.setData({
         chartShow: true,
          initChart: (F2, config) => renderChar(F2, config, data)
     })
},

// renderChar就是你的chart配置
renderChar(F2, config, data) {
    const chart = new F2.chart(config)
    ...............
    return chart
}

再把顺序改一下应该就对了 data: { chartShow: false, initChart: null },

// 假设这个函数请求数据，注意顺序，先初始化回调，再显示图表 async getData() { const data = await requestData() this.setData({ initChart: (F2, config) => renderChar(F2, config, data) },()=>{ chartShow: true }) },

// renderChar就是你的chart配置 renderChar(F2, config, data) { const chart = new F2.chart(config) ............... return chart }

[IFreeOvO]

你是说等待请求完成后再setData初始函数吗

1. 初始化函数和f2组件显示必须几乎同时，所以在页面刚开始渲染的时候需要有个标志位控制f2组件隐藏和开启
2. 由于数据是外部给的，所以需要初始化函数要变成一个高阶函数 总结起来就像这样

data: {
   chartShow: false,
   initChart: null
},

// 假设这个函数请求数据
async getData() {
     const data = await requestData()
     this.setData({
         chartShow: true,
          initChart: (F2, config) => renderChar(F2, config, data)
     })
},

// renderChar就是你的chart配置
renderChar(F2, config, data) {
    const chart = new F2.chart(config)
    ...............
    return chart
}

再把顺序改一下应该就对了 data: { chartShow: false, initChart: null },

// 假设这个函数请求数据，注意顺序，先初始化回调，再显示图表 async getData() { const data = await requestData() this.setData({ initChart: (F2, config) => renderChar(F2, config, data) },()=>{ chartShow: true }) },

// renderChar就是你的chart配置 renderChar(F2, config, data) { const chart = new F2.chart(config) ............... return chart }

[FRL1994]

请问是微信小程序端么？ 如果是微信小程序端的话，我封装了一个组件，不过，只能实现一个页面一个echart的显示，多个会报错。 需要的话，我随后发下代码。

[Jon-Millent]

  ready() {
    this.setData({
      onInitChart: this.data.onInitChart.bind(this)
    })
  }

[FRL1994]

邮件已接收，正在等待审阅过程中。。。。。