echarts 图表放在 swiper 组件中,导致swiper 组件无法滑动切换?
发布于 7 年前 作者 jingmo 12101 次浏览 来自 官方Issues

微信小程序中,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 一个是模拟层(定位到顶部, 可以实现拖动)

我也遇到这个问题,请问解决了吗?

回到顶部