先看条形图
如图所示是，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：文章来源：https://www.toymoban.com/news/detail-853842.html
moveChat() {
wx.setPageStyle({
style: {
overflow: "hidden",
},
});
},于是乎，问题就解决了，还有其它更优解，希望小伙伴补充哦文章来源地址https://www.toymoban.com/news/detail-853842.html
到了这里，关于Echarts微信小程序中条形图上下滑动引起页面滚动问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
