vue项目中tab切换展示不同的echarts图表，切换后图表不显示，为空白，解决方案，为每个echarts id的div设置宽高即可

最新推荐文章于 2023-10-25 14:56:54 发布
最新推荐文章于 2023-10-25 14:56:54 发布
阅读量3k 收藏 1
点赞数 1
分类专栏： 问题总结 文章标签： vue tab切换 echarts图表 tab切换 echarts图表不显示 空白
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/binbin_youyou/article/details/98475467
版权

vue项目中tab切换展示不同的echarts图表，切换后图表不显示，为空白，解决方案，为每个echarts id的div设置宽高即可

binbin_youyou
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
eCharts使用总结：属性解释+修改+效果展示+多个图表切换
webFront的博客
01-25 1万+
最近做统计图表使用的是echarts插件，简单解释一下用到的每个配置项是干什么用的，以及效果展示在什么位置； 实现了多个图表切换的功能； 本人是入门级小白，有什么错误的地方请大神指示，最全最详细的解释还是去看官网的配置吧！配置项都在这里了http://echarts.baidu.com/option.html#title， function weekSumShow (){ v
基于Echarts图表在div动态切换时不显示的解决方式
10-15
主要介绍了基于Echarts图表在div动态切换时不显示的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 项目使用 ECharts 使用路由或者点击浏览器前进/后退切换页面回来图表不显示
weixin_60886885的博客
06-13 2022
在 Vue 项目中使用 ECharts 时，一开始图表能渲染出来，当切换到其他页面再回来的时候，图表就不显示了。
在Vue 中实现循环渲染多个相同echarts图表
10-15
主要介绍了在Vue 中实现循环渲染多个相同echarts图表，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3 项目中出现的空白页面的总结
lalalalamjm的博客
10-25 1750
去年和今年着手的两个项目都有出现这个问题，查空白页面的问题相当恶心，没有头绪只能一点点的删除代码排查，第一个项目当时用的技术是vue3 + element-plus，空白页出现的原因是页面在加载elementPlus的数据表格时，数据需要二次处理用到map或filter(具体是用的forEach还是filter记不清楚了)重新整合数据，用map可以避免空白，filter会导致页面有空白，具体是什么原因，也没有想清楚，解决办法是换成map循环数据就没有问题。
echarts图表之间的切换
m0_74359467的博客
09-13 718
然后就是呢~在js中引入假数据或外部接口并通过相应的点击事件赋给统计图type相应属性。首先先引入echarts插件。希望能对大家有帮助哦~
vue 一个组件中一个或者多个动态echarts图表切换渲染问题
agua001的博客
04-20 3958
vue 一个组件中一个或者多个动态echarts图表切换渲染问题； echarts.js:2286 Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.
用tab做echarts图表切换的案例
weixin_46679775的博客
09-14 702
echarts做tab切换是解决各种报错问题
vue2使用elementUI的el-tabs中有多个echarts变形解决方法
m0_73854403的博客
06-26 612
在tabs标签中使用懒加载 只有选中当前的tabs页, 才会渲染echarts ,再发送请求, 执行该tabs内部代码逻辑;另外使用v-show进行判断,对其他tabs进行隐藏. 当然其他方法也有 , 不过个人推荐这一种方法 , 比较简单使用, 另外对初始加载也会友好一些, 因为使用到了懒加载。
vue使用echarts——一个页面多个echarts
wang1811539550的博客
08-18 1115
直接用id获取元素是获取不到的，必须在onMounted生命周期内获取，但是用这种方法切换路由再返回后会警告dom已经初始化echarts，需要用vue获取dom元素的方法ref，但是初始化还是要放在onMounted生命周期内。
完美解决vue 中多个echarts图表自适应的问题
10-15
主要介绍了完美解决vue 中多个echarts图表自适应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中echarts图表大小适应窗口大小且不需要刷新案例
10-15
主要介绍了vue中echarts图表大小适应窗口大小且不需要刷新案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue项目tab切换页面偶尔不显示的问题
lgdaren的博客
08-24 1787
项目开发过程中遇到一个bug，tab切换页面，某一块会莫名其妙消失不显示，控制台报错 vue cannot read property ‘length’ of null。查阅了资料说可能是因为数据加载需要一段时间，此时渲染数据找不到数据length报错导致的，需要用v-if判断一下数据有没有。但是试了这个方法发现还是不行。最后在同事的帮助下找到了问题的解决方法。只需在给数据赋值的时候做个处理。 t...
Vue+element 使用Tabs切换echarts图表，显示空白
qq_42342276的博客
08-27 2585
Vue+element 使用Tabs切换echarts图表，显示空白 解决办法： 第一步：给el-tab-pane标签添加lazy属性，设置为true，表示延迟渲染 <el-tab-pane label="客户数量" key="first" name="first" :lazy="true"></el-tab-pane> 第二步：使用v-if判断切换到当前tab时再渲染该内容 <!-- activeName为el-tabs标签绑定的值--> <div cla
vue tab切换echars宽度不对，显示100px问题
Z姑娘早安
09-10 544
vue tab切换echars宽度不对，显示100px问题使用vue的el-tab-pane组件，切换到第二个组件的时候，底下的echars图宽度显示为100px第一步：获取外层元素的宽度，赋值给echars第二步：切换到第二个tab栏的时候，重绘图表， 使用vue的el-tab-pane组件，切换到第二个组件的时候，底下的echars图宽度显示为100px 网上搜的乱七八糟的onsize什么的没...
【Echarts+Select下拉框】实现（同图表切换不同数据）的方法
热门推荐
weixin_50450473的博客
07-28 1万+
html： <div class="turangBox"> <div class="backbg"> <select name="status" id="tabs" class="selectGroup changeItem"> <option>水温</option> <option>浊度</option> <option>酸碱度</option&gt..
echarts图表切换---uniapp公众号点击tabs切换不同的图表
m0_72929120的博客
07-08 463
【代码】echarts图表切换---uniapp公众号点击tabs切换不同的图表。
vue中一个页面循环多项echarts应该如何处理？
weixin_55726815的博客
07-13 1518
循环遍历您的item列表，并为每个item创建一个独立的echarts实例。在创建实例时，您可以将实例添加到。钩子函数 (或者定义的函数中) 中，使用。2. 在Vue组件的。
node-v6.9.4-linux-s390x.tar.xz
最新发布
05-09
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
vue 中 多个 echarts图表切换显示,宽度width变化,使用 resize() 失效的一种情况
05-16
在 Vue 中，当我们需要切换多个 Echarts 图表的显示，而每个图表的宽度都不同时，就会出现 resize() 失效的情况。 这是因为 resize() 方法是用于重新调整图表的大小的，所以当多个图表的大小不同时，调用该方法就无法完整地重新绘制图表。 解决该问题的方法是使用类似于 v-if 之类的指令或者属性来动态改变每个图表的显示状态。例如，当某个图表需要显示时，我们可以将其对应的父元素的 display 属性设置为 block，当其需要隐藏时，将其设置为 none。同时，我们还需要动态改变每个图表的宽度属性，以确保 resize() 方法能够正常调用。 代码示例如下： ```html <template> <div class="chart-container"> <div v-show="showChart1" :style="{width: '500px'}"> <!-- echarts1 的配置和数据 --> </div> <div v-show="showChart2" :style="{width: '600px'}"> <!-- echarts2 的配置和数据 --> </div> <div v-show="showChart3" :style="{width: '700px'}"> <!-- echarts3 的配置和数据 --> </div> </div> </template> <script> export default { data() { return { showChart1: true, showChart2: false, showChart3: false, }; }, methods: { toggleChart() { this.showChart1 = !this.showChart1; this.showChart2 = !this.showChart2; this.showChart3 = !this.showChart3; this.$nextTick(() => { window.dispatchEvent(new Event('resize')); }); }, }, }; </script> ``` 在上述示例中，我们使用了 v-show 指令来动态显示和隐藏每个图表，并使用 :style 绑定了每个图表的宽度属性。在 toggleChart 方法中，我们通过改变 showChart 的值来动态切换图表的显示状态，并在切换后调用了 resize() 方法重新绘制图表。注意，在调用 resize() 方法前需要使用 $nextTick 方法将其放入微任务队列中，以确保元素已经渲染完毕。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值