vue项目奖tab切换echarts图表大小不正常

最新推荐文章于 2024-05-15 03:27:29 发布
最新推荐文章于 2024-05-15 03:27:29 发布
阅读量1.2k 收藏
点赞数
分类专栏： 百度地图+echarts 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40589472/article/details/108845933
版权

这是tab切换的两张图片，第一个tab是正常的，第二个就出问题了，代码是一毛一样

在这里插入图片描述
在这里插入图片描述
原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。而这个默认宽度很小，所以导致echarts图表显示不完全。

解决方法：我用的是vue，一开始切换用的是v-show，可以换成v-if，大家都应该知道区别了，这里不再过多赘述
此法若不合适请自行百度其他方法

我兔威武
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目tab切换echart图表切换宽度缩小和图表内容不正确解决
Miss_hhl的博客
01-19 1582
代码： 布局： <TabButton :btnValue1="'总数'" :btnValue2="'明细'" @watchFlag="handler"></TabButton> <div class="it_content"> <div class="picture" id="work" ref="work" v-show="flag===false...
vue中使用Tab切换echart图表宽度大小变小，关于echart图表的resize复原问题
yy_onway的博客
04-09 3131
问题描述： 项目需求使用elementUI中的Tab切换，两个el-tab-pane分别涉及echart组件，第一个tab-pane里面的echart显示正常，当点击第二个tab-pane以后，第二个tab-pane里面的echart图表大小发生变化，显示不正常，宽高出现问题。 这是第一个tab-pane,显示正常。 此处为第二个tab-pane显示的echart图表，明显不正常 解决办法（比较...
如何解决Vue项目中使用echarts，宽度变化导致图不能resize问题_vue echarts resize(1)
最新发布
2401_85014260的博客
05-15 377
/使echarts尺寸重置。
vue工程中element-ui的tab组件使用ecahrts渲染界面大小异常问题解决（亲测有效）。
happy81997的博客
11-29 1027
vue工程中element-ui的tab组件使用ecahrts渲染界面大小异常，一般就是高度或者宽度不正常。主要原因还是echarts渲染时候，DOM还没渲染好。 解决思路： 1、获取包装所有tab页面的DIV的宽度和高度，因为这个再tab切换渲染前肯定已经固定存在了。 2、给echarts的DOM强制赋值第1步的宽度和高度即可 document.getElementById('pidichartDiv').style.height= document.getElementById("tjDi
vue使用echarts切换tab出现图表被压缩，宽度变窄问题
Hoodps的专栏
09-17 7678
在做项目的时候，遇到图表在切换试图的时候，发现图表会被压缩起来了， 在tabs切换中有echarts的话，我们会发现初始化的那个echarts是有宽度的，当点击tabs切换之后，切换过来的echarts只剩下100px的宽度。 这是因为渲染的时机不对，我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echart...
用v-show切换两张echarts图 第二张图大小显示不正确
DorisTK的博客
03-15 958
问题： 解决办法： 由于我的每个echarts是单个组件，所以在引用它的父组件中，向子组件传一个切换按钮的字段 // 父组件中--chartType是切换按钮的字段: chartType:total(总数)/tendency(趋势图) <div> <first-echarts :chart-type='chartType'/> <second-echarts :echart-type='chartType' /> </div> // 子组件中--
vue中echarts图表大小适应窗口大小且不需要刷新案例
10-15
主要介绍了vue中echarts图表大小适应窗口大小且不需要刷新案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue解决echart在element的tab切换时显示不正确问题
10-15
然而，在与Element UI的Tab组件结合使用时，可能会遇到ECharts图表在切换Tab时显示不正常的问题。这个问题通常表现为图表的宽度或高度计算错误，导致图表没有正确地适应Tab内容区域。 问题的根本原因是，ECharts在...
vue tab切换,解决echartst图表宽度只有100px的问题
12-28
解决思路：直接将图表的宽高写死，根据实际代码进行改写，提供一个思路 1.将图表放进一个div里面 <div class=echarts> <div id=myChart xss=removed></div> 2.定义一个方法，并在mounted视图更新的时候执行 ...
vue项目创建简单echarts图表
01-11
以下是一个详细的步骤指南，教你如何在Vue项目中创建一个简单的ECharts图表。 首先，确保你已经安装了Node.js和Vue CLI。如果没有，你可以访问官方网站下载并进行安装。Vue CLI是Vue.js的命令行工具，它能快速搭建...
解决Echarts+el-tab-pane，获取不到DOM宽高，导致echarts无法加载的问题
LeeNN的博客
08-17 687
项目场景：在el-tabs的el-tab-pane中加载echarts图图表，会出现警告并且无法正常加载图表。
Vue解决echart在element的tab切换图表宽度
qq_32615575的博客
05-08 698
原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面加载时，就对图表进行初始化 原理：利用v-if属性,当切换至对应的tab时，设置其v-if的值为true即可，同时设置默认显示的tab <el-tabs type="border-card" v-model="echarts_tabItem"> <el-tab-pane label="SH" name="SH"> ...
Vue第3篇，在Vue项目中，点击切换tab栏时Echarts图表缩小在一起，宽高只有100px，解决方法（echarts图表缩小在一起，echarts图表大小随窗口变动而自适应，无需刷新）
weixin_65793170的博客
10-31 4434
ECharts（Enterprise Charts）是百度开发的一款基于 JavaScript 的开源可视化图表库，用于在 Web 页面中创建各种丰富多彩的交互式图表和数据可视化界面。这里来记录一下，在使用ECharts时，拖拽页面后，ECharts缩小的问题
vue中在tabs选项卡切换时echarts图表宽度由100%变为100px
风如也的博客
11-10 1348
使用场景：在tab 选项卡中使用了 echart 图表，然后在页面切换时，echarts 图表的宽度由原来的 100% 变为 100px 问题原因：echarts 渲染时 tab 选项卡 的 display 属性为 none，所以 width 属性为 100% 就没有可继承项，被 echarts 自带的方法切割成 100px 解决办法：使用 this.$nextTick <ul class="tabbar"> <li><a href="javascript:void(0)
vue中有table切换时echart图不显示或者显示不合适的情况
deciduous_leaves的博客
03-16 734
问题说明：问题是这样，echart图在第一页，初次进入显示正常，但是切换到第二页，再点回第一页，图就不显示，或者是第一页的图出现在了其他页 解决：v-if换成v-show 详细说明：其实问题很简单，就是学习基础的时候经常见到的v-if和v-show的区别 v-if:元素不存在，用于不频繁的切换 v-show:元素存在，只是通过display属性将其隐藏，用于频繁的切换 可能也会有人说v-...
echart vue 图表大小_vue使用echarts切换tab出现图表被压缩，宽度变窄问题
weixin_39744230的博客
01-12 1164
在作项目的时候，遇到图表在切换试图的时候，发现图表会被压缩起来了，javascript 在tabs切换中有echarts的话，咱们会发现初始化的那个echarts是有宽度的，当点击tabs切换以后，切换过来的echarts只剩下100px的宽度。这是由于渲染的时机不对，咱们须要在点击到当前切换的时候在echarts父级加载完毕以后在执行echarts，而不是在页面初始化的时候就把全部tabs里面的...
vue+echarts项目中切换页面或者刷新宽度改变 图表显示不全的问题
David_zjh的博客
09-03 1033
vue+echarts项目中切换页面或者刷新宽度改变 图表显示不全的问题@TOC 首先npm安装echarts $ npm install echarts --save 在main.js中导入echarts import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts 页面引入echarts图表 首先要有一个有id 和固定宽高的盒子 然后data中引入 option 然后再methods初始化图表 然后给select选择
tab选项卡切换时echarts无法正常加载显示问题的解决方案
、蹄码笑春风的博客
09-06 1357
主 要问题重现： 带表格式儿可拖动的图表还是第一次整：下面的代码应该能帮到你们吧 var myChart; // 员工效益 var _myChartemployfits = function () { if (myChart != null && myChart != "" && myChart != undefined) { myChart.dispose(); } myChart = echarts.init(doc.
vue中tab页签切换导致echarts被压缩的问题
weixin_48474646的博客
07-01 1107
vue中使用tab进行页签切换，echarts图表的宽度设为100%的情况下，图表出现压缩变形的情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值