Echart5.0实现限制地图不可拖拽出盒子外部（全网独发）

已于 2023-05-16 14:12:33 修改
阅读量1.3k 收藏
点赞数
分类专栏： echart 文章标签： 前端 html javascript
于 2023-05-14 10:23:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44706619/article/details/130665934
版权
本文介绍了如何在Echart5.0中实现限制地图拖拽超出图表区域的功能。通过开启地图的roam属性并监听geoRoam事件动态调整地图中心，以确保地图始终在可视区域内。同时，提供了进阶版的解决方案，以解决在某些情况下地图仍可能被拖出边界的问题。
摘要由CSDN通过智能技术生成
功能背景

正常的ecahrt地图，不管是使用了geo的拖拽还是series的拖拽，只要开启了roam，就一定会可能被拖到盒子外部，然后就拖不回来了，没有找到echart的默认配置项可以限制这一情况。所以自行实现。

图片效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

了解本专栏 订阅专栏 解锁全文 超级会员免费看
_小郑有点困了
关注
专栏目录
订阅专栏
vue使用echart自定义标签以及颜色（echart 5.0以上版本）
_小郑有点困了的博客
09-16 812
常规样式 UI画的样式效果 细节在于这个小圆点的颜色要和饼图块的颜色一致，这在5.0（echarts版本）之前的版本是可以使用这一段代码实现的。 label:{ formatter: params => {//● return ( '{icon|▅}{name|' +params.name+ '}{value|' + params.value + '}' ); },
谷歌地图5.0 离线数据地图
12-21
谷歌地图5.0 离线数据地图 北京地区 共6个文件 放到sd card/android/data/ 另外需要一个com.google.android.apps.maps(合并).bat文件合并。 请下载完整，包括（1）（2）（3）（4）（5）（6） 本人可一直在用。如需要...
Echarts地图组件，可拖拽超出父盒子范围问题解决
weixin_44875693的博客
05-06 2432
问题：在使用echarts地图时候，开启地图可拖拽功能，会出现地图拖出父级范围，消失不见; 解决方法： // 给父盒子绑定离开事件 <div @mouseleave="mouseleave"></div> methods：{ // 鼠标离开父盒子范围，重绘地图 mouseleave（）{ this.chart.setOption(this.option,true) } } ...
Echarts地图缩放(平面,3D,scatter(散点))
weixin_44031176的博客
08-24 1万+
Echarts地图缩放 平面地图缩放设置(roam : true 允许缩放;false 禁止缩放): bmap: { type:'map', //地图中心经纬度。 center: [116.46, 39.92], //地图的缩放等级 一次性放大的大小 zoom: 10, // 是否开启鼠标缩放和平移漫游。默认不开启。 如果只想要开启缩放或者平移， 可
echarts关系图(力引导)拖动节点不还原位置
01-03
echarts关系图(力引导)拖动节点不还原位置,在init创建时第三个参数对象添加myOpts_:{draggableFixed_:true}即可,如: var mychart = echarts.init(dom,null,{myOpts_:{draggableFixed_:true}});创建一个拖动不还原的力引导关系图(需要 type: 'graph',layout:'force',draggable :true,且所有节点fixed:true)
ECharts图表插件禁止拖动合并
热门推荐
qingluoII的博客
12-16 1万+
ECharts是一个图表类JS插件，地址：http://echarts.baidu.com/index.html     学习和使用起来都比较方便，最近使用的时候发现，ECharts虽然自带的有拖拽合并的功能，但在某些时候，并不想让生成的图表具有这个功能，于是可以使用下列的方法来禁用：calculable : false,     在代码中展示为： //  echart        
关于echarts地图禁止拖拽问题
JINX1024的博客
06-27 8765
虽然官方文档里有，但是我还是记一下方便自己记住 在series中将roam设置为false就可以禁用拖拽
解决echart地图在平移和缩放后，重新生成地图，这时生成的地图不在容器中间，会跑到容器外面去。
Terenceno的博客
06-27 7902
项目需求: 用echart做一个中国地图（可缩放和平移），添加省的点击事件。 完成之后出现bug 项目做完之后发现，在地图平移之后，点击到省，由于中心点的偏移，省跑到容器意外的地方去了所以看不见。百度查了很多资料依然没有解决这个问题。一开始以为是数据更新的时候需要重置坐标轴的中心点，但是中心点是经纬度，比较麻烦 解决办法 后来发现，是重新绘制图表的时候需要：this.chart.setOptio...
vue3 使用echart 移动端无法拖动
最新发布
weixin_42619992的博客
09-21 714
看了半天，才发现声明chart.init()的变量用ref包起来了！使用了datazoom配置项，pc模式下可以正常左右拖动。项目在平板端上有一个h5项目，用到了echart折线图。f12使用移动端模式，就不行了，一拖动就莫名奇妙报错。用普通变量声明就正常了。
echart5.0附带china.js可以写地图的包
05-25
总的来说，ECharts 5.0 提供的 `china.js` 文件是实现中国地图可视化的重要工具，结合其丰富的图表类型和强大的功能，为开发者提供了高效且灵活的数据可视化解决方案。无论是企业内部的业务分析，还是面向公众的信息...
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
10-17
制作一个折线图用于显示当前24小时的数据，并且可以通过拖动折现图设置数据，接下来通过本文给大家分享vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置），感兴趣的朋友跟随一起学习吧
thinkcmf5(5.0.190419) 地址美化后 电脑端，移动端，网站地图生成
12-10
《ThinkCMF5.0.190419 网站地图生成与地址美化技术详解》 在网站优化和搜索引擎友好性方面，网站地图(Sitemap)扮演着至关重要的角色。ThinkCMF5.0 是一款强大的内容管理框架，而其中的网站地图生成插件则进一步提升...
echarts部分图表自带鼠标滚轮滑动整体缩放效果与拖拽整体移动效果，如何取消？
qq_44776454的博客
09-06 1971
echarts图表取消拖动和缩放
echarts使用地图超出dom范围
weixin_43964113的博客
12-12 4457
echarts使用地图超出dom范围 问题如下 解决办法 geo: { layoutCenter: ['30%', '30%'], // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域 layoutSize: 100 // 设置这两个值后 left/right/top/bottom/width/height 无效。 } ...
echart地图缩放拖拽功能
love_yourself_ok的博客
12-09 1741
echart地图缩放拖拽功能 zoom: 1.2, roam:true, //支持拖拽缩放 scaleLimit: { //滚轮缩放的极限控制 min: 1, //缩放最小大小 max: 6 //缩放最大大小 },
echarts 地图：formatter设置弹窗，拖拽设置
小元子
01-06 404
echarts 地图：formatter设置弹窗，只缩放 不拖拽设置
echarts可拖动地图下钻实现
qq_41314311的博客
03-06 873
最近做了一个地图，需求是可从世界地图下钻到各省份，然后在设置可拖动时设置了 series-roam: true，却发现一个问题，在世界下钻到国家时重新渲染的地图发生了偏移，甚至到省份时都已经完全偏移不见了，百度了很多都没有详细说明，在此记录一下这个问题 解决方法 在 **chart.setOption(option);之后继续设置 chart.clear();**完美解决了这个问题 ...
解决echarts在平移和缩放中国地图后，下钻到下一级具体省份地图时生成的地图不在容器中间，会跑到容器外面去。
hzxOnlineOk的博客
12-02 1483
问题： echart地图三级下钻地图在平移和缩放后，点击到省，由于中心点的偏移，该省市区地图跑到容器以外的地方去了，导致新生成的地图看不见 解决方法： 后来发现，是重新绘制图表的时候需要： myChart.setOption(option, true），在setOption()方法中第二个参数传true，表示重新绘制，最后解决 ...
echarts 地图拖拽和缩放
weixin_45328041的博客
07-13 5817
禁止拖拽和缩放 在配置中roam设置为false,开启为true 只拖拽或只缩放 缩放 roam设置为’scale’，拖拽roam设置为’move’
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_小郑有点困了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值