使用echarts报错Error: Initialize failed: invalid dom. 解决方法及详解

错误案例一
报错信息:

父组件中：
<echartsLine :id="numLine" v-if="numData" :lineData="numData"></echartsLine>
子组件中：
  <div :id="id" :style="`width:${width};height:${height}`"></div>

解决办法 :父组件传id必须在双引号内加单引号,让值成为string类型,子组件才能正确接收

正确示例：
<echartsLine :id="'numLine"' v-if="numData" :lineData="numData"></echartsLine>

错误案例二
报错信息:

created () {
    this.getOptions()
  },
  
 methods: {
    getOptions () {
      var chartDom = document.getElementById(this.id)
      var myChart = echarts.init(chartDom)
      var option

      option = {
        xAxis: {
          type: 'category',
          data: this.lineData[0]
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.lineData[1],
          type: 'line',
          smooth: true
        }]
      };

      option && myChart.setOption(option);
    }
  }

出现问题的原因: created 中元素还未挂载到页面,此时操作DOM则会报错.具体参考:https://cn.vuejs.org/v2/api/#created

解决办法:在mounted中调用操作元素方法,当页面执行到mounted时,此时该页面所有元素都已经挂载完成(不会保证所有的子组件也一起被挂载) 具体参考:https://cn.vuejs.org/v2/api/#mounted

正确实例
mounted () {
  this.getOptions()
}