页面加载时echarts图表显示不全

页面加载时echarts图表显示不全

控制台报错：Initialize failed: invalid dom

原因：加载顺序不同。在vue中引用echarts的中，发现在模板dom还没加载的时候echarts.init() 就已经开始执行，所以会报错 Initialize failed: invalid dom

 

解决方案：

1）使用$nextTick()

　　this.$nextTick(() => {

          this.myEcharts() // echarts图表

        })

注：用this.$nextTick(()=>{}) (这个回调函数会在数据挂载更新完之后执行）

2）使用setTimeOut

 　　setTimeout(() => {

          this.myEcharts()

        }, 1)

 

参考：

(3条消息) 使用echart的图表中：Initialize failed: invalid dom 之 dom加载出现的问题_Y头!的博客-CSDN博客_echarts初始化时dom没有加载

Echarts使用时Error: Initialize failed: invalid dom加载出现的问题 - SegmentFault 思否