关于echarts渲染完成事件finished/rendered

背景

• 需要自适应大小
• 需要loading加载。
• 效果如下

echarts加载完成事件API

1、events. rendered

• 官方介绍

2、events. finished

执行

• 在vue中

template

<div class="p-line-charts-out">
    <div v-show="!isLoading"  class="p-line-charts" ref="lineCharts"></div> <!--图表dom对象-->
    <dv-loading v-show="isLoading">Loading...</dv-loading> <!--loading组件-->
</div>

javascript

//渲染前
this.isLoading = true

this.chart = this.$echarts.init(this.$refs.lineCharts)
//渲染后
this.chart.on('finished',_=>{
        this.isLoading = true
        console.log(113, 'finished')
})

scss

<style lang="scss" scoped>
.p-line-charts-out{
  height: 100%;
  width: 100%;
  .p-line-charts {
    width: 100%!important;
    height: calc(100% - 25px)!important;
  }
}
</style>

• 但是finished事件有个问题，就是悬浮，点击事件也会触发钩子函数

解决方法-1

  const option = {...} //charts配置项

  let isFinished = false //标记 isFinished
  
  this.chart.on('finished',_=>{
    if(!isFinished){
      console.log('我只执行一次')
      isFinished = true
      this.isLoading = false //关闭loading
      this.chart.resize() //重新渲染charts大小
    }
    console.log(113, 'finished')
  })
  
  this.chart.setOption(option)

解决方法-2

      const chartsPromise = new Promise(resolve => {
        const option = {...} //echarts配置

        this.chart = this.$echarts.init(this.$refs.lineCharts)

        this.chart.on('finished',_=>{ 
          resolve() //把执行结果抛出去
        })

        this.chart.setOption(option)
      })
      
      //promise resolve
      chartsPromise.then(_=>{
        this.isLoading = false//Loading标识关闭
        setTimeout(_=>{
          this.chart.resize() //宏任务队列中切换echarts大小
        })
        console.log('渲染完成promise')
      })