echarts滚动条如何禁用缩放，只能平移滚动呢？

已于 2022-02-07 16:16:22 修改
阅读量9.5k 收藏 3
点赞数 1
文章标签： echarts
于 2021-07-16 08:52:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43524562/article/details/118784035
版权
在Echarts中，若要禁止滚动条的缩放功能，可以设置zoomLock属性为true，确保用户只能进行平移操作。同时，为了确保图表尺寸计算准确，可以在设置后调用myChart.resize()方法进行重绘。
摘要由CSDN通过智能技术生成

在这里插入图片描述
只需设置zoomLock的值为true 就可禁止拖动滚动条两端进行缩放
代码截图如下
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
187行 加一个 myChart.resize()方法，这样让echarts图重新计算宽高 避免出现计算不准的情况 在这里插入图片描述

echarts zoomLock的作用点这里

UTF-886
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Echarts 显示指定区域内容 + 不允许控制缩放
虎康的博客
06-13 3253
在开发中，遇到如下一个需求，要展示指定区域的图形，并控制其不允许缩放。第一想到的就是控件 dataZoom 中设置指定展示的区域，总结如下。
swing jtextArea滚动条和文字缩放效果
08-28
"swing jtextArea滚动条和文字缩放效果详解" swing jtextArea是Java Swing中的一种组件，用于显示多行文本。今天，我们将详细介绍swing jtextArea滚动条和文字缩放效果，并提供了相关的代码实例。 首先，让我们...
Echarts map3D 禁止鼠标滚轮缩放
weixin_46382462的博客
01-16 2018
Echarts map3D 禁止鼠标滚轮缩放
关于优化echarts datazoom鼠标滚轮缩放灵敏度的问题
最新发布
qq_37225650的博客
06-17 267
产品那边反应图表缩放要滚很久才能滚到最小的秒级，然后本身echarts datazoom配置是不支持这个功能配置的，于是通过去鼠标wheel事件去优化，思路就是找到鼠标的相对x轴的坐标，通过这个坐标去修改datazoom的start、end，就可以在原有基础上，扩大倍数，基本滚两三下就滚到底了，具体代码如下，我用的是vue-echarts，datazoom是配置的inside，x轴我是时间轴。
echarts部分图表自带鼠标滚轮滑动整体缩放效果与拖拽整体移动效果，如何取消？
qq_44776454的博客
09-06 1741
echarts图表取消拖动和缩放
echarts 地图拖拽和缩放
weixin_45328041的博客
07-13 5671
禁止拖拽和缩放 在配置中roam设置为false,开启为true 只拖拽或只缩放 缩放 roam设置为’scale’，拖拽roam设置为’move’
echarts的地图取消鼠标滚轮缩放配置项
weixin_45294459的博客
06-15 1874
echarts的地图取消鼠标滚轮缩放配置项
高德地图+echarts禁止缩放
weixin_47711357的博客
01-12 2596
高德地图+echarts禁止缩放 map.setStatus({ dragEnable: false, // 地图是否可通过鼠标拖拽平移，默认为true zoomEnable: true, //地图是否可缩放，默认值为true })
picturebox控件图片缩放和平移
09-17
在开发图形用户界面时，我们经常需要对PictureBox中的图片进行缩放和平移操作，以满足不同场景的需求。本篇文章将详细探讨如何利用PictureBox控件实现图片的缩放和平移功能，并通过已封装的类来演示其实现方式。 ...
19.如何设置滚动条的滚动范围？（Visual C++编程 源代码）
06-28
19.如何设置滚动条的滚动范围？（Visual C++编程 源代码）19.如何设置滚动条的滚动范围？（Visual C++编程 源代码）19.如何设置滚动条的滚动范围？（Visual C++编程 源代码）19.如何设置滚动条的滚动范围？（Visual ...
6.如何使用滚动条控件？（Visual C++编程 源代码）
06-26
6.如何使用滚动条控件？（Visual C++编程 源代码）6.如何使用滚动条控件？（Visual C++编程 源代码）6.如何使用滚动条控件？（Visual C++编程 源代码）6.如何使用滚动条控件？（Visual C++编程 源代码）6.如何使用...
wpf 禁用当前页面滚动条
09-29
有时我们需要禁用控件本身的滚动，统一使用外部滚动条。使用方式 <behaviors:PreviewMouseWheelHandledBehavior></behaviors:PreviewMouseWheelHandledBehavior> </i:Interaction.Behaviors>
echarts 柱形图 Y轴数据多，鼠标滚动显示数据，不缩放
qq_40269801的博客
06-29 3659
坐标轴数据太多，只能滚动显示，滚动的时候，不想缩放，单纯平移就好。
08-Echarts配置系列之：dataZoom 区域缩放组件
youyudehan的博客
11-09 8060
简单快速了解 Echarts 中 dataZoom 区域缩放组件配置，并提供简单的示例代码参考
echarts 当数据过多时，我们使用dataZoom来进行缩放，但是因为数据差距过大而不显示比较大的数据的解决方法
lsn690607887的博客
06-27 2178
echarts 当数据过多时，我们使用dataZoom来进行缩放，但是因为数据差距过大而不显示比较大的数据的解决方法
echarts添加滚动条，滚动条不允许缩放
Dyc_SE的博客
07-27 1999
echarts添加滚动条，滚动条不允许缩放
解决 ECharts 滚动条数据走势背景及禁用滚动条拖动缩放问题
weixin_68270118的博客
05-15 678
在显示柱状图的滚动条时，滚动条背景会显示数据走势，改变背景颜色后，数据走势仍然可见。此外，当我们使用鼠标拖动滚动条时，滚动条的长度可能会不受控制地变化。解决这个问题，我们可以在。
Echarts地图缩放(平面,3D,scatter(散点))
热门推荐
weixin_44031176的博客
08-24 1万+
Echarts地图缩放 平面地图缩放设置(roam : true 允许缩放;false 禁止缩放): bmap: { type:'map', //地图中心经纬度。 center: [116.46, 39.92], //地图的缩放等级 一次性放大的大小 zoom: 10, // 是否开启鼠标缩放和平移漫游。默认不开启。 如果只想要开启缩放或者平移， 可
echarts极坐标缩放平移
08-12
对于 ECharts 的极坐标图表，你可以使用缩放和平移来调整视图。以下是一些常用的方法： 1. 缩放（Zoom）：可以通过鼠标滚轮或手势来进行缩放。向前滚动鼠标滚轮或进行放大手势将放大图表，向后滚动鼠标滚轮或进行缩小手势将缩小图表。 2. 平移（Pan）：可以通过鼠标拖动或手势来进行平移。按住鼠标左键并拖动，或使用手指在触摸屏上滑动来平移图表。 3. 缩放和平移同时进行：可以结合缩放和平移来调整图表的位置和大小。例如，按住鼠标右键并拖动，或使用两个手指在触摸屏上滑动来同时进行缩放和平移操作。 此外，ECharts 还提供了一些 API 方法可以用于控制缩放和平移： - setOption: 使用该方法可以设置图表的配置项，包括极坐标的缩放和平移参数。 - dispatchAction: 使用该方法可以触发图表的行为，如缩放和平移。 你可以根据具体的需求使用以上方法来实现极坐标图表的缩放和平移效果。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值