vue+eltabs+echarts,tabs切换echarts不会渲染问题

项目场景:

elementui的el-tabs+echarts,tabs循环渲染生成,每个页面都有相同的echarts图,只是数据不一样


问题描述:

在切换tabs过程时,数据能取到,但是echarts图不会被渲染;

循环遍历生成tabs

页面效果


原因分析:

在页面加载完成时,每个tabs中的内容都已经给生成了,所以现在页面中会有n个相同id的echarts(n为tabs的数量),因此在通过id获取echarts的div时会获取到多个,在切换tabs时并不会再次加载渲染。

解决方案:

问题的原因是因为id重复造成的,因此我们只需要让每个tabs下的echarts的id都不相同就能解决这个问题了。 在这里我的解决方案是把每个tabs下的echarts图的id后面都加上这个tabs所代表的设备的eurpmentId

解决方案
解决后的效果图


版权声明:本文为weixin_46144482原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。