解决vue里面的echarts宽度为100px问题、为echarts设置宽度自适应

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

#echarts #vue

本文介绍了在Vue项目中遇到的ECharts宽度固定无法自适应的问题，并提供了详细的解决方案。问题在于通常在created或mounted阶段初始化ECharts，而正确的做法是在确保DOM渲染完成后再进行初始化，例如通过点击事件触发。通过这种方式，可以实现ECharts宽度按百分比自适应，避免使用固定像素宽度。

解决vue里面的echarts宽度为100px问题、为echarts设置宽度自适应

问题展示

100px echarts
canvas展示为100px

解决问题后的展示

正常echarts

图片描述

如图所示我通过设置两个并列展示的echarts，每个echarts宽度设置为50%宽度自适应，最后一张图为正常展示效果。

问题描述

在vue使用echarts时我们一般喜欢在created、mounted中直接调用echarts数据初始化，还有在我们给echarts设定宽度时（一定要设置固定像素）才能展示，不能通过百分比来自适应，（高度需要给固定高度，个人比较喜欢用vh定义高度）

问题解决

在vue初始化echarts数据时，一定不能在created、mounted中定义初始化方法，使用vue的$nextTick也无效，个人通过点击事件初始化数据，可以展示正常的echarts，正常效果如下图：
在这里插入图片描述

vue3：实现echarts图表跟随窗口自适应大小+宽高自适应方案示例源码，echarts图表随屏幕的宽度自适应，Vue3项目中使用ECharts图表并实现自适应效果（支持任意图表，同时可多个图表）
高级前端工程师
09-11 4128
vue3中echarts实现自适应大小，Vue3项目中使用ECharts图表并实现自适应效果，Echarts图表自适应宽高大小，vue3+echarts图表自适应屏幕大小，多个图表如何自适应，vue3中使用echart多个图表，并且可以随着屏幕大小自适应布局，echarts图表随屏幕的宽度自适应，ECharts自适应宽度(resize)，Vue3 echarts 图表跟随窗口自适应大小，echarts宽高自适应，vue3项目中让echarts适应div的大小变化，跟随div的大小改变，拖动很卡怎么办，非常卡
vue使用echarts字体自适应
swagLi的博客
11-15 1631
<templete> <div id="echart" style="width:400px;height:400px"></div> </templete> <script> export default({ data(){ return{ chartCircle:null, circleOption:{}, screenW
vue tab切换,解决echartst图表宽度只有100px的问题
12-28
解决思路：直接将图表的宽高写死，根据实际代码进行改写，提供一个思路 1.将图表放进一个div里面 2.定义一个方法，并在mounted视图更新的时候执行 [removed] export default { mounted() { this.setMyChart(); }, methods: { setMyChart() { // jq写法 // 获取父元素 var echarts =
【ECharts】v-show盒子宽度设置 100%， echarts渲染出来宽度100px
最新发布
qq_35227244的博客
09-23 353
摘要：使用echarts时遇到两个问题：1) v-show控制显示时图表宽度异常缩小；2)需要随父元素自适应宽度。原因发现是v-show的display:none导致echarts获取不到容器宽度，默认使用100px。解决方法是在setOption前调用resize()方法，强制重绘图表尺寸。注意resize()必须放在setOption之前执行，否则会报错。正确调用顺序为：先resize()调整尺寸，再setOption更新数据。该方案有效解决了图表显示异常和自适应问题。
解决 Vue 渲染echarts图表宽度只显示100px问题
热门推荐
大漠青烟
12-14 1万+
解决 Vue 渲染echarts图表宽度只显示100px问题 刚刚接触vue不久,在开发过程中遇到不少坑,走了很多弯路,其中一个就是在echarts图表加载渲染时,图表的宽度只能显示100px问题,这篇文章记录解决方案,对于像我一样的初学者来说,可能会有一些参考意义. 出现这个问题的情况目前来说我只在 &amp;lt;el-tabs type=&quot;border-card&quot; v-model=&quot;tabsName...
Vue渲染echarts图标时候，宽度只显示100px的解决办法
qq_42853710的博客
09-28 1890
出现这个问题的关键在于JS方法初始化的时候，无法获取到父元素的宽度，所以默认显示100px 解决方法 Vue为我们提供了$nextTick来处理这个问题，在下次DOM更新循环结束后再去执行延迟回调，数据更新后，立即使用这个方法，获取更新后的dom。 一下代码中加入了当图标无数据的时候，一张暂无数据的png作为占位符 <template> <div class="chart_content"> <!-- 图表 --> <div v-show="is
VUE渲染echarts图表宽度只显示100px问题
qq_37604998的博客
08-12 2291
今天在处理echarts还遇到一个问题，就是在父组件异步请求拿到数据前，想要默认显示占位图并隐藏图表，开始是使用v-if进行处理，但是渲染报错，提示:Initialize failed: invalid dom【初始化失败：无效的dom】，说明图表渲染的时候，这个dom不存在，但是换成v-show的话就可以展示出来图表。然后看了下官方文档的关于v-if和v-show的区别，如下所示： 由上述看目前只能使用v-show，但是v-show展示图表的时候出现了标题的问题，图表的大小一直为100px，可能是因为渲
真正解决vue渲染echart图表只显示100px的问题
weixin_49637830的博客
06-22 662
真正解决vue渲染echart图表只显示100px的问题 原因：初始渲染图表并没有resize 解决方案： var chartDom = document.getElementById("mychart"); chartDom.style.width=window.innerWidth/3-20+'px' // 此处设定想要宽度 var myChart = echarts.init(chartDom); ... // 图表大小随浏览器大小调整
完美解决vue 中多个echarts图表自适应的问题
10-15
总结来说，解决Vue中多个ECharts图表自适应的问题，关键在于正确地监听窗口的`resize`事件，并为每个图表实例调用`resize`方法。同时，通过封装ECharts组件，可以更好地管理和复用图表，提高开发效率，实现动态数据...
vue使用echarts 宽度设置100% 却只有100px
05-11
如果你想让 echarts 图表的宽度设置为 100% 却只有 100px 的问题，一般有以下两种原因： 1. 父元素宽度不足 可能是因为 echarts 所在的父元素宽度不够，导致 echarts 图表只能继承父元素的宽度，最终导致 echarts ...
vue+echarts完整显示x轴的示例以及完整案例.zip
02-15
在`columnChart.vue`中，我们可以看到一个完整的Vue组件，它展示了如何配置ECharts来解决X轴显示不全的问题。这个组件包含了ECharts的初始化、数据加载以及相关配置项的设置。例如，可能有以下关键代码： ```...
vue3中使用echart，彻底解决宽度100%变成100px
tuku0801的专栏
03-26 2826
vue3+echart的使用，遇到的尺寸显示问题，100%显示为100px的解决办法
vue tab切换,echartst图表宽度只有100px问题解决
好巧的博客
12-07 6914
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。解决思路：直接将图表的宽高写死，根据实际代码进行改写，提供一个思路。如果本篇文章对你有帮助的话，很高兴能够帮助上你。
echarts出现宽度变成100px的解决办法
qq_39536826的博客
02-07 849
解决echarts宽度出现100px的问题
VUE Element Tab Echarts 宽度 百分百 变成 100px（1行代码解决）
mineblogjw的博客
12-26 7494
问题描述：vue+element项目中使用到了tab切换选项卡，其中有一个tab下的内容是echarts，出现了echarts宽度缩减为100px无法继承100%属性。 问题：总结就是，echarts渲染时tab选项卡display为none，所以width：100%没有可继承项，被echarts自带方法切割成100px。 解决思路：销毁组件，在tab选项卡被选中时重新渲染组件，这个时候就会有...
解决Vue中v-show控制echarts图表显示但图表宽度为100px问题
sinat_34241861的博客
04-16 5442
问题出现场景 在vue项目中，使用v-show控制div元素的显示，div标签中是echarts图表，自定义的echarts CSS样式是width为100%，但实际显示时图表宽度确为100px 实际代码 父组件代码 <template> <div> <div v-show="showMain"> <div style="backgro...
echarts图表设置宽度100%结果为100px
m0_67108146的博客
08-20 6149
解决echarts图表设置宽度100%结果为100px问题
ECharts width:100%变为100px
qq_38935512的博客
07-18 1835
此问题一般出现在tab切换，或者v-if 控制当中 解决方案 v-if 改为 v-show 就可以啦
echart图表渲染时宽度变为100px
weixin_41530979的博客
09-03 531
echarts 图标渲染时为 display：none 导致失去宽度变为 100px 解决方法：在图表init之前，给好固定的宽度
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值