echarts宽度100%变成了100px

最新推荐文章于 2024-07-20 21:12:45 发布
最新推荐文章于 2024-07-20 21:12:45 发布
阅读量4.6k 收藏 1
点赞数 2
分类专栏： echarts 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43992788/article/details/104766676
版权

标题echarts宽度100%变成了100px

在这里插入图片描述
具体问题是，我设置的width：100%，结果出来的时候就变成了100px；发现，是因为我把图放到了tab选项卡里，因为图一开始是display：none；在一开始初始化执行js的时候找不到这个元素，所以会出现问题。
1、 自适应。
2、 缩小布局不乱。
解决方法：
1、一开始就把echatrs的的宽度定死，监听浏览器大小变化，把echerts用div包裹起来，每当浏览器发生变化，拿到div的值，并赋值给echerts这个id。
在这里插入图片描述
2、 Tab切换显示：把第一个显示的先初始化，然后切换显示时，重新调用echerts目标函数。在这里插入图片描述

无称可用
关注
专栏目录
Echarts图表宽度变成100px，让图表宽度随着父元素自动适应，Vue实时监听宽度的变化，这可能是史上最好的解决方案！...
weixin_34113453的博客
01-31 1709
最近工作中element后台管理使用Echarts图表，本后台项目分图表模式和列表模式，使用display控制显示隐藏，这样就引出了本文的问题。 问题1：Echarts图表宽度变成100px？ 问题2：怎么让Echarts图表宽度随着父元素自动适应？ 　　网上对于这两个的解决方案大同小异，手动的记录父元素的宽度，或者侦听display属性，解决方案要么感觉极其复杂，要么治标不治本， 这...
Vue echarts 的canvas大小变成100px
weixin_44494811的博客
08-07 3065
网上的很多帖子没有说到点子上，今天从根本上解决类似的问题，不单单是在vue里面用。 解决方案：页面重绘后在执行绘图的代码。vue里面可以把绘图代码放到this.$nextTick里面 描述： 首先我们想点击页面上的按钮，弹出一个框，占页面width：80%,height:70%,里面的echart图占对话框的100%。至于为什么要用100比，当然是为了适配不同分辨率了。如下图： 代码如下： <template> <div class="echartTest">
记录问题：解决echarts设置宽度100%，结果变成了100px（通过display控制echarts显隐也存在这个问题）
weixin_48677331的博客
03-05 1461
一个项目中，通过按钮控制echarts的显隐，设置echarts的宽高为100%，刚开始没问题，但是通过按钮控制显隐的时候，发现echarts并未显示，但是通过chrome调试，可以发现echarts已经初始化完成，但是显示的canvas的大小为100*0，如下图显示。因此，可以判断，出现这样问题的原因是：使用百分比显示，再通过按钮控制显隐的话，是echarts没有自适应宽高引起的，所以需要再打开echarts的方法中添加echarts的resize()方法，让它重新计算。
关于echarts图表宽度不能占满整个100%宽度以及不能自由伸缩的的解决办法（vue2，vue3应该换汤不药）
最新发布
m0_67736196的博客
07-20 1269
/ 1 、基于准备好的容器初始化echarts实例对象// 2 、指定图表的配置项和数据grid: {// 调整距离left: '5%', // 左right: '5%', // 右bottom: '3%', // 下top: '4%', // 上},// 标题设置title: {text: 'xxx', // 标题内容},// X轴xAxis: {type: 'category', // 类型name: '公司名称', // X轴名称data: x},
解决Echarts设置宽度为100%发现宽度变为100px的问题(Echarts图标宽度自适应问题)
Machel_的博客
07-16 1108
当我们点击全局统计(tab)的时候，由于Echart图标只会初始化一次，当第一次加载游戏设置（tab）的时候已经被初始化了，所以这个时候，虽然全局统计的display:none效果消失，图表容器width：100%起作用的时候，echart图表宽高仍然为100px。有的时候我们为了让Echarts自适应容器宽度，把Echarts容器宽度设置为100%，使容器宽度变化的时候，图表宽度也跟着变化。但是我们发现容器宽度变化的时候，图表宽度并不会跟着变化。但是点击全局统计加载图表，发现图表的宽度不符合预期。
使用echarts宽度100%变成100px问题（一招搞定）
m0_48507640的博客
08-02 8896
**前言：**每个开发者在使用echarts制作图形过程中，多多少少都会踩到一些坑，比如图形宽高问题，图形清晰度问题。 今天要说的是当图形宽度设置是100%时，切换tab后变成了100px了，如果已经设置了自适应，那么手动去改变浏览器屏幕的宽，会发现图形又恢复正常了。 原因：切换tab时，元素本身就是存在的，只是样式被设置成display: none，那么宽高为0px；echarts对图形最小的默认为100px，所以就会出现这样的情况。 解决问题过程中，在网上看到的帖子里，发现很多并不能解决到问题。 比如：
【Echarts】Echarts 图表宽度设置100%，图表显示只有100px的问题
m0_61049675的博客
01-29 1589
图表的父容器设置了 display：none，图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后显示出来的图表就只有100px；
【echarts问题】设置echarts宽度100%，实际变成了100px
Pentoncos的博客
08-25 1224
最近在使用echarts+el-tabs，当我把宽度设置成100%后，当切换tabhu
bootstrap展示echarts宽度从100%变为100px
04-05
As an AI language model, I don't have emotions, feelings or thoughts. So, the concept of null doesn't apply to me in that sense. However, in computer programming, null is a special value that ...
vue tab切换,解决echartst图表宽度只有100px的问题
12-28
<div class=echarts> <div id=myChart xss=removed></div> 2.定义一个方法，并在mounted视图更新的时候执行 [removed] export default { mounted() { this.setMyChart(); }, methods: { setMyChart() { // ...
echarts隐藏点击nav切换显示造成宽度100px
web_start的博客
05-27 556
echarts页面一加载是隐藏状态，点击nav切换的时候显示出来，造成宽度为100px。解决办法：先给ehcarts赋值高宽，再隐藏。 刚开始我是直接判断navIndex的值来切换两种数据。后来发现容易造成echarts图表宽度为100px变形了。 解决办法如下： //先给图表设置宽度（vue项目中此段代码放在mounted中） document.getElementById("touristChart").style.width = window.innerWidth - 30 + "px"; //
echarts切换tab,图表设置宽度100%结果为100px
hantanxin的专栏
05-14 764
当echarts绘制表格（也就是执行init方法）计算宽度的时候，由于初始化图表时外层div盒子的属性为display:none，所以无法获取到盒子的clientWidth（可视化宽度），而parseInt(stl.width,10)将宽度100%转换成了100（这里的stl.width，就是外层的div的样式中的width属性，因为我们初始时设置了100%，所以这里可以获取到），所以。，在监视中（watch），要配合nextTick方法使用，这样才能完全确保初始化之前，外部盒子已经存在于dom树中。
echarts设置容器宽度设置为100%只显示100px宽度
是程序喵呀
11-24 2227
原因很简单，在tab页中，图表的父容器div是隐藏的（display：none），图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后计算出来的图表就成了100px。在使用echarts时，写在tab页中的图表宽度明明设成了100%，但是在页面上实际却只有100px宽。好了废话少说直接说解决方案。echarts的width不能适应100%但是他的父级可以哦。Echarts在你不确定内容宽度时给他设置宽度为100%去适应宽度但是不能实现。
echart图表设置宽度100%，结果显示100px问题解决
qq_45949366的博客
08-07 3222
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
HYeeee的博客
08-24 7360
原因 外层div设置宽高为100%，在渲染出来的时候变成了100px 这种情况一般都是echart所在的div一开始是display:none，一般出现在以下几种情况： echats放在了tab中 解决方法： 1、通过js获取外层div的宽高，然后设置给图表容器 2、加 mychart.resize() 所在div用了v-show，这种情况要不换成v-if，要不就设置初始值是true。 ...
Echarts 图表宽度设置100%，却只有 100px 问题
mocheng0的博客
08-02 2632
当无数据时，要用echarts.init(dom).dispose()来清除画布，而不能用clear。需求有图表数据时展示数据，无数据时展示'暂无数据'，且在有数据和无数据的切换过程中，图表正常显示。避免echarts图表宽度只有100px。......
echarts图表设置宽度100%结果为100px
m0_67108146的博客
08-20 5899
解决echarts图表设置宽度100%结果为100px问题
echarts宽度100% 却成了100px echarts大小不对
qq_36287830的博客
09-16 713
echarts宽度100% 却成了100px 因为v-show 或者 父元素有display:none 属性 导致 echarts 大小不对 可以通过窗口监听 调用echarts的resize()方法 或者 将v-show换成v-if 或者将display:非none
echarts宽度100%变成了100px (实用）
chelen_jak的专栏
11-05 3950
原文出处：https://www.cnblogs.com/SoundOfTheSea/p/7699683.html 延伸阅读：echarts图表自适应，容器宽度设置为百分数，但是图表显示不全，缩到一起 这几天在做折线图，先是用的chart.js，但是chart.js会出现纵轴不显示数字，宽度不能设置百分比只能设置定值，而且图像重绘之后需要鼠标移到折线图的数据点上才会出现图像，找了半天也没有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值