先看官方实例代码:

import * as echarts from '../../ec-canvas/echarts';
let chart = null;
function initChart(canvas, width, height) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  var option = {
    color: ['#37a2da', '#32c5e9', '#67e0e3'],
  
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  },
  onReady() {
    setTimeout(function () {
      // 获取 chart 实例的方式
      console.log(chart)
    }, 2000);
  }
});

简单解释一下,这个页面首先在全局声明了一个空的chart对象,然后在页面的data里面有一个ec对象,里面有个onInit属性。
ecahrt的初始化逻辑是在页面一进来的时候如果ec对象里面有函数就会被执行。如果ec里面配置了 lazyLoad: true就需要手动触发初始化方法。
如果你没有把图表封装成组件,向上面这样写就没问题。
但是如果你有多个页面公用了这一个文件就会导致一个问题,A页面初始化之后的全局chart这个变量会被B页面重新赋值。
如果从B页面通过返回按钮回到A页面的时候,这时候你再用setOption方法更新图表的时候就不是A页面一开始初始化的那个实例了。

如果有上面我说的这种业务需求就需要使用lazyLoad的方式,手动初始化echart,改成下面这样


Component({

 // data: {
 //   ec: {
 //     onInit: initChart //这种方式就是页面加载的时候echart会检测ec对象里面的值是是否有一个初始化方法
 //   }
 // },
  data: {

    ec: {
      lazyLoad: true
    }
    ...

然后写一个手动初始化的方法,例如这样:

Component({
  properties: {
    name: {
      type: String,
      value: '默认name'
    }
  },
  data: {
    ec: {
      lazyLoad: true
    }
  },
  methods: {
    init(title) {
      let name = this.data.name
      this.chartDom = this.selectComponent('#' + name)
      let optData = {
        title
      }
      this.chartDom.init((canvas, width, height) => {
        initChart(canvas, width, height,optData)
      });
    }
  }
})

像上面每次更新数据的时候就在页面里面去出发子组件的init方法,然后把数据通过参数传进来进行更新,这样做就不怕多个页面里面的echart实例冲突了。

转载请注明来自:爱前端

发表评论

电子邮件地址不会被公开。 必填项已用*标注