在使用echarts时写在tab页中的图表宽度明明设成了100%在页面上实际却只有100px宽

最新推荐文章于 2024-01-29 19:01:38 发布
最新推荐文章于 2024-01-29 19:01:38 发布
阅读量896 收藏 1
点赞数
文章标签： echarts javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45109154/article/details/122456398
版权
当Echarts图表置于Tab组件内，由于初始时图表容器可能为隐藏状态，导致图表宽度默认设置为100px。解决办法是在确保图表存在后，动态获取Tab的宽度并赋值给图表。
摘要由CSDN通过智能技术生成

在这里插入图片描述
在这里插入图片描述

原因是(tab切换一开始显示的不是echarts组件, 这就导致容器一开始是display: none; 隐藏状态, 此时获取不到echarts的dom元素(从页面消失, 脱离文档流), 所以echarts就默认给自己设置了100px的宽

解决办法
我是在判断图表是否存在后，去计算了el-tabs的宽，赋值给图表。代码如下：

 document.getElementById('creditLine1').style.width = document.getElementsByClassName(
最低0.47元/天 解锁文章
雨后还是雨
关注
vue tab切换,解决echartst图表宽度只有100px的问题
12-28
解决思路：直接将图表的宽高写死，根据实际代码进行改写，提供一个思路 1.将图表放进一个div里面 <div class=echarts> <div id=myChart xss=removed></div> 2.定义一个方法，并在mounted视图更新的时候执行 ...
echarts设置容器宽度设置为100%只显示100px宽度
呱呱的博客
12-13 6524
问题：前面的tab栏里面的柱形图表都是100%的宽度，最后一个换成折线图时出现宽度无法自适应的情况。 <div class="environmentChart" > <div class="chart-wrap" id="environmentChart"></div> </div> 解决一：通过...
使用echarts时设置大小为100%变成了100px
brilliantSt的博客
08-12 3653
问题描述： 在VUE项目中使用了echarts，使用了v-show让它最开始不显示出来，后面显示出来后发现图表的宽高变成了100px（默认值）。 问题分析： 这个是因为v-show隐藏是通过 display:none 来实现的，这时echarts就会变成默认的100px； 解决方法： 在图表显示出来后使用改图标的 resize 函数，如下代码： this.chart.setOption(chart2Options) this.$nextTick(()=>{ this.chart.resize() }
echarts图表宽度设置100%，结果echarts宽度只有100px，解决图表自适应宽度问题
时间在飞飞的博客
08-11 8575
问题 我的echarts在tab选项卡中显示，为了自适应，用来渲染图表的div的宽度为100%，但是charts渲染出来以后默认设置为了100px。 原因 图表的父容器 li 是隐藏的，我默认设置 display：none，图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后计算出来的图表就成了100px 解决方法有两种（一种是切换tab以后，li显示以后再初始化图表，二是给li中渲染图表的div提前设置好width 宽度） 第一种可以把图表的实例...
【echarts问题】设置echarts宽度100%，实际变成了100px
Pentoncos的博客
08-25 1204
最近在使用echarts+el-tabs，当我把宽度设置成100%后，当切换tabhu
bug: tab 标签页界面切换导致echarts图表默认宽度100px的问题
集电极
08-24 1610
最近在bootstrap中使用echarts，本来在一个页面显示全部图表时是正常的。后面使用tab标签页界面切换不同表格时碰到的一个echarts bug，tab切换时，默认页显示的图表没有委托，但echarts图表默认隐藏的时候，渲染的默认宽度是100px。问题原因：tab标签导致图表元素设置了display:none 属性值。
echarts同一页面中四个图表切换的js数据交互方法示例
10-18
本文主要介绍在同一页面中使用 echarts 实现四个图表切换的数据交互方法，并提供了一个示例。当用户点击不同的 tab 页时，通过 ajax 请求后台数据，并将请求得到的数据更新到对应的 echarts 图表中，从而实现数据的...
在layui tab控件中载入外部html页面的方法
10-16
在实际开发中，开发者应根据项目的具体需求和外部页面的特性来选择合适的嵌入方式。iframe适合于需要完全隔离的场景，ajax适合于追求页面性能和交互性的场景，script方式则适合于需要高度自定义加载逻辑的场景。在...
Vue解决echart在element的tab切换时显示不正确问题
10-15
然而，在与Element UI的Tab组件结合使用时，可能会遇到ECharts图表在切换Tab时显示不正常的问题。这个问题通常表现为图表的宽度或高度计算错误，导致图表没有正确地适应Tab内容区域。 问题的根本原因是，ECharts在...
解决echarts图宽度自适应问题，设置100%宽度显示100px
热门推荐
李瑞清的博客
06-05 1万+
问题 我的echarts在卡片里面，为了自适应，我设置.stat图表div的宽度为100%，但是默认设置为了100px。 <nz-card [ngStyle]="{display:statShow}" class="statInfo" [nzExtra]="statTemplate"> <div #statInfo class="stat"></div> </nz-card> 原因 图表的父容器statInfo是隐藏的，我默认设置 displ
Vue第3篇，在Vue项目中，点击切换tab栏时Echarts图表缩小在一起，宽高只有100px，解决方法（echarts图表缩小在一起，echarts图表大小随窗口变动而自适应，无需刷新）
weixin_65793170的博客
10-31 4620
ECharts（Enterprise Charts）是百度开发的一款基于 JavaScript 的开源可视化图表库，用于在 Web 页面中创建各种丰富多彩的交互式图表和数据可视化界面。这里来记录一下，在使用ECharts时，拖拽页面后，ECharts缩小的问题
解决在 element 的＜el-tabs＞ ＜el-tab-pane＞ 标签中使用echart图表设置宽度100%，结果显示100px问题
weixin_42001360的博客
08-16 951
解决在 element 的 标签中使用echart图表设置宽度100%，结果显示100px问题
Echarts 图表宽度设置100%，却只有 100px 问题
mocheng0的博客
08-02 2616
当无数据时，要用echarts.init(dom).dispose()来清除画布，而不能用clear。需求有图表数据时展示数据，无数据时展示'暂无数据'，且在有数据和无数据的切换过程中，图表正常显示。避免echarts图表宽度只有100px。......
Echarts的容器宽高使用rem，渲染出的图表很小的问题
cjhsyc的博客
01-19 1299
主要是因为div还没有创建出来echarts就已经加载了，因为获取不到宽高，所以会缩小在一起。 参考了几篇文章，我在echarts配置后加入如下代码，解决了问题： myChart.setOption(option); //延迟resize setTimeout(function (){ myChart.resize() },200) //随屏幕大小改变 window.addEventListener('resize',function(){ myChart.resize() }) .
【Echarts】Echarts 图表宽度设置100%，图表显示只有100px的问题
最新发布
m0_61049675的博客
01-29 1548
图表的父容器设置了 display：none，图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后显示出来的图表就只有100px；
echarts图表自适应屏幕宽度
我只会html
07-28 1577
修改图表的长度为100% 绘制图表后，添加窗口事件 经过以上设置，图表将实现不同尺寸大小屏幕的适配。
echarts图表宽度只有100px
xjh01的博客
10-01 998
原因是用了el-tab组件导致的，解决方法： var myChart=document.getElementById("#myChart"); //获取元素 //重要：给元素设置宽度 myChart.style.width=window.innerWidth+'px'; chartObj=echarts.init(myChart); //初始化图表 chartObj.setOption(option); //给图表配置设置 ...
echarts大小自适应，width=100%实际100px的问题
qq_40893035的博客
08-23 3574
1. 首先要在data中定义一个为null的空值，用来保存你实例化图表的对象 data() { return { // echarts图表 myCharts: null, // 获取网页可见区域宽 screenWidth: document.body.clientWidth, }; }, 2. 在mounted生命周期中定义新的onresize函数，获取当前的窗口大小，并将值赋值给data中定义的screenWidth，这样在wa
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值