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>