问题
如果在你的项目内有Tabs,并且在待点击的Tab下有echarts图表。点击此tab后可能会出现如下的情况:(图表被压缩)
解决
问题来源: 其实这个Tab下的内容在刚进入这个url时(点击这个tab前)已经被渲染好了,在你点击tab展开内容时就发生了这样的格式问题。
解决思路:
- 重新布局图表(让压缩的图表重新展开一下)。使用API:myChart.resize(),至于这个语句放到哪里,就看开发者自己了。有人放在定时器里,也有人放在点击事件里面。
- 延迟渲染:等点击Tab后再渲染图表。个人觉得是最方便、简单的办法(我用的Element组件库)。查看官方文档可以发现:
所以只需在原有的基础上,让lazy属性为true即可。
注:
尝试过很多方法,效果都不是很好,最后采用的2方法,还是看官方文档有用。
项目前后端分离,前端用的Vue+Element。bootstrap的tab和echarts图表也会产生一样的问题,相信也有类似延迟渲染的办法。