echarts中遇见的问题Error Initialize failed invalid dom

今天写echarts

// 1：npm安装依赖
npm install echarts --save
// 2：引入echarts
import * as echarts from 'echarts'; // 注意：这里要 * as echarts 而不是 import echarts from xxx
// 3：需要一个显示echarts的出口

// 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()
	// })
},

Echarts显示的出口标签（

），一定要设置宽高，否则不会显示