Error: Initialize failed: invalid dom加载出现的问题

1.错误信息如图在这里插入图片描述
2.讲解
实际值虽然初始化了但是实际上还没渲染到dom上,
3.解决方法

// 方法1
function initEcharts () {
    // 新建一个promise对象
    let newPromise = new Promise((resolve) => {
        resolve()
    })
    //然后异步执行echarts的初始化函数
    newPromise.then(() => {
        //  此dom为echarts图标展示dom
        echarts.init(DOm)
    })
}

// 方法2
//这里不要用created(用mounted),created这时候还只是创建了实例,但模板还没挂载完成
mounted() {
   this.initData()
}

// 方法3
//用this.$nextTick(()=>{}) (这个回调函数会在数据挂载更新完之后执行,所以可行
this.$nextTick(() => {
        charts = this.$echarts.init(this.$refs.echart)
        charts.clear()
        charts.resize()
        charts.setOption(option)
        this.loading = false
 })

//方法4
this.$nextTick(() => {
        this.initChart()
      })
出现错误"Error: Initialize failed: invalid dom."的原因是在切换页面时,由于DOM被销毁,图表的DOM元素无法找到导致的。这个错误可以通过添加一个判断来解决。在切换页面时,判断DOM元素是否存在,如果存在,则进行图表的初始化和渲染操作,如果不存在,则跳过该操作。这样可以避免在DOM元素销毁后仍然尝试渲染图表而导致的错误。下面是一个示例代码片段: ``` pieChart() { if (chartDom) { const myChart = echarts.init(chartDom) const option = { // 图表的配置项和数据 } option && myChart.setOption(option) } } ``` 通过这样的判断,可以避免在找不到DOM元素时进行图表初始化,从而解决"Error: Initialize failed: invalid dom."的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue使用echarts报错:Error: Initialize failed: invalid dom.](https://blog.csdn.net/qq_44179024/article/details/129183480)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [Echarts报错: Error in v-on handler: “Error: Initialize failed: invalid dom.](https://blog.csdn.net/yolo_link/article/details/125561996)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值