【笔记】vue 中使用 v-for 循环 echarts 时无法显示图表的问题

在vue-element-admin里获取动态数组v-for循环使用echarts画图时，发现无法正常显示图表

//html
<eChart :chartData="item.data" :ref="'data'+idx" :id="'data'+idx" v-for="(item,idx) in chartDatas"></eChart>

//javascript
this.chartDatas.forEach((item,idx)=>{
	this.$refs['data'+idx].drawChart();
})

此时会发现页面没有成功显示图表，此时控制台会报错

1、原因：经查，这是由于vue生命周期的问题，我们在第一步接收到数据后，会更新arr数组的长度（个数）来更新渲染DOM内容，如果接下来立即执行echarts画图方法，会发现refs数组为空，因为DOM还未更新完成，就去使用refs，当然找不到对应的refs了！

解决方法：需要在DOM更新完毕后，再调用执行echarts画图方法。可以使用 this.$nextTick方法，该方法作用相当于延迟调用，即在DOM更新的时候不会立即执行里面的函数，在DOM更新完成后再去执行里面的函数，有点类似JS中的同步操作和异步操作（setTimeout和promise）

this.$nextTick(()=>{
	this.chartDatas.forEach((item,idx)=>{
		this.$refs['data'+idx].drawChart();
	})
})

此时发现仍然不能显示图表，并且控制台依然报错

2、原因：使用v-for之后，ref相当于一个数组了，所以这里找不到对应ref的名称

解决方法：所以应该这样调用：this.$refs.arr[0]  或者 this.$refs[arr][0]这种方式来表示

//html
<eChart :chartData="item.data" ref="data" :id="'data'+idx" v-for="(item,idx) in chartDatas"></eChart>

//javascript
this.chartDatas.forEach((item,idx)=>{
	this.$refs['data'][idx].drawChart();
})

这是就能正常显示图表了