首页 > 其他分享 >echarts无法进行二次渲染的问题

echarts无法进行二次渲染的问题

时间:2022-11-01 11:55:28浏览次数:45  
标签:二次 渲染 init tab 数据 echarts

其实网上关于echarts图二次渲染失败的解决办法很多,不过我还是想记录一下自己的心路历程

这次的需求是在一个网页中有四个tab切换,第一个tab就有四个echarts图

每一个echarts图都是多列柱状图,就像这样

因为后端数据的原因,我需要一个接口发三次,把每次返回的,同类的数据存在同一个数组里,这样的话就意味着我第一个图就需要发三次请求,而后面两个图当然也分别需要三次请求

不考虑性能问题,我第一个tab暂时就需要发送9个请求

聪明的我这时选择了百度,用了监视属性监视柱状图数据是否变化,如果有变化就触发监视属性,重新执行echarts的init函数

在这时!!我发现数据有时候会以不同顺序返回,这时我用async和await解决了这个问题

这时候数据请求回来是顺序的了,但是!!我又发现第一个图有时会只渲染出两列数据和第二张图只有一列数据以及最后一张图的柱子完全不见了的情况

这时我百度的是:“echarts图渲染不出”

这时,我看到了“Echarts在二次渲染时没有图显示问题”,具体来说是这篇文章

https://blog.51cto.com/suer/5191058

不过上文中的“移除容器上的 _echarts_instance_ 属性”似乎下在了init下面,我直接将那一行代码写在了init上一行,像这样

最后也是顺利解决了问题

标签:二次,渲染,init,tab,数据,echarts
From: https://www.cnblogs.com/zzy-newblog/p/16847221.html

相关文章