Vue使用echarts报错提示 vue.runtime.esm.js?2b0e:1897 Error: Initialize failed: invalid dom.

在Vue脚手架+antd搭建的项目中使用Antd的Tabs标签页进行切换时,B页面的Echarts不进行渲染,而且报错提示

Vue使用echarts报错提示 vue.runtime.esm.js?2b0e:1897 Error: Initialize failed: invalid dom._第1张图片
说Dom无效,思考了一下原因应该是切换页面后,本页面的dom还未渲染,但是已经调用了Echarts的函数所以才会出现这种情况。
所以我们可以在页面数据改变之后或者Dom改变之后再调用函数

    callback(key) { //Tabs点击跳转事件
      if (key == 2) {  //确认跳转到B页面
        this.$nextTick(() => {  //使用this.$nexTick方法进行渲染
          this.initEcharts2()  //Echarts的渲染函数
        })
      }
    },

this.$nextTick( () =>{
这里写函数
} )
因为Vue中的dom和数据改变都是异步进行的,而放在这里面则会等待数据和dom操作完毕之后才进行执行。

你可能感兴趣的:(echarts,vue.js)