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

vue tytrock ⋅ 于 2023-04-19 10:30:32 ⋅ 1707 阅读

在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();
})

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

image.png


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();
})

这是就能正常显示图表了




本帖已被设为精华帖!
回复数量: 0
    暂无评论~~
    • 请注意单词拼写,以及中英文排版,参考此页
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
    • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
    • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
    • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
    Ctrl+Enter