关于在vue中使用echarts时碰到的问题: Error Initialize failed invalid dom

今天在使用echarts时碰到的一个小问题，记录一下：

首先，如何使用echarts：

// 1：npm安装依赖
npm install echarts --save
// 2：引入echarts
import * as echarts from 'echarts'; // 注意：这里要 * as echarts 而不是 import echarts from xxx
// 3：需要一个显示echarts的出口
<div id="hello-world"></div>
// 4：初始化：基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('hello-world'));
myChart.setOption({ // 绘制图表
	title: {
	   text: 'ECharts 入门示例'
	},
	tooltip: {},
	xAxis: {
	   data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
	},
	yAxis: {},
	series: [{
	   name: '销量',
	   type: 'bar',
	   data: [5, 20, 36, 10, 10, 20]
	}]
});

 这里主要说一下第四步碰到的问题：

 1 可能会报错："Error: Initialize failed: invalid dom."

   原因是dom还没挂载完成，导致报错，这里有几个处理办法：

   1.1 这里不要用created（用mounted），created这时候还只是创建了实例，但模板还没挂载完成
   1.2 用this.$nextTick(()=>{}) (这个回调函数会在数据挂载更新完之后执行，所以可行)
   1.3 使用Promise

代码如下：

mounted() {
	// this.$nextTick(()=>{
		 this.initData()
	// })
	// // 新建一个promise对象
	// let newPromise = new Promise((resolve) => {
	//   resolve()
	// })
	// //然后异步执行echarts的初始化函数
	// newPromise.then(() => {
	//   //	此dom为echarts图标展示dom
	//   this.initData()
	// })
},

2 Echarts显示的出口标签（<div id="hello-world"></div>），一定要设置宽高，否则不会显示