layui中tab切换echarts显示第二张为100px问题的解决方法

最新推荐文章于 2021-12-30 16:28:02 发布
最新推荐文章于 2021-12-30 16:28:02 发布
阅读量1.6k 收藏 7
点赞数 6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42143048/article/details/97495941
版权

最近在用layui做后台的页面，其中需要用到echarts，但是在tab切换中发现echarts在第一个tab显示正常，在第二个tab显示只要100px，导致echarts显示不全的问题，后来在网上找了一下，没有发现解决方法，但是同行们的一些解决其他问题的方法给了我一些思路，我想到了layui在tab切换时是利用tab下的div显示和隐藏来实现的，而echarts在你页面刷新的时候就渲染出来了，而第二个tab已经隐藏了，导致echarts自动获取dom的宽高无效，所以使用的是echarts默认的高宽，我想到了通过监听tab切换事件然后执行resize进行echarts的重新渲染。下面是我的代码在这里插入图片描述
在这里插入图片描述

xyvapor
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
layui的tab标签页与echarts图表产生的不显示问题
CJ_ML的博客
07-28 1912
layui的tab标签页与echarts图表产生的不显示问题 先上图：
layui的选项卡使用echarts显示多图，图表宽度显示异常
janthinasnail的博客
06-07 892
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta n..
layui中tab页面切换表格宽度异常
Keep_Slience的博客
04-13 1673
最近再使用使用layui进行开发，看到了一个问题挺有意思的，就是一个页面是一个tab页，刚进来时layui-table能够正常渲染，在切换之后发现除了进来的第一个页面都存在table宽度异常的问题，就像压缩饼干一样非常丑，不过这可难不倒我（哈哈哈哈） 解决思路： 在tab页面切换的时候重置相对应表格的尺寸即可解决 解决办法如下： 在选项卡切换的时候会有一个监听事件： element.on('tab(filter)', function(data){ console.log(this); //当前Tab标
解决layui数据表格显示图片不完整
Forever_and_ever的博客
01-20 1967
<table class="layui-table" id="activityTable" lay-data="{height:315, url:'activity/list',response:{statusName:'status',statusCode:'1',msgName:'msg'},done:function(res,curr,count){$('.layui-table-c...
layui框架中table数据表使用中，添加图片自适应宽度等比例展示图片，并且使行高自适应的解决方法
misterdongjing的专栏
04-19 5121
如图，使用layui做出的表格，图片默认行高按照单行文本的高度展示 此时的解决办法是自定义一个单元格样式，覆盖默认的样式即可： <style> .layui-table-cell { height: 100%; max-width: 100%; } </style> ...
layui数据表格中图片无法自适应问题
子枫Eric
08-21 1139
如图问题,图片只显示了一部分 这时只需要加入样式即可 <style> .layui-table-cell { height: 100px; width: 100px; max-width: 100%; } </style> 高低大小根据实际自行调节 ...
点击切换图片
01-28
在本文中，我们将深入探讨如何使用C#编程语言实现一个具备点击切换图片、自带提示音以及自动切换功能的图片查看器。这个应用的核心是利用Windows Forms或WPF框架来创建用户界面，并结合多媒体处理和定时器组件来实现...
西数硬盘C1门解决方法归纳.pdf
02-08
"西数硬盘C1门解决方法归纳.pdf" 西数硬盘的 C1门由来已久。西数绿盘的最大特色是低功耗和低噪音。为了最大限度降低功耗，西数在绿盘上采用了 IntelliPark 技术，该技术可以让磁头在闲置的时候自动归位到加载坡上。...
2023年全国计算机等级考试二级MSOffice高级应用PPT部分第1120套.docx
11-10
1. 修改指定幻灯片的版式，如第一张为“垂直排列标题与文本”，第二张为“标题和竖排文字”，第四张为“比较”。 2. 应用一个恰当的主题统一设计风格。 3. 在幻灯片母版中添加艺术字水印，内容为“员工守则”并旋转...
2019_2020学年新教材高中数学第五章统计与概率5.1.1.1总体与样本简单随机抽样课时作业新人教B版必修第二册
09-09
在某年明信片销售活动中，规定每 100 万张为一个开奖组，通过随机抽取的方式确定号码的后四位为 2 709 的为三等奖B．某车间包装一种产品，在自动包装的传送带上，每隔 30 分钟抽一包产品，检验其质量是否合格C．某...
操作系统课程设计-张为晓.pdf
10-08
调试分析中，晁子墨记录了解决遇到的问题和测试结果，最后给出了用户使用说明，使其他用户能够理解并运行他的程序。 其次，内存管理是操作系统中至关重要的部分，它涉及到如何分配、回收和优化内存使用。需求分析...
layui数据表格图片加载不全问题解决
weixin_42905245的博客
12-03 931
使用layui数据表格的时候发现渲染出来的图片不完整： 渲染出来是这样婶的： 解决方法可以使用done回调设置样式： cols: [[ //表头 {field: 'goods_title', title: '商品标题', align: 'center'}, {field: 'goods_thumb', title: '商品图片', align: 'center',templet:'<div><img src="{{d.goods_thumb}}" alt="
layui table表格带图片，图片显示不全问题
qq_30548105的博客
05-22 9957
这个平时没有注意过，今天有人问到，就记录一下吧 layui的表格使用非常简单，layui文档中已经非常详细，下面直接上代码了 1.jsp代码 <div class="demoTable"> <button class="layui-btn" data-type="publish">发布Banner</button> </...
切换组件echarts宽高不正常，100%变成100px问题
qq_41191401的博客
12-30 2102
解决echarts '%'失效问题
layui整合echarts容器宽度设置100%出现挤压问题
hjx154954264的博客
01-19 1741
使用layui写前端，使用echarts时，设置容器的宽度为100%时，渲染出来的图表被挤压现象（实际渲染出来的图表宽高分别为100px，100px）， 如图： 容器设置了宽度100% 显示的效果： 其实解决方案是我们可以在图表被渲染前，手动指定容器的宽度： 但是使用layui我碰到的问题是点击收缩左侧导航，整体屏幕宽度变大，表格宽度依旧是手动指定的那个宽度1100px,导致问题的出现： 出现...
layui选项卡与echarts结合导致的问题解决
星望
01-31 5342
问题描述 如下图，包含有A和B两个 选项卡，其中A选项卡是一个表格，B选项卡是一个echarts图，选项卡A如下图： 选项卡B如下图： 当点击选项卡B时，改变浏览器窗口大小，再点回选项卡A，会发现A中的数据表格下面的分页栏不见了，如下图： 当再次改变窗口大小时分页栏又再次出现 解决办法 出现问题原因大概是因为当窗口大小改变后选项卡中的数据表格获取不到正确的宽高。解决办法有点取巧： //加上下面...
Layer+Echarts构建弹出层折线图
热门推荐
vili_sky的博客
12-22 3万+
layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。 ECharts 通过提供方便丰富的可视化图表，极大缩短了用户与数据的距离。个人认为是最好用的可用来生成图表的插件。 现在使用Layer和Echarts构建弹出层折线图。
vue+layui默认选中第一个tab
qq_42370649的博客
07-07 5629
比较两张受电弓图片，第一张为正常受电弓图片，第二张为结构异常受电弓图片，找出第二张图片结构异常并定位异常位置，将异常位置圈出来并输出图片，生成c++代码
最新发布
06-06
为了对比两张受电弓图片，我们需要首先读取这两张图片。然后，我们可以使用图像处理算法来找出第二张图片中的结构异常，并定位异常位置。 以下是一个使用OpenCV库进行图像处理的C++代码示例： ```c++ #include <opencv2/opencv.hpp> #include <iostream> using namespace cv; using namespace std; int main() { // 读取两张受电弓图片 Mat img1 = imread("normal.jpg"); Mat img2 = imread("abnormal.jpg"); // 转换为灰度图像 cvtColor(img1, img1, COLOR_BGR2GRAY); cvtColor(img2, img2, COLOR_BGR2GRAY); // 计算两张图像的差异 Mat diff; absdiff(img1, img2, diff); // 阈值化处理 Mat thresh; threshold(diff, thresh, 50, 255, THRESH_BINARY); // 膨胀操作 Mat kernel = getStructuringElement(MORPH_RECT, Size(5, 5)); dilate(thresh, thresh, kernel); // 查找轮廓 vector<vector<Point>> contours; findContours(thresh, contours, RETR_EXTERNAL, CHAIN_APPROX_SIMPLE); // 在第二张图片上标记异常位置 Mat result = img2.clone(); for (int i = 0; i < contours.size(); i++) { Rect rect = boundingRect(contours[i]); rectangle(result, rect, Scalar(0, 0, 255), 2); } // 显示结果 imshow("Result", result); waitKey(0); return 0; } ``` 在上面的代码中，我们首先读取了两张受电弓图片，并将它们转换为灰度图像。然后，我们计算了两张图像的差异，并使用阈值化处理和膨胀操作来查找轮廓。最后，我们在第二张图片上标记了异常位置并输出了结果。 需要注意的是，在使用上述代码时，需要将`normal.jpg`和`abnormal.jpg`替换为实际的图片文件名。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值