收藏
回答

小程序中使用echarts如何随页面滑动?

关于echarts图表有三个问题

1.在开发者工具中,图表组件固定在页面上,无法随页面滑动,ios真机上可以正常滑动,层级正常

2.使用force-use-old-canvas="true"属性,开发者工具上可以正常滑动,真机上层级最高,弹窗组件遮挡不住,已经确认canvas使用的是新版本,有type=“2d”属性,设置z-index值仍然不生效。

3.使用echarts的dataZoom属性不生效,无法做到柱状图表纵向手动缩放的效果。求各位大佬解答。

回答关注问题邀请回答
收藏

1 个回答

  • 星火燎原²⁰²⁵
    星火燎原²⁰²⁵
    06-20

    开发者工具中的原生组件(如 Canvas)层级固定,不支持滚动穿透,而真机环境表现正常。

    解决方案:

    1.外层容器优化

    确保图表包裹在可滚动容器(如 scroll-view)内,并设置容器高度:

    <scroll-view scroll-y style="height: 100vh;">
      <view style="height: 500rpx;">
        <ec-canvas canvas-id="chart" ec="{{ ec }}"></ec-canvas>
      </view>
      <!-- 其他内容 -->
    </scroll-view>
    

    2.开启原生滚动

    在 app.json 中全局启用原生滚动:

    {
      "window": {
        "enableNative": true
      }
    }
    


    希望能帮上你的忙!

    06-20
    有用
    回复 1
    • 远方
      远方
      06-20
      已经试过了,仍然浮在页面上面
      06-20
      回复
登录 后发表内容