layui的tab标签页与echarts图表产生的不显示问题

最新推荐文章于 2024-02-18 13:44:31 发布

原创最新推荐文章于 2024-02-18 13:44:31 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文讲述了在使用layui的tab组件时，遇到echarts图表无法正常显示的问题。通过分析发现，问题在于js执行时tab页尚未完全切换，导致图表宽度为0。最终采用延迟执行的方法，成功解决了这个问题，实现了良好的用户体验。

layui的tab标签页与echarts图表产生的不显示问题

先上图：
在这里插入图片描述

<div class="layui-tab">
	<ul class="layui-tab-title">
		<li class="web-tab">成品</li>
		<li class="layui-this web-tab">历史记录</li>
	</ul>
	<div class="layui-tab-content">
	......
	</div>
</div>

这里每个标签页都给了他一个class样式：web-tab，这个名字自己定，其作用主要是为了后面的click事件。

接下来添加点击事件：

var InventoryWasteMap = echarts.init($("#InventoryWasteMap")[0], "theme");//获取
$(".web-tab").click(function (e) {//点击事件
      InventoryWasteMap.resize();//重新加载宽高
});

在这里插入图片描述
还是出不来，看下到底是什么原因。。

在这里插入图片描述
所有宽度都没有获取到，且渲染的div中没有东西。。嗯？？

我重新打了断点执行了一下，好嘛，现实告诉我在js走到InventoryWasteMap.resize();这一步的时候，tab页面还没有切换过来，换言之就是还没有打开第一个tab页，这就导致即使重新加载渲染，获取到的宽度依旧只是0。

这我就有点想笑了，不说废话，最容易的解决办法上来。。

var InventoryWasteMap = echarts.init($("#InventoryWasteMap")[0], "theme");//获取
	$(".web-tab").click(function (e) {//点击事件
	setTimeout(function () {//延迟0.3s
	      InventoryWasteMap.resize();//重新加载宽高
	}, 300);
});

怎么样是不是很想笑？延迟执行无疑是最笨的办法，但架不住他有效啊，关键是用户体验也不差。。