解决vue使用swiper轮播echarts组件，loop模式下，第二次出现空白问题

最新推荐文章于 2024-03-16 14:15:43 发布
最新推荐文章于 2024-03-16 14:15:43 发布
阅读量1k 收藏 1
点赞数 2
文章标签： 经验分享 echarts vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57982282/article/details/125438770
版权

如题，loop模式下复制的canvas未进行绘制。

e962a7b3ab7e477085459056c40fad14.png

在百度了很多解决办法，包括使用class进行init，去掉echarts的echarts_instance属性等方法，都没有解决这问题。最后我的解决办法如下

将echarts的渲染模式，从canvas改为svg 

c95a12f70ca04a78b1741d6d5289e86f.png

 

 

了、尘
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
关于echarts使用的常见问题总结
weixin_30540691的博客
06-08 1493
关于echarts使用的问题总结1.legend图例不显示的问题: 在legend中的data为一个数组项,数组项通常为一个字符串，每一项需要对应一个系列的 name,如果数组项的值与name不相符则图例不会显示;2.图表位置无法紧贴画布边缘的问题: 在grid绘图网格里,containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示...
vue2.0使用swiper组件实现轮播效果
12-29
轻松实现vue2.0轮播效果，供大家参考，具体内容如下 1、安装swiper npm install swiper@3.4.1 --save-dev 2、引用组件 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 3、html页面代码...
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
10-17
今天小编就为大家分享一篇解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Bootstrap+echarts实现轮播效果 第二屏echarts图不显示
chenlim87的博客
06-13 377
最近写了个大屏需求，有轮播效果，原代码用的jQuery+bootstrap，所以轮播就用了bootstrap的轮播组件。写好后发现有个问题，首屏的echarts图渲染成功，第二屏及后面的都没渲染出来。故该层的长宽没有被初始化，而echart在页面加载完时就开始创建图表，此时轮播的第一屏被激活（active）,故正常显示，第二屏没有active，div的长宽没有被初始化，故显示不了。究其原因是，轮播图中的active样式中的display属性问题，当没有active样式时 display为none，
Vue3插入轮播图指示器后不显示问题，报错
最新发布
sunny__hellen的专栏
03-16 184
原因：不同版本的swiper可能使用方式存在差异。解决办法，更换swiper版本。
echarts图表初始大小问题及echarts随窗口变化自适应
weixin_33853827的博客
06-25 2335
最近在做一个轮播图，使用的是element的Carousel走马灯，每一个走马灯里是eachrts图，开始页面加载的时候发现echarts图并不能自适应，开始以为是走马灯的问题，后来发现不是 不知道大家在用echarts的时候有没有遇到这种情况： 最开始盛放图表的容器是隐藏（或者tab切换）的，然后再显示的时候，里面echarts图表就没用初始大小了。比如我遇到的这种： 有童鞋这会儿估计...
关于用swiper轮播配置，和轮播会产生白屏以及虚假页点击失效
weixin_41885772的博客
10-28 2905
1.swiper轮播配置: 结构 <swiper :options="swiperOptions"> <swiper-slide> </swiper-slide> <swiper> 参数配置： swiperOptions: { effect: 'coverflow', grabCursor: true, centeredSlides: false, loop: true, //
swiper 设置 loop 为 true 时出现空白页
MrQiu的博客
01-13 2927
1.问题如下图所示 循环滑动到最后一个的时候，会没显示下一个，滑动一下才出现。 2.解决方案 设置一下loopAdditionalSlides: 1 loop 模式下会在 slides 前后复制若干个 slide,，前后复制的个数不会大于原总个数。 默认为 0，前后各复制 1 个。0,1,2 --> 2,0,1,2,0 例：取值为 1，0,1,2 --> 1,2,0,1,2,0,1 值越大， dom 会复制的越多，出现空白的几率就越小。 ...
swiper定义loop为true时有空白的页
babulongbo的博客
03-28 8750
当使用swiper定义loop为true是，一张或最后一张会出现空白页，要解决这个问题可以使用 loopAdditionalSlides: 2, loopAdditionalSlides的是值越大，出现空白的几率越小，但是也不要太大，否则dom会复制的太多...
使用swiper轮播echarts图表时出现的图表不显示的问题
qq_41373791的博客
10-25 546
开发项目可视化大屏的需求，有一块需要循环轮播展示echarts图表，于是选用了比较流行的swiper插件，但是实际开发时确发现，轮播到最后一个图的时候，图表并没有显示。于是，开始排查问题原因。注意vue项目中，图表不要使用ref绑定dom，因为编译后ref会消失，swiper复制的时候slide上面是没有ref的。给图表绑定相同的类名，初始化图表的时候，通过for循环初始化。
swiper 滚动模式下的Echarts图展示问题
肖肖肖丽珠的博客
01-13 946
ecahrt位于swiper里面。在微信开发者工具里查看没什么问题，正常拖拽。但是在手机上看的话，要么时echart没有加载出来。要么时位置不对。 感觉是swiper样式导致的，把他放在外面都是好的。 最后百度查到： 1.canvas 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。 2.请勿在 scroll-view、swiper、picker-view、movable-view 中使用 canvas 组件。 3. css 动画对 canvas 组件无效。
swiper在vue项目中loop循环轮播失效的解决方法
10-18
今天小编就为大家分享一篇swiper在vue项目中loop循环轮播失效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue使用swiper.js重叠轮播组建样式
12-30
本文实例为大家分享了vue使用swiper.js重叠轮播组建样式，供大家参考，具体内容如下 <swiper class=swiper options=swiperOption> <swiper class=swiper-slide> 一起来观看 Wes Anderson的色彩回旋舞...
vue使用swiper实现中间大两边小的轮播图效果
10-15
主要介绍了vue使用swiper实现中间大两边小的轮播图效果，本文分步骤通过实例代码讲解的非常详细,需要的朋友可以参考下
vue2.0使用swiper组件实现轮播的示例代码
08-27
下面小编就为大家分享一篇vue2.0使用swiper组件实现轮播的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2022-02-10 学习记录：swiper组件轮播，loop为true时出现多出的空白多余部分
weixin_44845483的博客
02-10 1391
swiper组件轮播属性loop为true时会循环轮播，即轮播到最后一个时不会突然转向第一个，产生反方向轮播。但是如果轮播组件内部引入了其他组件，比如滚动数字组件，那么就会多出一些多余的部分，所以再swiper组件中，如果需要用到loop为true属性时，不能引入其他组件。 ...
【惊呆了】swiper设置loop时出现空白页面解决
qq_49279305的博客
04-25 3936
swiper设置loop时出现空白页面解决 在我们使用swiper的时候会通常会有循环切换、无限循环的需求。 我们通过loop让swiper无限循环时，可能会出现空白页面，这样体验起来很不舒服，这个可通过loopAdditionalSlides属性解决。 loopAdditionalSlides 会把你的 slides复制若干个，前后复制的个数不会大于原来的总个数。 var mySwiper = new Swiper('.swiper', { loop: true, loopAdditi
vue-awesome-swiper中使用loop多一个空白页问题处理
weixin_43837268的博客
03-17 4431
1.template <swiper :options="swiperOption" ref="mySwiper" v-if='slides.length'> <swiper-slide v-for="(slide, i) in slides" :index="i" :key="i" > <div class="i...
vue使用swiper轮播切换页面
05-24
非常感谢您的提问，关于vue使用swiper轮播切换页面的问题，可以通过以下步骤实现： 1. 首先，需要安装swiper插件，可以使用npm命令进行安装：npm install swiper --save。 2. 在Vue组件中引入swiper插件，可以使用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值