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

最新推荐文章于 2025-05-13 11:34:16 发布
最新推荐文章于 2025-05-13 11:34:16 发布
阅读量6.2k 收藏 6
点赞数 5
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： 前端 echarts elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/manmanwei/article/details/112176058
在ElementUI的tabs组件内使用Echarts时，由于tabs的切换是通过display:none实现，导致除默认显示图表外，其他图表宽度变为100px。一种简单的解决方法是利用Vue的v-if指令，避免echarts在未显示时初始化。其他解决方案包括element.resize()、监听窗口resize事件或采用懒加载，但可能实施起来不那么直接有效。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题出现场景

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

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

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

最低0.47元/天 解锁文章
ECharts——初步使用 Bar渐变色设置
梦若辰宇的博客
11-27 6174
1.了解ECharts ECharts简介：http://echarts.baidu.com/echarts2/doc/about.html ECharts主页：http://echarts.baidu.com/index.html ECharts文档：http://www.echartsjs.com/option.html#title ECharts实例：http://echarts.b...
前端200道面试题及答案（更新中）
热门推荐
m0_65450343的博客
06-11 11万+
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
解决Echarts设置宽度为100%发现宽度变为100px的问题(Echarts图标宽度自适应问题)
Machel_的博客
07-16 3086
当我们点击全局统计(tab)的时候，由于Echart图标只会初始化一次，当第一次加载游戏设置（tab）的时候已经被初始化了，所以这个时候，虽然全局统计的display:none效果消失，图表容器width：100%起作用的时候，echart图表宽高仍然为100px。有的时候我们为了让Echarts自适应容器宽度，把Echarts容器宽度设置为100%，使容器宽度变化的时候，图表宽度也跟着变化。但是我们发现容器宽度变化的时候，图表宽度并不会跟着变化。但是点击全局统计加载图表，发现图表的宽度不符合预期。
vue tab切换,解决echartst图表宽度只有100px的问题
12-28
解决思路：直接将图表的宽高写死，根据实际代码进行改写，提供一个思路 1.将图表放进一个div里面 2.定义一个方法，并在mounted视图更新的时候执行 [removed] export default { mounted() { this.setMyChart(); }, methods: { setMyChart() { // jq写法 // 获取父元素 var echarts =
记录在弹框使用echarts,宽度100%变100px
最新发布
m0_56654689的博客
05-13 191
echarts宽度由100%变100px
使用echarts宽度100%变成100px问题（一招搞定）
m0_48507640的博客
08-02 9468
**前言：**每个开发者在使用echarts制作图形过程中，多多少少都会踩到一些坑，比如图形宽高问题，图形清晰度问题。 今天要说的是当图形宽度设置是100%时，切换tab后变成了100px了，如果已经设置了自适应，那么手动去改变浏览器屏幕的宽，会发现图形又恢复正常了。 原因：切换tab时，元素本身就是存在的，只是样式被设置成display: none，那么宽高为0px；echarts对图形最小的默认为100px，所以就会出现这样的情况。 解决问题过程中，在网上看到的帖子里，发现很多并不能解决到问题。 比如：
echarts切换tab,图表设置宽度100%结果为100px
hantanxin的专栏
05-14 1116
当echarts绘制表格（也就是执行init方法）计算宽度的时候，由于初始化图表时外层div盒子的属性为display:none，所以无法获取到盒子的clientWidth（可视化宽度），而parseInt(stl.width,10)将宽度100%转换成了100（这里的stl.width，就是外层的div的样式中的width属性，因为我们初始时设置了100%，所以这里可以获取到），所以。，在监视中（watch），要配合nextTick方法使用，这样才能完全确保初始化之前，外部盒子已经存在于dom树中。
【Echarts】Echarts 图表宽度设置100%，图表显示只有100px的问题
m0_61049675的博客
01-29 1818
图表的父容器设置了 display：none，图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后显示出来的图表就只有100px；
echarts图表宽度只有100px
xjh01的博客
10-01 1101
原因是用了el-tab组件导致的，解决方法： var myChart=document.getElementById("#myChart"); //获取元素 //重要：给元素设置宽度 myChart.style.width=window.innerWidth+'px'; chartObj=echarts.init(myChart); //初始化图表 chartObj.setOption(option); //给图表配置设置 ...
echarts graph 页面边距
04-28
在 ECharts 中，调整图表的...综上所述，无论是从 JS 内部还是外部着手都可以找到适合自己项目的合适途径去解决这个问题。每种方案都有各自的优缺点所以在实际开发过程中还需要根据具体情况权衡利弊做出最佳选择。 ---
echarts出现宽度变成100px的情景及解决方案
xu_xu_0924的博客
11-02 1410
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 3029
首先echart初始化的组件宽度设置了width: 100%，那么本来这个时候，echart图表会根据父级自适应宽度。但因为el-tabs标签页，一开始的状态是display：none，也就是没有宽度，这个时候ehcart获取不到父级宽度，就会默认的给一个100px的宽度
echarts设置容器宽度设置为100%只显示100px宽度
是程序喵呀
11-24 2511
原因很简单，在tab页中，图表的父容器div是隐藏的（display：none），图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后计算出来的图表就成了100px。在使用echarts时，写在tab页中的图表宽度明明设成了100%，但是在页面上实际却只有100px宽。好了废话少说直接说解决方案。echarts的width不能适应100%但是他的父级可以哦。Echarts在你不确定内容宽度时给他设置宽度为100%去适应宽度但是不能实现。
Echarts图表宽度变成100px，让图表宽度随着父元素自动适应，Vue实时监听宽度的变化，这可能是史上最好的解决方案！...
weixin_34113453的博客
01-31 1990
最近工作中element后台管理使用Echarts图表，本后台项目分图表模式和列表模式，使用display控制显示隐藏，这样就引出了本文的问题。 问题1：Echarts图表宽度变成100px？ 问题2：怎么让Echarts图表宽度随着父元素自动适应？ 　　网上对于这两个的解决方案大同小异，手动的记录父元素的宽度，或者侦听display属性，解决方案要么感觉极其复杂，要么治标不治本， 这...
echart图表设置宽度100%，结果显示100px问题解决
qq_45949366的博客
08-07 3330
echarts结合tab时，初次渲染组件moutnted的时候，未显示tab内的组件display为none，echarts无法获取父组件的高度100%，而转换成100px显示； 有网友通过 mounted的时候获取window.innerWidth，根据innerwidth设置echarts的宽幅，如：domBugChart.style.width = window.innerWidth * 0.8 + ‘px’; 但这也相当于写死，如果window.innerWidth发生改变，echarts无法自适.
echarts宽度100px问题
前端劝退工程师
03-07 1677
tab切换时发现设置了容器的宽度 都会渲染成100px 解决办法 myChart.resize()
Vue渲染echarts图标时候，宽度只显示100px的解决办法
qq_42853710的博客
09-28 1842
出现这个问题的关键在于JS方法初始化的时候，无法获取到父元素的宽度，所以默认显示100px 解决方法 Vue为我们提供了$nextTick来处理这个问题，在下次DOM更新循环结束后再去执行延迟回调，数据更新后，立即使用这个方法，获取更新后的dom。 一下代码中加入了当图标无数据的时候，一张暂无数据的png作为占位符 <template> <div class="chart_content"> <!-- 图表 --> <div v-show="is
echarts图表使用tab切换展示时宽度变成100px
m0_65284931的博客
07-30 368
这个问题不是由于 ECharts 不支持 100% 引起的，事实上，ECharts 不管你 CSS 写的是像素值还是百分比，只管实际容器的大小。而在 tab 切换的时候，其实这个容器是 0x0 的，所以再切回这个 tab 的时候当然是需要 resize 一下的。
echarts图表设置宽度100%结果为100px
m0_67108146的博客
08-20 6031
解决echarts图表设置宽度100%结果为100px问题
不考虑其他问题，简单粗暴怎么解决
06-09
如果你只是想简单粗暴地解决这个问题，可以通过以下方法： 1. 重启 MySQL 数据库服务。 2. 清空 MySQL 数据库中的锁表，可以使用以下命令： ``` mysql> FLUSH TABLES WITH READ LOCK; mysql> UNLOCK TABLES; ``` 请注意，这种方法可能会导致数据不一致或者丢失，因此不建议在生产环境中使用。如果你必须使用这种方法，请确保在执行操作之前备份好数据，并在操作完成后进行数据恢复。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值