[Vue warn]: Cannot read property ‘getAttribute‘ of null“

今天遇到一个这个问题
记录一下

运行vue出现的问题，后面网上搜了一下，
出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的
说直接点就是加载顺序的问题，然后找到了一个解决办法，使用vue的ref和$refs来解决

一般的写法，都是使用ID去绑定，比如

// html
<div id="charts">
	// xxxx
</div>

// js
drawCharts () {
	let previewChart = this.$echarts.init(document.getElementById('charts'))
	previewChart.setOption({
		// xxx
	})
}

这样子一般是没有问题的，但是如果遇到首次加载直接进入该页面，就会出现上面的报错了，所以把这个改造一下就好了

// html
<div id="charts" ref="charts">
	// xxxx
</div>

// js
drawCharts () {
	// let previewChart = this.$echarts.init(document.getElementById('charts'))
	let bar_dev = this.$refs.charts
	if (bar_dev) {
		console.log('charts不为空')
		let previewChart = this.$echarts.init(bar_dev)
		previewChart.setOption({
			// xxx
		})
	}
}

通过$refs来做绑定就可以了