解决Echarts设置宽度为100%发现宽度变为100px的问题(Echarts图标宽度自适应问题)

已于 2024-07-16 17:22:33 修改
阅读量2.8k 收藏 9
点赞数 6
文章标签： echarts 前端 javascript
于 2024-07-16 17:16:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Machel_/article/details/140470013
版权

简介：

有的时候我们为了让Echarts自适应容器宽度，把Echarts容器宽度设置为100%，使容器宽度变化的时候，图表宽度也跟着变化。但是我们发现容器宽度变化的时候，图表宽度并不会跟着变化。

今天我就遇到了一个Echarts宽度设置100%导致的Bug，最后通过分析解决了这个Bug。

问题发现：

我的Echart图表内嵌在elementUI的标签页里面(el-tabs)，页面结构如下：

游戏设置是页面默认的tab

但是点击全局统计加载图表，发现图表的宽度不符合预期

 分析:

在el-tabs中tab是通过display：none来实现切换的

所以第一次加载游戏设置（tab），全局统计(tab)的content被设置了display:none，content里面所有元素的宽高为0，那么由于图表容器设置了width：100%，这个时候图表容器宽高也是0，但是因为echart图标宽高最小为100px，这个时候echart图表宽高为100px。

当我们点击全局统计(tab)的时候，由于Echart图标只会初始化一次，当第一次加载游戏设置（tab）的时候已经被初始化了，所以这个时候，虽然全局统计的display:none效果消失，图表容器width：100%起作用的时候，echart图表宽高仍然为100px。

解决：

既然当图表容器大小发生变化的时候echart检测不到，所以我们对容器设置一个监听器怎么样？当容器大小变化的时候自动调整图表不就解决了？

由于在系统中我的窗口大小不会变化，但是某些DOM元素的大小是变化的于是我没有使用window.addEvenListen('resize',function)这个办法，这个事件监听器不能监听某些DOM元素大小的变化。

我用了ResizeObserver这个API，来监听容器大小变化，然后Resize图表。

这边之所以用比例，而不是用px来比较是因为，不同的电脑分辨率不同，将来可能会无法触发Resize。

最终效果如下

Echarts 图表宽度自适应问题解决方案（第一次初始化和监听屏幕变化时）
朝花夕拾的博客
05-06 1159
【代码】Echarts 图表宽度自适应问题解决方案（第一次初始化和监听屏幕变化时）
echarts设置容器宽度设置为100%只显示100px宽度
是程序喵呀
11-24 2470
原因很简单，在tab页中，图表的父容器div是隐藏的（display：none），图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后计算出来的图表就成了100px。在使用echarts时，写在tab页中的图表宽度明明设成了100%，但是在页面上实际却只有100px宽。好了废话少说直接说解决方案。echarts的width不能适应100%但是他的父级可以哦。Echarts在你不确定内容宽度时给他设置宽度为100%去适应宽度但是不能实现。
在Vue 3中使 echarts 图表宽度自适应变化
dangfulin的博客
02-04 1074
作用是在界面显示一个柱状图：问题是在页面缩放时，图表大小始终固定：希望图表能够根据页面宽度自动调整，特别是在页面缩放时。
elementUI tabs切换 echarts宽度挤压到一起 由100%变成100px
懒虫的博客
05-09 1429
elementUI tabs切换 echarts宽度挤压到一起 由100%变成100px
echarts将width的百分之百识别成100px的问题
00年女程序员分享自己的学习笔记
02-09 597
当容器大小发生变化时使用 window.onresize = myChart.resize 可使图标随着屏幕大小改变。（这里我写window.onresize没用，所以就如下写的）此问题是echarts未识别到width，然后它默认最小宽度是100px，所以宽度就变成了100px。使用mycharts.resize()函数解决。echarts 的resize 用来。在画echarts图的方法的最下面调用resize()写了一个setTimeout防止不运行resize。
【踩坑+实践】elementui 中关于tab标签echart width100%显示不完全的问题
izengjing的博客
10-30 7567
问题描述 关于elementui 中tab标签echart显示不完全的问题， 在通过tab显示echart的时候,容器宽度width: 100%，但是echart显示不完全，通过开发者工具查看网页属性，容器宽度是100%，echart自己添加的容器宽度也是100%，但是canvas标签的宽度就只有100px了。 网上查阅了很多解决办法： 有人说，通过elementui 自带的lazy，...
记录问题：解决echarts设置宽度100%，结果变成了100px（通过display控制echarts显隐也存在这个问题）
weixin_48677331的博客
03-05 2113
一个项目中，通过按钮控制echarts的显隐，设置echarts的宽高为100%，刚开始没问题，但是通过按钮控制显隐的时候，发现echarts并未显示，但是通过chrome调试，可以发现echarts已经初始化完成，但是显示的canvas的大小为100*0，如下图显示。因此，可以判断，出现这样问题的原因是：使用百分比显示，再通过按钮控制显隐的话，是echarts没有自适应宽高引起的，所以需要再打开echarts的方法中添加echarts的resize()方法，让它重新计算。
使用echarts宽度100%变成100px问题（一招搞定）
m0_48507640的博客
08-02 9415
**前言：**每个开发者在使用echarts制作图形过程中，多多少少都会踩到一些坑，比如图形宽高问题，图形清晰度问题。 今天要说的是当图形宽度设置是100%时，切换tab后变成了100px了，如果已经设置了自适应，那么手动去改变浏览器屏幕的宽，会发现图形又恢复正常了。 原因：切换tab时，元素本身就是存在的，只是样式被设置成display: none，那么宽高为0px；echarts对图形最小的默认为100px，所以就会出现这样的情况。 解决问题过程中，在网上看到的帖子里，发现很多并不能解决到问题。 比如：
echarts切换tab,图表设置宽度100%结果为100px
hantanxin的专栏
05-14 1086
当echarts绘制表格（也就是执行init方法）计算宽度的时候，由于初始化图表时外层div盒子的属性为display:none，所以无法获取到盒子的clientWidth（可视化宽度），而parseInt(stl.width,10)将宽度100%转换成了100（这里的stl.width，就是外层的div的样式中的width属性，因为我们初始时设置了100%，所以这里可以获取到），所以。，在监视中（watch），要配合nextTick方法使用，这样才能完全确保初始化之前，外部盒子已经存在于dom树中。
echarts宽度100%变成了100px
weixin_43992788的博客
03-10 4803
标题echarts宽度100%变成了100px 具体问题是，我设置的width：100%，结果出来的时候就变成了100px；发现，是因为我把图放到了tab选项卡里，因为图一开始是display：none；在一开始初始化执行js的时候找不到这个元素，所以会出现问题。 1、 自适应。 2、 缩小布局不乱。 解决方法： 1、一开始就把echatrs的的宽度定死，监听浏览器大小变化，把echerts用di...
使用echarts时设置大小为100%变成了100px
brilliantSt的博客
08-12 4031
问题描述： 在VUE项目中使用了echarts，使用了v-show让它最开始不显示出来，后面显示出来后发现图表的宽高变成了100px（默认值）。 问题分析： 这个是因为v-show隐藏是通过 display:none 来实现的，这时echarts就会变成默认的100px； 解决方法： 在图表显示出来后使用改图标的 resize 函数，如下代码： this.chart.setOption(chart2Options) this.$nextTick(()=>{ this.chart.resize() }
解决echarts图宽度自适应问题，设置100%宽度显示100px
m0_62626838的博客
12-19 739
1、原因：这里是因为你的echarts图表的盒子使用了v-show或class隐藏样式引起的图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后计算出来的图表就成了100px。2、解决方法：既然要保证初始化时DOM元素已经渲染，那么我们可以使用v-if，并搭配nextTick（）实现echarts图表异步加载，让其走在DOM渲染之后。
【Echarts】Echarts 图表宽度设置100%，图表显示只有100px的问题
m0_61049675的博客
01-29 1789
图表的父容器设置了 display：none，图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后显示出来的图表就只有100px；
echarts图表设置宽度100%结果为100px
m0_67108146的博客
08-20 6006
解决echarts图表设置宽度100%结果为100px问题
echart图表设置宽度100%，结果显示100px问题解决
qq_45949366的博客
08-07 3311
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宽度100%变成了100px (实用）
chelen_jak的专栏
11-05 4009
原文出处：https://www.cnblogs.com/SoundOfTheSea/p/7699683.html 延伸阅读：echarts图表自适应，容器宽度设置为百分数，但是图表显示不全，缩到一起 这几天在做折线图，先是用的chart.js，但是chart.js会出现纵轴不显示数字，宽度不能设置百分比只能设置定值，而且图像重绘之后需要鼠标移到折线图的数据点上才会出现图像，找了半天也没有...
解决echarts宽度100%变成了100px
HYeeee的博客
08-24 7922
原因 外层div设置宽高为100%，在渲染出来的时候变成了100px 这种情况一般都是echart所在的div一开始是display:none，一般出现在以下几种情况： echats放在了tab中 解决方法： 1、通过js获取外层div的宽高，然后设置给图表容器 2、加 mychart.resize() 所在div用了v-show，这种情况要不换成v-if，要不就设置初始值是true。 ...
echarts图宽度100%图表显示100px 问题解决
最新发布
03-20
<think>好的，我需要解决用户提到的ECharts图表宽度设置为100%却只显示100px的问题。首先，我得回忆一下相关的引用内容，看看有什么解决方案已经被提到过。根据引用[3]和[4]，问题通常出现在父元素被隐藏（比如display: none）的情况下，导致ECharts无法正确计算宽度，从而默认使用100px。这时候需要确保图表容器在初始化时可见，或者在显示后重新调整图表尺寸。 用户可能是在Vue项目中遇到了这个问题，特别是在使用标签页（tabs）或条件渲染时。这时候，当图表所在的父元素初始状态是隐藏的，ECharts初始化时无法获取到正确的宽度，所以会使用默认的100px。解决方法是需要在父元素显示后再初始化图表，或者在每次显示时调用resize方法。 另外，引用[5]提到可以在初始化前通过JS动态设置宽度，比如获取窗口宽度然后赋值给容器元素。这可能也是一个可行的方案，但需要注意响应式的问题，比如窗口大小变化时需要重新调整。 还有一个关键点是要确保容器的父元素有正确的宽度设置。如果父元素的宽度没有明确定义，100%可能无法生效。需要检查DOM结构，确保从顶层容器到图表容器的每一层都有正确的宽度传递。 综合这些信息，解决方案应该包括以下几个步骤：确保容器可见后再初始化图表、在父元素显示后调用resize方法、检查父元素的宽度设置是否正确，以及可能使用v-if替代v-show来避免初始化时隐藏的问题。同时，在Vue中可以使用nextTick来确保DOM更新完成后再进行操作，或者使用ResizeObserver来监听容器尺寸变化自动调整图表。 需要将这些步骤整理成用户容易理解的解决方案，分点说明，并引用相关的引用来源作为支持。此外，生成相关问题时要围绕ECharts的常见问题，比如响应式设计、Vue中的监听方法等。</think>### 解决方案：ECharts图表宽度设置为100%却显示100px的问题 #### 问题原因 当ECharts图表容器的父元素被隐藏（如`display: none`或`v-show="false"`）时，初始化图表会导致无法正确获取容器宽度，ECharts默认使用`100px`作为宽度[^3][^4]。 --- ### 解决步骤 #### 方法1：确保容器可见后再初始化 1. **延迟初始化**：在父元素显示（如切换Tab页、条件渲染为`true`）后再初始化图表。 **示例（Vue中）**： ```vue <template> <div v-if="isChartVisible"> <div ref="chart" style="width: 100%; height: 400px"></div> </div> </template> <script> export default { mounted() { // 在父元素显示后初始化 this.initChart(); }, methods: { initChart() { const chartDom = this.$refs.chart; const chart = echarts.init(chartDom); chart.setOption({ /* 配置项 */ }); } } } </script> ``` #### 方法2：手动触发`resize` 2. **父元素显示后调用`resize`**： 在父元素从隐藏变为可见时（如切换Tab页），调用ECharts实例的`resize`方法。 ```vue <template> <div v-show="isActiveTab"> <div ref="chart" style="width: 100%; height: 400px"></div> </div> </template> <script> export default { watch: { isActiveTab(newVal) { if (newVal) { this.$nextTick(() => { this.chartInstance.resize(); // 重新计算尺寸 }); } } } } </script> ``` #### 方法3：强制设置容器宽度 3. **动态计算父元素宽度**： 在初始化图表前，通过JavaScript强制设置容器宽度（适合父元素宽度已知但未正确继承的场景）[^5]。 ```javascript const chartDom = document.getElementById('chart'); chartDom.style.width = chartDom.parentElement.clientWidth + 'px'; const chart = echarts.init(chartDom); ``` --- ### 关键注意事项 1. **避免在隐藏容器中初始化**：优先使用`v-if`替代`v-show`，确保容器挂载时已可见[^3]。 2. **监听窗口变化**：若页面需响应式适配，添加窗口大小监听： ```javascript window.addEventListener('resize', () => { chartInstance.resize(); }); ``` 3. **使用ResizeObserver（推荐）**：现代浏览器支持监听元素尺寸变化，自动调整图表： ```javascript const observer = new ResizeObserver(() => { chartInstance.resize(); }); observer.observe(chartDom); ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值