关于echarts地图禁止拖拽问题

最新推荐文章于 2024-07-09 11:44:34 发布

江苏省精神病院玛主任

最新推荐文章于 2024-07-09 11:44:34 发布

阅读量8.7k

点赞数 7

本文链接：https://blog.csdn.net/JINX1024/article/details/106981906

版权

虽然官方文档里有，但是我还是记一下方便自己记住

在series中将roam设置为false就可以禁用拖拽

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

江苏省精神病院玛主任

关注关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

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

_小郑有点困了的博客

05-14

1319

正常的ecahrt地图，不管是使用了geo的拖拽还是series的拖拽，只要开启了roam，就一定会可能被拖到盒子外部，然后就拖不回来了，没有找到echart的默认配置项可以限制这一情况。5、计算出地图的上下左右110%的极值，当作是x,y坐标系，四个值，leftX，rightX，topY，bottomY，4、地图初始化的位置记为[50%,50%],无论向左、向右、向上、向下，都会是递增的结果。1、首先，默认开启geo的roam属性，允许开启拖拽，缩放。就是计算出来的geo的center距离中心的位置。

077：vue+mapbox 禁止启用dragPan，影响平移拖拽地图的功能

大剑师兰特的GIS世界

04-22

2008

演示如何在vue+mapbox 中禁止启用dragPan拖拽地图的功能。Mapbox GL JS 提供了一组内置的交互 handler，其中 DragPanHandler 是其中之一，它允许用户通过鼠标或触摸手势拖动地图来改变视口的位置。当你想要启用或禁用地图的平移功能时，可以对这个 handler 进行操作。

2 条评论您还未登录，请先登录后发表或查看评论

Echarts地图组件，可拖拽超出父盒子范围问题解决

weixin_44875693的博客

05-06

2391

问题：在使用echarts地图时候，开启地图可拖拽功能，会出现地图拖出父级范围，消失不见; 解决方法： // 给父盒子绑定离开事件 <div @mouseleave="mouseleave"></div> methods：{ // 鼠标离开父盒子范围，重绘地图 mouseleave（）{ this.chart.setOption(this.option,true) } } ...

echartsBug-dataZoom拖拽无效果

热门推荐

qingluoII的博客

12-16

1万+

ECharts是一个图表类JS插件，地址：http://echarts.baidu.com/index.html 学习和使用起来都比较方便，最近使用的时候发现，ECharts虽然自带的有拖拽合并的功能，但在某些时候，并不想让生成的图表具有这个功能，于是可以使用下列的方法来禁用：calculable : false, 在代码中展示为： // echart

echarts矩阵树图不可拖拽，取消点击节点后的行为设置

kkk109A的博客

11-26

2957

series: [ { type: 'treemap', width: '100%', height: '100%', roam: false, //是否开启拖拽漫游（移动和缩放） nodeClick: false, //点击节点后的行为,false无反应 ] ...

echarts中dataZoom拖拽不起效果或者鼠标滑过不显示tooltip的问题

qq_44871531的博客

01-05

1338

ref方法会递归遍历对象的所有属性，使所有属性都具备响应性,当对象很复杂时，过多的监听会导致性能上的损耗，也会对echarts页面渲染出现问题。vue3项目中，echarts使用dataZoom进行区域拖动，拖动下图红色框，数据展示无变化拖动功能失效。vue3中使用了ref或者reactive等初始化图表的变量。

echarts 设置手机端点击出现十字线‘toolTip’，并禁止曲线滑动，当十字线消失时允许曲线滚动

u014714147的博客

11-01

3172

echart手机端当十字线-toolTip出现时禁止曲线滑动，当十字线消失时允许曲线滚动最近做vue开发的时候发现echart，在展示toolTip时，手机端滚动crossLine时，曲线会跟着滚动，为了解决这个问题，写了这篇文章。直接上代码，具体代码如下实现功能的关键代码：设置是否可以滑动曲线设置是否显示toolTip给曲线设置点击监听，通过click控制toolTip的显示与隐藏最近做vue开发的时候发现echart，在展示toolTip时，手机端滚动crossLine时，曲线会跟着滚动，为了解决这个

echarts地图放大拖拽

weixin_49261425的博客

08-26

1340

let option = { color: ['#FF8C00', '#00acea', '#1DE9B6'], tooltip: { trigger: 'item', formatter: '{b}' }, geo: { map: '滁州', // aspectSca.

echarts.js图表插件带坐标点和放大缩小地图

11-20

压缩包中的`index.html`很可能是包含ECharts地图示例的网页，`favicon.ico`是网站的图标文件，`说明.txt`可能提供了关于如何使用这个示例的简单说明，而`找特效就上特效网www.zhaotexiao.com.url`则是一个链接指向...

使用echarts实现地图展示

柠檬不萌只是酸i

07-05

5206

先来看下结果展示：下面来看下代码：【引入china.js 以下代码可直接运行】 China.js文件的下载地址：https://github.com/liangrumeng2015/China.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

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

weixin_43524562的博客

07-16

9779

只需设置zoomLock的值为true 就可禁止拖动滚动条两端进行缩放代码截图如下 echarts zoomLock的作用点这里

解决echart地图在平移和缩放后，重新生成地图，这时生成的地图不在容器中间，会跑到容器外面去。

Terenceno的博客

06-27

7856

项目需求: 用echart做一个中国地图（可缩放和平移），添加省的点击事件。完成之后出现bug 项目做完之后发现，在地图平移之后，点击到省，由于中心点的偏移，省跑到容器意外的地方去了所以看不见。百度查了很多资料依然没有解决这个问题。一开始以为是数据更新的时候需要重置坐标轴的中心点，但是中心点是经纬度，比较麻烦解决办法后来发现，是重新绘制图表的时候需要：this.chart.setOptio...

Echarts map3D 禁止鼠标滚轮缩放

weixin_46382462的博客

01-16

2123

Echarts map3D 禁止鼠标滚轮缩放

echart 3d地图禁止缩放滑轮滚动转动

weixin_30394981的博客

08-14

2908

echart 3d地图 geo3D缺少roam属性所以也无法设置false 所以只能用其他方式来实现 1 ，设置地图投影大小然后设置投影的最大值最小值 orthographicSize: 110, //控制地图大小 maxOrthographicSize: 110, minOrthographicSize: 110,...

【echarts】实现单线与多线滚轮联动、隐藏拖拽、关闭动画

qq_41604569的博客

11-15

1632

在这个示例中，我们将dataZoom组件中的slider的show属性设置为false，从而隐藏了拖拽的slider。在这个示例中，我们将dataZoom组件的类型改为slider，并定义了两个slider类型的dataZoom，分别与x轴和y轴关联。通过拖动滑块，可以选择数据的范围，从而实现鼠标拖动联动变化。要通过鼠标滚轮联动变化echarts中的两组线，可以使用echarts的dataZoom组件来实现。实现鼠标移到图表时不闪动，可以使用echarts的animation配置项来控制图表的动画效果。

微信小程序在ios下Echarts图表不能滑动的解决方案

w36680130的博客

01-07

752

微信小程序在ios下Echarts图表不能滑动的解决方案

地图无法拖动缩放

sunfan

06-05

3988

地图无法移动缩放问题描述百度地图结合echart使用的使用过程中发现地图无法拖动和缩放，排除设置地图不可拖动的属性并去掉所有其他有可能挡住的元素，发现还是不行。发现问题再次排查发现，去掉相关样式是可以实现拖动的，定位到应该是由样式z-index=-1所导致的，去掉该样式或设置不为-1就可以了。 ...

echarts地图限制拖动范围demo

06-03

以下是一个简单的 echarts 地图限制拖动范围的 demo： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts Map Demo</title>  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body>  <div id="map" style="width: 100%; height: 500px;"></div> <script> // 初始化 echarts 实例 var myChart = echarts.init(document.getElementById('map')); // 配置 echarts 地图 var option = { // 地图类型 series: [{ type: 'map', mapType: 'china' }] }; // 设置限制拖动范围 myChart.setOption(option); var zoom = myChart.getOption().geo[0].zoom; var centerX = myChart.getOption().geo[0].center[0]; var centerY = myChart.getOption().geo[0].center[1]; var boundLeft = centerX - 20 / zoom; var boundRight = centerX + 20 / zoom; var boundTop = centerY - 10 / zoom; var boundBottom = centerY + 10 / zoom; myChart.setOption({ geo: { center: [centerX, centerY], zoom: zoom, roam: true, scaleLimit: { min: 1, max: 5 }, // 设置限制拖动范围 boundingCoords: [[boundLeft, boundTop], [boundRight, boundBottom]] } }); // 监听 echarts 地图缩放事件 myChart.on('geoRoam', function(params) { var zoom = params.zoom; var centerX = params.center[0]; var centerY = params.center[1]; var boundLeft = centerX - 20 / zoom; var boundRight = centerX + 20 / zoom; var boundTop = centerY - 10 / zoom; var boundBottom = centerY + 10 / zoom; myChart.setOption({ geo: { center: [centerX, centerY], zoom: zoom, roam: true, scaleLimit: { min: 1, max: 5 }, // 更新限制拖动范围 boundingCoords: [[boundLeft, boundTop], [boundRight, boundBottom]] } }); }); // 渲染 echarts 地图 myChart.setOption(option); </script> </body> </html> ``` 这个 demo 展示了如何使用 echarts 的 `boundingCoords` 属性来限制地图的拖动范围，在缩放地图时动态更新限制范围。具体实现方法可以参考代码注释。