简单粗暴解决echarts宽度为100px问题

最新推荐文章于 2025-09-23 14:05:27 发布
原创 最新推荐文章于 2025-09-23 14:05:27 发布 · 6.3k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #echarts #elementui

在ElementUI的tabs组件内使用Echarts时，由于tabs的切换是通过display:none实现，导致除默认显示图表外，其他图表宽度变为100px。一种简单的解决方法是利用Vue的v-if指令，避免echarts在未显示时初始化。其他解决方案包括element.resize()、监听窗口resize事件或采用懒加载，但可能实施起来不那么直接有效。

问题出现场景

elementUI的tabs组件中使用echarts，在切换过程中，echarts宽高失效，只有100px。
问题原因： tabs中的标签是同时渲染的，通过display:none来控制标签的切换，所以除了默认展示的那个标签echarts100%能正常生效，其他的会默认为100px。

简单粗暴的解决方法： v-if

看了一些文章，有element.resize()的，也有window.addLisener(‘resize’)的，也有懒加载的。弄了半天没生效，我就简单粗暴的用v-if了
在这里插入图片描述在这里插入图片描述
结果
在这里插入图片描述在这里插入图片描述在这里插入图片描述

最低0.47元/天 解锁文章
解决element-plus加了clearable导致input宽度一直变化的问题
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
04-26 612
遇到 Element Plus 的<el-input>加了clearable宽度抖动问题，本质原因是它内部结构变化导致宽度跟着变了。给 el-input 固定宽度，保证它不管里面有什么都一动不动，稳得一批。顺带说一下，这个坑在表单、搜索栏、弹窗输入框这些场景特别容易踩，尤其是inline布局的时候。想要完整体验这个小坑，我还打包了一个GitHub示例和Vue3 Playground预览链接，有需要的可以自取～
vue tab切换,解决echartst图表宽度只有100px的问题
12-28
解决思路：直接将图表的宽高写死，根据实际代码进行改写，提供一个思路 1.将图表放进一个div里面 2.定义一个方法，并在mounted视图更新的时候执行 [removed] export default { mounted() { this.setMyChart(); }, methods: { setMyChart() { // jq写法 // 获取父元素 var echarts =
echarts高度设置height:100%不起作用
小武的博客
03-15 5204
echarts height:100%不起作用
【ECharts】v-show盒子宽度设置 100%， echarts渲染出来宽度100px
最新发布
qq_35227244的博客
09-23 342
摘要：使用echarts时遇到两个问题：1) v-show控制显示时图表宽度异常缩小；2)需要随父元素自适应宽度。原因发现是v-show的display:none导致echarts获取不到容器宽度，默认使用100px。解决方法是在setOption前调用resize()方法，强制重绘图表尺寸。注意resize()必须放在setOption之前执行，否则会报错。正确调用顺序为：先resize()调整尺寸，再setOption更新数据。该方案有效解决了图表显示异常和自适应问题。
vue中设置height:100%无效的问题及解决方法
12-29
在vue.js中写新的components的时候，如果在新页面中的模板中设置height：100%的时候一直无效。 App.vue文件 <template> <div id=app> <router> </div> </template> [removed] export default { name: 'App' } [removed] <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx
使用echarts宽度100%变成100px问题（一招搞定）
m0_48507640的博客
08-02 9565
**前言：**每个开发者在使用echarts制作图形过程中，多多少少都会踩到一些坑，比如图形宽高问题，图形清晰度问题。 今天要说的是当图形宽度设置是100%时，切换tab后变成了100px了，如果已经设置了自适应，那么手动去改变浏览器屏幕的宽，会发现图形又恢复正常了。 原因：切换tab时，元素本身就是存在的，只是样式被设置成display: none，那么宽高为0px；echarts对图形最小的默认为100px，所以就会出现这样的情况。 解决问题过程中，在网上看到的帖子里，发现很多并不能解决到问题。 比如：
echarts切换tab,图表设置宽度100%结果为100px
hantanxin的专栏
05-14 1223
当echarts绘制表格（也就是执行init方法）计算宽度的时候，由于初始化图表时外层div盒子的属性为display:none，所以无法获取到盒子的clientWidth（可视化宽度），而parseInt(stl.width,10)将宽度100%转换成了100（这里的stl.width，就是外层的div的样式中的width属性，因为我们初始时设置了100%，所以这里可以获取到），所以。，在监视中（watch），要配合nextTick方法使用，这样才能完全确保初始化之前，外部盒子已经存在于dom树中。
解决Echarts设置宽度为100%发现宽度变为100px的问题(Echarts图标宽度自适应问题)
Machel_的博客
07-16 3418
当我们点击全局统计(tab)的时候，由于Echart图标只会初始化一次，当第一次加载游戏设置（tab）的时候已经被初始化了，所以这个时候，虽然全局统计的display:none效果消失，图表容器width：100%起作用的时候，echart图表宽高仍然为100px。有的时候我们为了让Echarts自适应容器宽度，把Echarts容器宽度设置为100%，使容器宽度变化的时候，图表宽度也跟着变化。但是我们发现容器宽度变化的时候，图表宽度并不会跟着变化。但是点击全局统计加载图表，发现图表的宽度不符合预期。
vue3渲染echarts，父元素宽度100%，图表无法设置宽度100%
05-08
在 Vue3 中使用 ECharts 渘存图表时，如果遇到父元素宽度为 `100%` 而图表本身未能正确适配的情况，通常是因为初始化阶段 DOM 的尺寸未被正确识别或更新机制缺失所致。以下是详细的分析与解决方法： #### 原因解析 ...
简单粗暴 TensorFlow 2.0
10-12
简单粗暴 TensorFlow 2.0
简单粗暴学蓝牙4.0（CC2541篇）.pdf
03-25
根据提供的文件信息，以下是关于《简单粗暴学蓝牙4.0（CC2541篇）》的知识点总结： 1. 蓝牙4.0技术介绍 蓝牙4.0技术是蓝牙技术联盟（Bluetooth Special Interest Group，简称SIG）在2010年推出的蓝牙标准，具有低...
【Echarts】Echarts 图表宽度设置100%，图表显示只有100px的问题
m0_61049675的博客
01-29 1913
图表的父容器设置了 display：none，图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后显示出来的图表就只有100px；
echarts图表宽度只有100px
xjh01的博客
10-01 1152
原因是用了el-tab组件导致的，解决方法： var myChart=document.getElementById("#myChart"); //获取元素 //重要：给元素设置宽度 myChart.style.width=window.innerWidth+'px'; chartObj=echarts.init(myChart); //初始化图表 chartObj.setOption(option); //给图表配置设置 ...
echarts出现宽度变成100px的情景及解决方案
xu_xu_0924的博客
11-02 1466
1.tab页切换echarts图表时图表变形 var charts=new Array(); myChart.setOption(option); charts.push(myChart); //普遍的tab切换 $(window).resize(function() { for(var i = 0; i < charts.length; i++) { charts[i].resize(); }
echart宽度100px原因（解决el-tabs里的echarts图表宽度不自适应，只有100px问题）
IT_dabai的博客
11-09 3242
首先echart初始化的组件宽度设置了width: 100%，那么本来这个时候，echart图表会根据父级自适应宽度。但因为el-tabs标签页，一开始的状态是display：none，也就是没有宽度，这个时候ehcart获取不到父级宽度，就会默认的给一个100px的宽度
在el-tabs中使用echarts画图表时的宽高变成100px问题
濮家大少
05-15 1530
问题 最近做项目时遇到这样一个问题，使用el-tabs展示echarts图表时，只有在默认选中页里，echarts图标才能正常展示，其他页的echarts图表宽高都会变成100px。 原因 echarts绘制图表计算宽度的时候，由于第二个tab的属性display: none; 所以无法获取到clientWidth，而 parseInt(stl.width, 10)) 将width: 100%;转为100，所以计算出的图表宽度高度为100px。 解决方法 我原来是直接在el-tab中写的echarts绘图，
echarts设置容器宽度设置为100%只显示100px宽度
是程序喵呀
11-24 2614
原因很简单，在tab页中，图表的父容器div是隐藏的（display：none），图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后计算出来的图表就成了100px。在使用echarts时，写在tab页中的图表宽度明明设成了100%，但是在页面上实际却只有100px宽。好了废话少说直接说解决方案。echarts的width不能适应100%但是他的父级可以哦。Echarts在你不确定内容宽度时给他设置宽度为100%去适应宽度但是不能实现。
解决echarts图宽度自适应问题，设置100%宽度显示100px
tuoai9113的博客
07-10 328
1、原因：echarts图表的盒子使用了v-show或class隐藏样式引起的图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后计算出来的图表就成了100px。2、解决方法：nextTick（）实现echarts图表异步加载，让其走在DOM渲染之后。
Echarts图表宽度变成100px，让图表宽度随着父元素自动适应，Vue实时监听宽度的变化，这可能是史上最好的解决方案！...
weixin_34113453的博客
01-31 2038
最近工作中element后台管理使用Echarts图表，本后台项目分图表模式和列表模式，使用display控制显示隐藏，这样就引出了本文的问题。 问题1：Echarts图表宽度变成100px？ 问题2：怎么让Echarts图表宽度随着父元素自动适应？ 　　网上对于这两个的解决方案大同小异，手动的记录父元素的宽度，或者侦听display属性，解决方案要么感觉极其复杂，要么治标不治本， 这...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值