Vue Echarts报错Initialize failed: invalid dom解决方法

 更新时间:2023年06月01日 14:23:28   作者:椿☽  
最近因为工作需要,用到了ECharts做图表,也遇到了问题,就来跟大家总结分享一下,下面这篇文章主要给大家介绍了关于Vue Echarts报错Initialize failed: invalid dom的解决方法,需要的朋友可以参考下

报错原因

dom还没挂载完成,echarts.init() 就已经开始执行

解决方法

1、不要用created(用mounted),created这时候还只是创建了实例,但模板还没挂载完成

  • created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图
  • mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作

也就是说created()方法是在页面加载前调用,此时dom还未加载。所以当 有改变dom的时候用mounted, 没有改变dom操作就用created

2、使用create情况下使用延迟加载

(1)setTimeout延迟加载

setTimeout()方法用于在指定毫秒数后调用

通过延迟加载getChart()方法,使DOM先于getChart方法加载,为DOM加载提供时间

(2)使用nextTick延迟加载

  created() {
    this.$nextTick(()=>{
      this.getchart();
    })
  },

3、用mounted还是会报错

最近发现有些友友用了mounted还是会报错,有查了查解决办法,发现有博主说可以将document.getElementId获取dom换为使用ref指向dom元素

<template>
  <!--1.设置DOM容器-->
  <div id="Charts" ref="Echarts" ></div>
</template>
<script>
//2.引入echartjs
import * as echarts from "echarts";
export default {
  name: "chart",
  created() {
    setTimeout(() => {
      this.getChart()
    }, 1000);
  },
  methods:{
    getChart(){
      // 3.定义图标对象myChart,初始化echarts实例
      let myChart=echarts.init(this.$refs.Echarts)
      // 4.添加配置项
      let options={
        title: {  //标题
          text: 'ECharts 入门示例',  //主标题文本
          left:150,
          top:10,
        },
        tooltip: {},
        xAxis: {  //配置要在 X 轴显示的项:
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},  //配置要在 Y 轴显示的项:
        series: [
          {
            name: '销量',
            type: 'bar', 
            data: [
              {"value":"5","date":"2022-4-8"},
              {"value":"8","date":"2023-4-8"},
            ],
          }
        ]
      }
      // 5.将配置给myChart
      myChart.setOption(options)
    }
  }
}
</script>
<style scoped>
#Charts{
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>

总结

到此这篇关于Vue Echarts报错Initialize failed: invalid dom解决的文章就介绍到这了,更多相关Echarts报错Initialize failed: invalid dom内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue.config.js使用代理配置真实请求url方式

    vue.config.js使用代理配置真实请求url方式

    这篇文章主要介绍了vue.config.js使用代理配置真实请求url方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue+element-ui实现主题切换功能

    vue+element-ui实现主题切换功能

    这篇文章主要介绍了vue+element-ui实现主题切换功能,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • vue-axios使用详解

    vue-axios使用详解

    本篇文章主要介绍了vue-axios使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • Vue单页面应用做预渲染的方法实例

    Vue单页面应用做预渲染的方法实例

    vue是一个单页面的应用,这导致一些爬虫和百度无法搜索到,如果你想针对你应用的其中某些页面进行SEO优化,让他们可以被爬虫和百度搜索到,你可以进行预渲染操作,下面这篇文章主要给大家介绍了关于Vue单页面应用做预渲染的相关资料,需要的朋友可以参考下
    2021-10-10
  • vue中$emit传递多个参(arguments和$event)

    vue中$emit传递多个参(arguments和$event)

    本文主要介绍了vue中$emit传递多个参(arguments和$event),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • vue3父子组件通信、兄弟组件实时通信方式

    vue3父子组件通信、兄弟组件实时通信方式

    这篇文章主要介绍了vue3父子组件通信、兄弟组件实时通信方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 在uni-app中使用element-ui的方法与报错解决

    在uni-app中使用element-ui的方法与报错解决

    我们在开web开发的时候,经常会使用到element或者uview-ui,下面这篇文章主要给大家介绍了关于在uni-app中使用element-ui的方法与报错解决的相关资料,需要的朋友可以参考下
    2022-04-04
  • Vue页面切换和a链接的本质区别详解

    Vue页面切换和a链接的本质区别详解

    今天小编就为大家分享一篇Vue页面切换和a链接的本质区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue 父子组件实现数据双向绑定效果的两种方式(案例代码)

    Vue 父子组件实现数据双向绑定效果的两种方式(案例代码)

    本文给大家分享Vue 父子组件实现数据双向绑定效果的两种方式,方式一是通过监听事件实现方式二是通过 v-model 实现,每种方式结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2022-11-11
  • vue开发移动端使用better-scroll时click事件失效的解决方案

    vue开发移动端使用better-scroll时click事件失效的解决方案

    这篇文章主要介绍了vue开发移动端使用better-scroll时click事件失效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-07-07

最新评论