elementUI 引入echarts 图表 报错 Error: Initialize failed: invalid dom.

 

 如上图，报错 Error in nextTick: "Error: Initialize failed: invalid dom."

dom未挂载完成，图表已经开始初始化了。

解决办法：

根据id获取图表信息换成，$refs拿取，且在初始化图表的时候加 this.$nextTick(() => ()})方法。

组件中代码如下：

<template>
  <div class="box">
    <div :ref="info[0].chartId" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'login',
  data () {
    return {
    }
  },
  props: [
    'info'
  ],
  methods: {
    initChart () {
      var myChart = echarts.init(this.$refs[this.info[0].chartId])
      myChart.setOption({
        title: {
          text: this.info[0].title
        },
        color: ['#91cc75', '#ee6666', '#73c0de', '#fac858', '#5470c6'],
        tooltip: {},
        xAxis: this.info[0].xAxis,
        yAxis: {},
        series: this.info[0].series
      })
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })
  }
}
</script>
<style scoped lang="scss">
.chart{
  width: 100%;
  height: 100%;
}
</style>