Echart 地图放大缩小

已于 2025-04-23 17:27:58 修改
阅读量787 收藏 8
点赞数 7
分类专栏： EChart研发过程中的问题总结 文章标签： echarts
于 2025-04-18 22:08:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuaner8786/article/details/147341260
版权

文章目录


在 ECharts 中，可以通过设置地图的 roam 属性以及相关事件监听来实现地图的放大、缩小功能。以下是实现地图放大缩小的常用方法：

常用方法

1. 开启 roam 属性

roam 是 ECharts 地图组件中的一个重要属性，用于控制地图是否支持平移和缩放操作。

  • roam: true：同时开启平移和缩放功能。
  • roam: 'scale'：仅开启缩放功能。
  • roam: 'move'：仅开启平移功能。
  • roam: false：关闭平移和缩放功能（默认值）。

示例代码：

var chart = echar
了解本专栏 订阅专栏 解锁全文 超级会员免费看
ECharts图表实现放大和缩小功能
蜡笔小新星的博客
10-13 5662
ECharts图表提供了多种方式来实现放大和缩小功能，以下是详细介绍：功能介绍：配置方式：示例代码： 二、地图缩放 功能介绍：配置方式：示例代码： 三、注意事项 版本兼容性：数据范围：交互体验：综上所述，ECharts图表提供了多种灵活的方式来实现放大和缩小功能。根据具体需求选择合适的配置方式和组件类型，可以为用户提供更加便捷和直观的图表交互体验。
用echart实现迁徙图，缩放全国地图和省份地图，鼠标悬浮显示相应数据
hxx230的博客
05-12 2452
容器 需要引入echart和引入全国和省份的json数据 需要在mounted()调用画地图方法，数据加载完成 下面就是画地图的配置了，就不一一详细展开说了 全国地图map是“China”，省份地图map是相对应的省份名称 详细代码如下 // 基于准备好的dom，初始化echarts实例 // 中间 地图 ----域外分布（全国地图） drawMap(id, mapData, towLineData, mapList...
echarts地图如何放大
weixin_46124693的博客
04-26 5712
$.get( 'https://geo.datav.aliyun.com/areas_v3/bound/140000_full.json', function(geoJson) { myChart.hideLoading() echarts.registerMap('SX', geoJson) myChart.setOption({ title: {
Echarts地图缩放(平面,3D,scatter(散点))
weixin_44031176的博客
08-24 1万+
Echarts地图缩放 平面地图缩放设置(roam : true 允许缩放;false 禁止缩放): bmap: { type:'map', //地图中心经纬度。 center: [116.46, 39.92], //地图的缩放等级 一次性放大的大小 zoom: 10, // 是否开启鼠标缩放和平移漫游。默认不开启。 如果只想要开启缩放或者平移， 可
pyecharts 中设置 ​Map 图表的宽高
最新发布
Humbunklung的专栏
03-09 308
使用百分比单位（如 width=“100%”）可实现自适应容器宽度，但需确保父容器有明确尺寸。通过 JavaScript 回调实现运行时尺寸修改。地图高度建议 ≥ 400px，避免地域名称重叠。若需要并列显示多个地图，可通过。图表的宽高，需要通过。
echarts.js图表插件带坐标点和放大缩小地图
02-25
基于ECharts 带坐标点和放大缩小的省级地图
echarts 放大与缩放的功能
热门推荐
u014678583的博客
07-28 4万+
// 内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。 // 滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。 function getOption(titles, xData, legendDatta, series, top) { var option = { title: { text: titles, .
uni-app-echarts+PC+移动端中国地图下钻+标点+统计+放大缩小.rar
10-21
地图的放大缩小功能是ECharts提供的基本交互功能，用户可以通过鼠标滚轮或触摸屏幕来改变地图的缩放级别，以便查看更详细的信息或浏览更大的区域。 总结起来，这个项目展示了如何使用uni-app和ECharts构建一个跨...
echarts中map的放大缩小与重置
nkym123456的博客
03-01 3617
echarts中map的放大缩小与重置。
echarts 绘制的全国地图三级联动 点击放大效果 省县乡更新过后的最新地名
07-03
echarts 绘制的全国地图三级联动 点击放大效果 省县乡更新过后的最新地名 ，运行请不要直接打开index.html文件 请用本地服务器启动
echarts实现山东地图可放大缩小可下钻
weixin_42812634的博客
04-11 1万+
echarts地图，可放大、可缩小、可下钻、可贴图
Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题）
QC班长的博客
06-13 1万+
大屏项目显示云南省3D的地图，可拖拽缩放、地图打点、点击图标弹框等等功能。
Vue环境下用ECharts绘制中国地图，并实现拖动、缩放与各省份自动轮播高亮显示
m0_70647221的博客
05-10 2067
}, { name: “福建”, value: 20, }, { name: “贵州”, value: 74, }, { name: “广东”, value: 47, }, { name: “青海”, value: 45, }, { name: “西藏”, value: 41, }, { name: “四川”, value: 3, }, { name: “宁夏”, value: 7, }, { name: “海南”, value: 7, }, { name: “台湾”, value: 200, }, { n
echarts 监听地图放大缩小
藕粉桂花糖糖糕的博客
12-03 1220
【代码】echarts 监听地图放大缩小。
echarts的地图控制缩放和拖拽
weixin_45905537的博客
12-02 8578
echarts的地图控制缩放和拖拽 series: [ { type: "map", map: name, zoom: 2, roam: true, //支持拖拽缩放 scaleLimit: { //滚轮缩放的极限控制 min: 0.5, //缩放最小大小 max: 6, //缩放最大大
手把手教你从零使用Echarts开发地图并拖拽缩放，下钻，并返回上一级功能，巨详细！！！
m0_74087046的博客
06-01 3068
在家空闲时间，整理下地图下钻的思路，下面是我个人的一个思路,供大家参考！大家如果有更好的思路，评论区可以交流学习一下！个人原创转载请注明！
echarts图点击按钮放大或者缩小
weixin_49826079的博客
11-03 5266
点击按钮放大缩小echarts图片
echarts 地图不等比缩放
12-27
### 实现 ECharts 地图不等比缩放效果 为了使 ECharts 地图组件支持不等比缩放功能，可以通过自定义 `geo` 组件中的属性来调整地图的比例尺以及坐标系范围。具体来说，在配置项中设置 `scaleLimit` 和 `roam` 参数可以控制用户的交互行为。 当启用漫游模式 (`roam`) 后，默认情况下会保持宽高比不变。要取消这种限制并允许自由拉伸变形，则需通过 JavaScript 动态修改容器尺寸或监听事件改变视窗大小[^1]： ```javascript // 初始化图表实例 var myChart = echarts.init(document.getElementById('main')); option = { geo: { map: 'world', roam: true, // 开启拖拽缩放和平移漫游 scaleLimit: { // 设置可放大缩小的最大最小倍数 min: 1, max: 5 }, zoom: 1.2 // 初始缩放级别 } }; myChart.setOption(option); // 添加窗口resize事件处理程序以适应页面布局变化 window.addEventListener("resize", function () { var width = document.documentElement.clientWidth; var height = document.documentElement.clientHeight; // 自定义逻辑：根据需求调整宽度高度比例 if (width / height > 16 / 9) { $('#main').css({ "height": Math.min(height * 0.8, width / (16 / 9)) }); } else { $('#main').css({ "height": Math.max(width / (16 / 9), height * 0.8) }); } myChart.resize(); }); ``` 上述代码片段展示了如何初始化一个世界地图，并设置了初始缩放等级和最大最小缩放界限。同时注册了一个全局的 resize 事件处理器用于响应浏览器窗口大小的变化，从而动态调整绘图区域的高度，达到非均匀缩放的效果[^2]。 需要注意的是，这种方法主要是通过对 DOM 元素的操作间接影响到最终呈现的地图形态；如果希望更精确地控制地理坐标的变换过程，则可能涉及到深入理解 ECharts 的底层机制或是借助其他图形库辅助完成特定任务。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

·零落·

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

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

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

打赏作者

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

抵扣说明：

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

余额充值