echart组件结合tab，宽度变成100px

最新推荐文章于 2023-11-09 10:01:57 发布
最新推荐文章于 2023-11-09 10:01:57 发布
阅读量245 收藏 1
点赞数
分类专栏： 前端 文章标签： echart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nuoyuezuo/article/details/123737562
版权 
原因是在页面进行加载时，父容器最初是被隐藏的，宽高为0。隐藏的图表找不到对应的div大小，所以默认给了一个大小。
解决：
其他方法都试过没什么用
这个可以：
element UI 官方提供的 lazy="true" 延迟加载，也就是待tab页切换时，父容器tab渲染完毕再去渲染子组件

在这里插入图片描述

兔老大的胡萝卜
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-echarts在tab切换中的图表显示宽度为100px
weixin_34239169的博客
05-24 2001
2019独角兽企业重金招聘Python工程师标准>>> ...
1.Echarts的坑：切换tab时，echart显示默认的100px
ME_GIRL的博客
06-12 641
1.切换tab时，echart显示默认的100px 切换tab时，elementUI的原理设置v-show 元素被隐藏,切换的时候echart 获取不到父元素高度 1.2 效果 1.3 解决方法 切换tab时先销毁然后再init（注意：要在this.$nextTick中进行操作，确保能获取到dom） this.$nextTick(() => { this.$echarts.init(document.getElementById("element")).dispose()
echarts在tab切换时容器宽度设置为100%，只展示100px
qq_43789643的博客
05-25 184
mychart.setOption(option); 后面加上 mychart.resize();
tab和echart
wojiaowuyali的博客
12-12 274
tab切换里面在加载不同的echarts报错getAttribute错误 是因为获取的时候dom节点的时候出错了 需要setTimeOut才可以获取到节点 需要在onChange中获取节点 最好才用ref去获取节点 在tab里面封装一个公共组件的话 组件渲染需要在willReceiveProps里面执行 父组件传递props就好   ...
用tab做echarts图表切换的案例
weixin_46679775的博客
09-14 1120
echarts做tab切换是解决各种报错问题
vue tab切换,解决echartst图表宽度只有100px的问题
12-28
解决思路：直接将图表的宽高写死，根据实际代码进行改写，提供一个思路 1.将图表放进一个div里面 <div id=myChart xss=removed></div> 2.定义一个方法，并在mounted视图更新的时候执行 [removed] ...
Vue解决echart在element的tab切换时显示不正确问题
10-15
然而，在与Element UI的Tab组件结合使用时，可能会遇到ECharts图表在切换Tab时显示不正常的问题。这个问题通常表现为图表的宽度或高度计算错误，导致图表没有正确地适应Tab内容区域。 问题的根本原因是，ECharts在...
vue组件开发之tab切换组件使用详解
10-14
本文主要介绍了Vue.js框架中如何开发一个tab切换组件。在Vue.js开发中，创建组件是经常会用到的功能，而tab切换组件是一种常见的交互模式，广泛应用于网页中对内容进行分类展示和快速切换的场景。通过实例代码，本文...
Vue切换Tab动态渲染组件的操作
10-14
在前端开发框架Vue.js中，动态渲染组件是一种常见且重要的技术手段，特别是在实现标签页（Tab）切换功能时。本文将详细讲解如何使用Vue实现Tab切换和动态渲染组件的操作。 首先，动态组件是Vue框架中一个十分实用的...
echart宽度100px原因（解决el-tabs里的echarts图表宽度不自适应，只有100px问题）
最新发布
IT_dabai的博客
11-09 2396
首先echart初始化的组件宽度设置了width: 100%，那么本来这个时候，echart图表会根据父级自适应宽度。但因为el-tabs标签页，一开始的状态是display：none，也就是没有宽度，这个时候ehcart获取不到父级宽度，就会默认的给一个100px的宽度
解决echart在tab中切换时显示不正确
u011599033的博客
05-26 2368
在VUE使用Element UI时，在el-tab-pane添加上lazy=’true’属性即可 <el-tab-pane label="远程测试控制" name="远程测试控制" lazy="true"> <remoteTestControl /> </el-tab-pane> 其他解决方法详见以下，作者写得很好，在不同的UI框架中遇到这种情况的解决方法 https://www.cnblogs.com/hao-1
Vue第3篇，在Vue项目中，点击切换tab栏时Echarts图表缩小在一起，宽高只有100px，解决方法（echarts图表缩小在一起，echarts图表大小随窗口变动而自适应，无需刷新）
weixin_65793170的博客
10-31 4503
ECharts（Enterprise Charts）是百度开发的一款基于 JavaScript 的开源可视化图表库，用于在 Web 页面中创建各种丰富多彩的交互式图表和数据可视化界面。这里来记录一下，在使用ECharts时，拖拽页面后，ECharts缩小的问题
echarts切换tab时，第一个图表显示，第二个图表不显示的解决办法
热门推荐
AinUser的博客
05-12 1万+
首先这种情况，我在网上看到了好多人问，确实也有正解，但是只是说出了其错误出现的原因，并没有给出解决方法。 我也是深受其害，所以呢，在这里记录一下，分享给还在困扰着的你们，迅速找出解决办法。 首先，我先简单介绍一下，我这里出现错误的情境。 原来刚刚遇到这个问题的时候，是在点击多个tab选项之后，出现了地图不显示的情况，然后呢，我就一直在根据打开多个tab之后，地图不显示这个思路进行寻找bu
echart多个tab页切换显示不完整
qq_36573282的博客
04-18 1136
在使用tab页切换显示多个echart图的时候，第一张图之后的图会显示不完整。 在setOption操作后，使用resize方法可以使图正常显示。不过需要加上延时，等待渲染完成。 getInfoChart.setOption(option,true); setTimeout(function(){ getInfoChart.resize(); },300); ...
解决Echarts使用tab切换时只显示第一个tab中图表，其他tab中图表不显示或显示不全问题
sx_lidan的博客
08-27 9456
近期项目中使用到了Echarts来在展示图表，两个tab切换页面中都存在图表，页面加载完成后都对所有图表进行了初始化和绘制，然而在tab切换中出现了如下动图中的问题： 说明：图中可以看到，第一个tab显示是很正常的，但是第二个tab中内容显示不完整。 我的解决方法是：设置被选中监听函数，在第二个tab被选中时初始化图表： $(".js-flow-unit").on("click",...
tab选项卡切换时echarts无法正常加载显示问题的解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
02-29 2613
项目需求： 点击“日统计”、“周统计”、“月统计”实现加载三个echarts的折线图。 问题反馈： 实际操作过程后中，点击第一个tab是加载echarts图表的，第二、三……个显示空白。 问题测试： 在测试过程中，如果在span中写入文本的话，切换tab选项卡，是有对应的文本出现的，只是echarts加载有问题，排除TAB和JQ问题。 问题解决： 在页面进行加载时，隐藏的图表找不到对应的div...
el-tab切换时echarts图表宽度变为100px
qq_40576178的博客
12-15 1317
由于el-tabs切换的时候，不显示的tab内容默认通过display:none，所以导致echarts图表为100px 解决办法: 在图表上使用v-if来解决 <carbonEmissionMonitoring v-if="threeMenuName=='碳排放监测'"></carbonEmissionMonitoring> carbonEmissionMonitoring是封装的图表组件，给组件上设置v-if即可解决el-tabs切换问题 ...
在使用echarts时写在tab页中的图表宽度明明设成了100%在页面上实际却只有100px宽
weixin_45109154的博客
01-12 887
原因是(tab切换一开始显示的不是echarts组件, 这就导致容器一开始是display: none; 隐藏状态, 此时获取不到echarts的dom元素(从页面消失, 脱离文档流), 所以echarts就默认给自己设置了100px的宽 解决办法 我是在判断图表是否存在后，去计算了el-tabs的宽，赋值给图表。代码如下： document.getElementById('creditLine1').style.width = document.getElementsByClassName('el-..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值