echarts隐藏点击nav切换显示造成宽度100px

最新推荐文章于 2023-12-12 21:19:15 发布

北岸初晴 °

最新推荐文章于 2023-12-12 21:19:15 发布

阅读量545

点赞数

分类专栏： Echarts 文章标签： vue.js

本文链接：https://blog.csdn.net/web_start/article/details/106387158

版权

在Vue.js项目中，当Echarts图表在页面加载时隐藏，通过nav切换显示时会出现宽度为100px的异常。解决方法是在初始化Echarts时设置合适的高宽，然后进行隐藏，以防止显示时图表变形。

摘要由CSDN通过智能技术生成

echarts页面一加载是隐藏状态，点击nav切换的时候显示出来，造成宽度为100px。解决办法：先给ehcarts赋值高宽，再隐藏。
在这里插入图片描述
刚开始我是直接判断navIndex的值来切换两种数据。后来发现容易造成echarts图表宽度为100px变形了。
解决办法如下：

//先给图表设置宽度（vue项目中此段代码放在mounted中）
 document.getElementById("touristChart").style.width = window.innerWidth - 30 + "

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

北岸初晴 °

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

tab按钮切换后echarts宽高显示错误

淘淘小窝

08-09

727

tab按钮切换后echarts宽高显示错误

解决Echarts 隐藏再显示后宽度高度变小的问题

seeeeeeeeeee的博客

11-05

2221

问题：很多时候会用到把echarts图放在弹框内。点击后显示弹框出现图表，但是这样会遇到问题就是打开弹框的时候图表会缩的非常小挤在一块。原因：是因为echarts根据父级盒子大小来渲染图表，但是因为你隐藏了盒子，所以echarts检索不到父级宽高，然后就导致默认给自己了一个很小的宽高，就会挤在一块。解决办法所以我们也就顺着这个原因解决，那就再他弹框出来后从新获取一下他的宽高从新渲染一下不就好了吗。这里就是注意再myChart初始化后直接先resize来构图一遍，这样就保证了每次调用这个方法都会在初始

参与评论您还未登录，请先登录后发表或查看评论

vue tab切换,解决echartst图表宽度只有100px的问题

12-28

解决思路：直接将图表的宽高写死，根据实际代码进行改写，提供一个思路 1.将图表放进一个div里面 2.定义一个方法，并在mounted视图更新的时候执行 [removed] export default { mounted() { this.setMyChart(); }, methods: { setMyChart() { // jq写法 // 获取父元素 var echarts =

解决echarts显示隐藏造成100px高宽

ZHANGLIZENG的博客

09-29

9156

隐藏的div应该在js中手动设置隐藏，若在html中设置隐藏会出现上来就隐藏，后面再重新给echarts赋高、宽也是不起作用的情况。解决办法，先给ehcarts赋值高宽，再隐藏。 1. html代码定义echarts： <div class="mini-splitter" id="mapDiv" vertical="true" allowResize="false" handlerSi...

进页面echarts是隐藏的，点击按钮显示，就会出现，echarts宽度100% 变成100

ii窝窝头的博客

07-31

1086

问题：总结就是，echarts渲染时渲染echarts的DOM display为none，所以width：100%没有可继承项，被echarts自带方法切割成100px。解决办法: 1在初始化echarts的时候提前给echars动态设置宽度 $('#chart').css('width',$(window).width()); echarts.init(document.getE...

vue中在tabs选项卡切换时echarts图表宽度由100%变为100px

风如也的博客

11-10

1381

使用场景：在tab 选项卡中使用了 echart 图表，然后在页面切换时，echarts 图表的宽度由原来的 100% 变为 100px 问题原因：echarts 渲染时 tab 选项卡的 display 属性为 none，所以 width 属性为 100% 就没有可继承项，被 echarts 自带的方法切割成 100px 解决办法：使用 this.$nextTick <ul class="tabbar"> <li><a href="javascript:void(0)

切换组件echarts宽高不正常，100%变成100px问题

qq_41191401的博客

12-30

2159

解决echarts '%'失效问题

echarts图表初始化到隐藏的div中造成宽高比例不对问题解决

ZKTIAN的博客

07-06

1503

问题描述：最近在做Echarts，下图是两个Echarts图表，可以点击月视图和年视图来切换。我的思路是使用ajax获得数据后，初始化这两个图表，然后通过点击来切换，但是在将隐藏的div显示出来时，图表的长宽比例错乱，宽度被限定成了100px。如下图这是因为在初始化图表时由于div被隐藏了，他的宽高无法获取，所以就自动给了一个宽度。下面是我的思路。话不多说，先看代码。 1.html代码 <ul class="nav nav-tabs"> <li class="active"

前端--echarts--使用tab时 echarts图表无法正常加载（无法正常显示）

VIP_CR的博客

02-14

1675

项目里图表高度设置了固定的360px。项目中使用到了Echarts来在展示图表，两个tab切换页面中都存在图表，页面加载完成后对所有图表进行了初始化和绘制，然后切换查看时，发现图表的宽度不正确.，第一个tab显示是很正常的，但是第二个tab中内容显示不出来。第一个tab ：图表1 （当前负荷）第二个tab ：图表2 （当前电量）原因：因为页面加载时，第二个tab ：图表2 （当前...

关于echart中使用width:100%与display:none中图表不能正常显示的问题

zhou_shadow的博客

06-10

6038

先查看需求要求类似于web端tab的样式，点击切换。因为是在移动端的应用，为了适配，宽度一般都采用%来表示，移动端宽度设置为100% 当echart对应的div采用display:none, 代码如下 <div id="container"> <div id="map1" style="width:100%;height:300px;"></div&gt...

【中国大学生计算机设计大赛信息可视化赛道】获奖项目深入剖析—中国野生动物保护可视化项目_附源码

最新发布

一键难忘的博客

12-12

1616

【中国大学生计算机设计大赛信息可视化赛道】获奖项目深入剖析—中国野生动物保护可视化项目_附源码本文主要目的是对于往年获奖项目案例-可视化项目的深入剖析讲解，对源码、项目特点、要点、特色继续深入分析。帮助大家学习技术，掌握规律。通过这次可视化技术的学习，我深感技术之美，数据之力。希望大家能够在技术的海洋中不断探索，勇攀技术高峰，将学到的知识运用到实际中，创造出更多有价值的作品。技术之路漫漫，愿我们在不断学习的过程中不忘初心，砥砺前行。🚀🌟

echarts 实时数据展示

weixin_43992788的博客

03-12

1461

echarts 实时数据展示由于是嵌套数组，写着写着脑子很痛，就不愿思考，细节也无法完全把控，估计脑子在自我保护写的时候一定得先想清楚数据结构是什么，我虽然想了，但是只想了一个大概就开写了，犯了大错。一定要想清那些是需要遍历那些只需要遍历一次。先把外层模板搭建好，里面的就可以push进去。 function Myecharts() { getajax(function (data) { realTime.push(data)

vue 使用echarts 变100px 问题

apgk的博客

09-02

178

使用 vue tabs 切换或者modal 隐藏再次打开，发现echarts变100px问题。如下图（图来源）解决方法： tabs切换成功后或者 modal打开事件中使用 Chart 是已经初始化后 echarts实例 this.$nextTick(()=>{ this.Chart.resize() }) ...

echart多图表切换时图表宽度变成100px，而不是100%

乙壳虫的博客

09-14

5847

现页面中有如下图表需要显示现我希望页面在进行缩放的时候，图表大小也跟着变。首先想到的就是宽度设置为100%，但是当我在“总计”，“加分”，“扣分”之前切换时，发现图表宽度变成了100px（如果你设置的宽度是固定大小的，比如500px，那就不会有这个问题），这是echart本身的原因。那么如何解决图表自适应问题呢，现在有如下代码（只展示了主要的部分代码）  <div class="tab-pane active" id="total"> <!--

1.Echarts的坑：切换tab时，echart显示默认的100px

ME_GIRL的博客

06-12

647

1.切换tab时，echart显示默认的100px 切换tab时，elementUI的原理设置v-show 元素被隐藏,切换的时候echart 获取不到父元素高度 1.2 效果 1.3 解决方法切换tab时先销毁然后再init（注意：要在this.$nextTick中进行操作，确保能获取到dom） this.$nextTick(() => { this.$echarts.init(document.getElementById("element")).dispose()

echarts在结合element中的el-tabb标签切换时容器宽度设置为100%，只展示100px问题解决

weixin_45432575的博客

04-10

943

原因 echarts结合el-tab时，初次渲染组件moutnted的时候，未显示tab内的组件display为none，echarts无法获取父组件的高度100%，而转换成100px显示方法1 给图表设置固定宽度方法2 通过 mounted的时候获取window.innerWidth，根据innerwidth设置echarts的宽幅，如：const myEcharts = echarts.init(document.getElementById(‘UnSafeActStatistics’)); wi

解决echarts显示隐藏宽度发生变化

Cousin__的博客

12-03

844

解决方法：先给ehcarts赋值高宽，再隐藏。 js $("#map").css({"width":$("#map").width(),"height":$("#map").height()}); //隐藏之前先设置高、宽，防止出现100px document.getElementById("mapDiv").style.display= "none"; 示echarts时再重新赋值高宽： $("#map").css({"width":

echarts 显示隐藏后宽度高度变小问题