小程序
小游戏
企业微信
微信支付
扫描小程序码分享
微信小程序中，echarts 图表放在 swiper 组件中，导致swiper 组件无法滑动切换！有大佬遇到过么？有没有啥好的解决方法？现在是通过点击边上的 tip 来凑合切换了！
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
如果是ec-canvas, 按下边的配置
ec: {
disableTouch: true
},
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
这个我觉得是因为 echarts 里面有鼠标的click hover事件吧, 拖拽不会生效, 我提供一个解决的方法, 在你放置echarts的swiper-item元素内部 添加一个宽高100%; position: absolute;的元素 这样是可以拖动的;
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item style="position: relative;">
<view style="height: 400rpx;width: 400rpx;">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
<view class="aaa" style=" position: absolute;left: 0;top: 0;height: 400rpx;width: 400rpx;">123</view>
</swiper-item>
</block>
</swiper>
上面是代码demo 加粗的一个是echarts 一个是模拟层(定位到顶部, 可以实现拖动)
我也遇到这个问题，请问解决了吗？
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
如果是ec-canvas, 按下边的配置
ec: {
disableTouch: true
},
这个我觉得是因为 echarts 里面有鼠标的click hover事件吧, 拖拽不会生效, 我提供一个解决的方法, 在你放置echarts的swiper-item元素内部 添加一个宽高100%; position: absolute;的元素 这样是可以拖动的;
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item style="position: relative;">
<view style="height: 400rpx;width: 400rpx;">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
<view class="aaa" style=" position: absolute;left: 0;top: 0;height: 400rpx;width: 400rpx;">123</view>
</swiper-item>
</block>
</swiper>
上面是代码demo 加粗的一个是echarts 一个是模拟层(定位到顶部, 可以实现拖动)
我也遇到这个问题，请问解决了吗？