Echarts微信小程序中条形图上下滑动引起页面滚动问题

先看条形图

如图所示是，echarts中典型的横向柱状图（条形图）

需求：可以让图形进行放大缩小，并且放大后可上下滚动查看；

主要问题：放大图表之后，手指上下滑动会引起页面整体滚动，影响数据查看体验

PS：看了很多方案，有直接修改源码阻止touchstart、touchmove、touchcancel这三个事件触发，确实也能够防止页面出现滚动，但是也阻止了双指放大缩小。也有使用echarts中dataZoom配置preventDefaultMouseMove等方法，这个方法我也更新到最新版本，但是也没有效果。

解决办法：总体思路，手指触摸图形，防止事件冒泡到页面引起页面滚动，设置css属性，overflow: "hidden"

overflow: "hidden"

注意：避免整个页面出现不能滚动的问题，建议在图表外层嵌套view标签，并且在js函数中处理css属性

wxml：touchmove  监听手指触摸后移动事件，我使用catch防止冒泡，有双保险的意思

<view class="order-price line-dom " catch:touchmove="moveChat">
	<bar-chart/>  //封装的echarts组件
</view>

js：

moveChat() {
      wx.setPageStyle({
        style: {
          overflow: "hidden",
        },
      });
    },

于是乎，问题就解决了，还有其它更优解，希望小伙伴补充哦