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

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

嵟鍕

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

阅读量2k

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/CJ_ML/article/details/107223137

版权

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

摘要由CSDN通过智能技术生成

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();//重新加载宽高
});

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