echarts可拖动地图下钻实现

最新推荐文章于 2024-10-29 17:37:38 发布
原创 最新推荐文章于 2024-10-29 17:37:38 发布 · 914 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文记录了解决在地图应用中，从世界地图下钻到各省份时地图发生偏移的问题。通过在chart.setOption(option)后添加chart.clear()的方法，成功避免了地图偏移，确保了地图在不同层级间的准确显示。

最近做了一个地图，需求是可从世界地图下钻到各省份，然后在设置可拖动时设置了 series-roam: true，却发现一个问题，在世界下钻到国家时重新渲染的地图发生了偏移，甚至到省份时都已经完全偏移不见了，百度了很多都没有详细说明，在此记录一下这个问题
解决方法
在 **chart.setOption(option);之后继续设置 chart.clear();**完美解决了这个问题

Echart5.0实现限制地图不可拖拽出盒子外部（全网独发）
_小郑有点困了的博客
05-14 1737
正常的ecahrt地图，不管是使用了geo的拖拽还是series的拖拽，只要开启了roam，就一定会可能被拖到盒子外部，然后就拖不回来了，没有找到echart的默认配置项可以限制这一情况。5、计算出地图的上下左右110%的极值，当作是x,y坐标系，四个值，leftX，rightX，topY，bottomY，4、地图初始化的位置记为[50%,50%],无论向左、向右、向上、向下，都会是递增的结果。1、首先，默认开启geo的roam属性，允许开启拖拽，缩放。就是计算出来的geo的center距离中心的位置。
vue3+echarts区域地图，可拖拽缩放点击
halloworldm的博客
06-13 601
【代码】vue3+echarts区域地图，可拖拽缩放点击。
解决echarts下钻地图，在平移和缩放后，下钻到下一级时生成的地图不在容器中间，会跑到容器外面去。
xiaoxiannvh的博客
06-02 741
后来发现，是重新绘制图表的时候需要： myChart.setOption(option,true），在setOption()方法中添加true，表示重新绘制，最后完美解决。echart地图三级下钻地图在平移和缩放后，点击到省，由于中心点的偏移，省跑到容器以外的地方去了，导致新生成的地图看不见。转自：https://blog.51cto.com/u_15127540/4183041。
Echarts地图组件，可拖拽超出父盒子范围问题解决
weixin_44875693的博客
05-06 2761
问题：在使用echarts地图时候，开启地图可拖拽功能，会出现地图拖出父级范围，消失不见; 解决方法： // 给父盒子绑定离开事件 <div @mouseleave="mouseleave"></div> methods：{ // 鼠标离开父盒子范围，重绘地图 mouseleave（）{ this.chart.setOption(this.option,true) } } ...
ECharts图表插件禁止拖动合并
qingluoII的博客
12-16 1万+
ECharts是一个图表类JS插件，地址：http://echarts.baidu.com/index.html     学习和使用起来都比较方便，最近使用的时候发现，ECharts虽然自带的有拖拽合并的功能，但在某些时候，并不想让生成的图表具有这个功能，于是可以使用下列的方法来禁用：calculable : false,     在代码中展示为： //  echart        
关于echarts实现地图下钻的功能(实现中国省市区下钻功能)
qq_46516788的博客
01-27 2376
最近公司的项目用到了地图的下钻功能，百度大多数都是部分，但是也有很多好的参照，我觉得很有意思，自己写了一个vue的，有vue2和vue3的版本，ts没有去实现，就是在vue3的基础上加上类型定义–喜欢研究的自行去试试。
echarts实现山东地图可放大缩小可下钻
weixin_42812634的博客
04-11 1万+
echarts地图，可放大、可缩小、可下钻、可贴图
解决Echarts地图省级下钻市级散点图偏移塌陷问题（河南省为例）
qq_43557848的博客
03-28 2387
由于项目需求需要在Echarts地图已有项目城市做标记并且牵扯到Echarts地图下钻前地图带有散点又要对下钻后的地图也要带有散点，我这边一开始既能做到Echarts 地图下钻又可以带有散点图，但是一旦结合下钻和散点就不行了，散点就会出现偏移，位置不对，塌陷，后来解决了这个问题，再次做个记录也分享给需要的朋友。
echarts+vue+antV实现简单的中国地图且省份数据下钻
weixin_52443895的博客
08-10 3863
echarts+vue实现简单的中国地图且数据下钻（简洁适合小白版），大家注意// 注册默认全国地图的json - this.$echarts.registerMap('china', chinaJson)这里的China不能用大写哦，要全小写
Echarts实现山东地图三级下钻功能详细教程
为了实现下钻效果，开发者需要编写echarts图表的配置代码，包括设置地图的系列（series）、定义地图的各个区域（mapType）、设置事件监听器（event listener）以及处理下钻动作和数据加载的逻辑。 ### 具体配置参数...
Echart模板 可拖拽 geo3D 可视化 地图 叠加 散点 通用模板.rar
07-21
echart 实现 3d中国地图叠加 散点图 ，图表可任意拖拽
解决echart地图在平移和缩放后，重新生成地图，这时生成的地图不在容器中间，会跑到容器外面去。
Terenceno的博客
06-27 8221
项目需求: 用echart做一个中国地图（可缩放和平移），添加省的点击事件。 完成之后出现bug 项目做完之后发现，在地图平移之后，点击到省，由于中心点的偏移，省跑到容器意外的地方去了所以看不见。百度查了很多资料依然没有解决这个问题。一开始以为是数据更新的时候需要重置坐标轴的中心点，但是中心点是经纬度，比较麻烦 解决办法 后来发现，是重新绘制图表的时候需要：this.chart.setOptio...
echarts 地图：formatter设置弹窗，拖拽设置
小元子
01-06 528
echarts 地图：formatter设置弹窗，只缩放 不拖拽设置
echarts的地图控制缩放和拖拽
weixin_45905537的博客
12-02 8857
echarts的地图控制缩放和拖拽 series: [ { type: "map", map: name, zoom: 2, roam: true, //支持拖拽缩放 scaleLimit: { //滚轮缩放的极限控制 min: 0.5, //缩放最小大小 max: 6, //缩放最大大
echart图表超出父容器
Nakisha7的博客
10-13 795
echarts图表超出父容器
echarts属性之series-graph
最新发布
lotte
10-29 969
series-graph 关系图 用于展现节点以及节点之间的关系数据。 示例： 所有属性 series-graph.type= 'graph' string series-graph.id string 组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。 series-graph.name string 系列名称，用于tooltip的显示，legend的图例筛选，在setOption更新数据和配置项时用于指定对应的系列。 serie
vue+echart实现3d地图可拖拽、缩放、区域填充颜色(geo3D)
_小郑有点困了的博客
03-17 2545
原理就是抬高了这个区域的高度，并且改变了颜色。一个略微比2d地图炫酷一些的3d地图，
Vue环境下用ECharts绘制中国地图，并实现拖动、缩放与各省份自动轮播高亮显示
热门推荐
商务合作 | 共同学习 | 携手共进
12-13 10万+
在vue环境下用echarts绘制中国地图，并实现拖动、缩放与各省份自动轮播高亮显示。
echarts 地图拖拽和缩放
weixin_45328041的博客
07-13 6238
禁止拖拽和缩放 在配置中roam设置为false,开启为true 只拖拽或只缩放 缩放 roam设置为’scale’，拖拽roam设置为’move’
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值