h5做echarts图表Tab切换时图表被压缩或不显示的问题

Mylbestling

于 2018-10-16 16:23:09 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：总结文章标签： Echarts

本文链接：https://blog.csdn.net/qq_42279109/article/details/83090534

项目中遇到H5使用Echarts实现图表Tab切换时，图表出现被压缩或不显示的问题。解决方法是在切换时重新初始化或更新图表，通过调用Echarts的相应函数，确保每次切换都能完整显示图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中遇到的坑，在这里记录一下
单纯的写个tab切换图表，是这样显示的。。。

在这里插入图片描述
很明显的可以看出来在tab切换的时候第二张图表是被压缩显示的。
但是，只要我们在切换的时候调用一下被使用的函数，图表就会完整显示。
代码展示：

HTML
<div class="totalTab">
		<ul class="tab" style="margin-top: 10px;">
			<li class="cur">
				图一
			</li>
			<li>
				图二
			</li>
		</ul>
	</div>
	<!-- <span style="padding: 10px 0 0 0">一级指标均分动态图</span> -->
	<div class="on aa" id="pie" style="width: 100%;height:400px;">
	</div>
	<div class="aa" id="pie1" style="width: 100%;height:400px;">
</div>

css
<style type="text/css">
	.aa,.bb,.cc,.dd{margin:0;padding:0;display:none;}
	.tab,.secondTab,.threeTab,.fourTab{margin:0;padding:0;list-style:none;overflow:hidden;display: flex;justify-content:flex-end;}
	.tab li,.secondTab li,.threeTab li,.fourTab li{width:80px;hei