echarts 地图缩放事件

最新推荐文章于 2024-08-15 08:58:28 发布

weixin_33751566

最新推荐文章于 2024-08-15 08:58:28 发布

阅读量8.1k

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/1403181/blog/1489330

版权

2019独角兽企业重金招聘Python工程师标准>>>

**需求：**使用百度echarts构建地图时，有个需求是当地图放大到一定比例时，显示地区名称；
**描述：**此时首先想到的是去api查找zoom地图缩放事件并监听zoom缩放比例；发现没有任何关于地方缩放事件的api；翻看源码发现“geoRoam”这个事件是缩放事件，但是却没有添加到API中；
用法：``` chart.on("geoRoam",function(prm){ //somecode.... });

1. **bug:**使用该事件时直接获取的zoom（缩放比例）始终是固定值；
1. **变通解决：**通过getOption方法获取option里的zoom；

转载于:https://my.oschina.net/u/1403181/blog/1489330

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33751566

关注关注

0
点赞
踩
2

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

echarts地图下钻可缩放

jfx

03-16

3492

echarts地图下钻可缩放在geo中写相关属性点击查看geo相关属性 geo 地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。 geo: { map: map, // center: [115.97, 29.71],//当前视角的中心点 zoom: 1.2, //当前视角的缩放比例 roam: true, //是否开启平游或缩放 scaleLimit: {

下载Echarts地图资源包

07-20

在本资源包中，"下载Echarts地图资源包" 提供了ECharts用于绘制全国各省市区地图的JS和JSON文件，这使得开发者能够轻松地在网页上创建交互式的中国地图。 ECharts地图组件支持多种地图类型，包括省份地图、城市地图...

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

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

11-07

echarts.js图表地图 ,基于ECharts 带坐标点和放大缩小的省级地图.....................................

echart图表缩放功能以及缩放事件处理

你可知外面的世界多大

08-24

1万+

缩放功能 const defaultOption= { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type...

Echarts图表怎么处理十万级别的数据，放大缩小不卡顿，就像德芙一样的丝滑，嗖~嗖~嗖~的

热门推荐

qq_42980124的博客

09-18

2万+

echarts地图缩放事件做项目时遇到一个需求，要在地图放大时显示markpoint标记点数据，缩小时标记点消失。以上就是效果图，主要就是用到了echarts的georoam事件，官方文档没有看到这个事件，这个事件能监听缩放与拖曳事件，话不多说直接上代码 georoam事件可以取到zoom值，但是是一个固定值，需要变通一下，通过getOption()方法取到当前zoom值，然后就可以通过判...

Echarts滚轮缩放事件Event API

weixin_60664977的博客

12-30

574

【代码】Echarts滚轮缩放事件Event API。

echarts 中国地图开发第四章缩放与拖拽

add_ysd的博客

01-24

1268

为了解决这个问题，将 roam 配置在series层中，并赋监听事件，改变geo层。最大的问题是如果将其放在geo层拖拽会导致geo与series层分离。上期回顾：上期讲述了如何下钻，本期将讲述如何使地图进行拖拽。能优化拖拽时的效果，使动画卡顿感降低。拖拽使用到的最重要的配置项为。

Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题）

06-14

Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题），大屏项目显示云南省3D的地图，可拖拽缩放、地图打点、点击图标弹框等等功能。 ## 使用 - 启动调试服务: `npm start` - 构建 dist: `npm run ...

echarts 3D地图，地图区域点击触发事件

10-23

总结，ECharts 3D地图提供了一种强大且灵活的方式来展示地理数据，通过设置地图类型、监听点击事件以及添加数据，我们可以创建出具有交互性的3D地图。结合HTML、CSS和JavaScript的技能，开发者可以打造出各种复杂的...

ECharts 地图

06-14

在压缩包文件 "MyECharts2-地图" 中，可能包含了ECharts地图的示例代码、配置文件和数据文件，用于演示如何在实际项目中使用ECharts地图功能。通过学习这些示例，开发者可以快速掌握ECharts地图的用法，并将其应用到...

echarts 监听地图放大缩小事件

sinat_33255495的博客

02-15

1504

注意：监听的 georoam方法的前提：echarts实现的中国地图，option地理坐标组件的配制是geo。

当浏览器窗口缩放时echarts()也随着变化用resize() 方法

kakaxiD的博客

07-21

1万+

原声的JS function addLoadEvent(fn){ var old = window.onresize; if(typeof window.onresize != 'function'){ window.onresize = fn; }else{

echart自适应放大缩小

前端小知识

05-06

371

echart自适应放大缩小。

[解决方法]echarts地图/图表缩放，侧边栏导致样式自适应问题

weixin_43919327的博客

05-15

568

可能需要使用媒体查询（Media Queries）来为不同屏幕尺寸设置不同的样式，或者使用百分比宽度来确保元素可以灵活伸缩。在使用 ECharts 进行数据可视化时，确保图表可以自适应窗口大小变化和侧边栏的收缩是非常重要的，这样可以提供更好的用户体验。例如，如果你使用的是一个框架或库来管理侧边栏，那么你可能需要监听框架或库提供的事件。如果图表的大小还需要根据侧边栏的收缩进行自适应，你需要监听侧边栏的收缩事件，并同样调用。

echarts 监听地图缩放和移动事件

yiyueqinghui的博客

05-29

9185

Vue中监听echarts实现的中国地图缩放事件，方法如下： //初始化中国地图 initEchartMap() { let mapDiv = document.getElementById("material_map_box"); let myChart = echarts.init(mapDiv); myChart.setOption(this.options); this.myChart = myChart; thi

Echarts多层geo实现缩放、拖动同步且不卡顿！！和不同窗口尺寸始终保持立体效果

木字旁棋

07-13

3901

主要通过某一篇博客的一个方法，监听拖动来实现，通过这个方法能够实现同步，但会发现新问题即拖动第一层geo，第二层geo会延迟...

echarts 多个 geo 实现缩放拖拽同步

qq_36437172的博客

05-13

7613

需求: 通过设计稿可以看到,我们需要双层的地图,但是地图间有点错位的那种效果. 如果我们分别制作两个同样大小地图,只是定位有些错位的话,当我们对地图进行拖拽或者缩放的时候,无法两个地图同时进行拖拽和缩放操作,此时我们引入多个 geo 来实现同步缩放和拖拽功能. 如何设置多个 geo 呢? geo: [{ zlevel:2, //geo显示级别，默认是0 map: 'china',//地图名 type: 'map', roam: true,//设置为false,不启

echarts地图缩放

08-11

要在 ECharts 地图上实现缩放，可以通过以下方式进行操作： 1. 配置地图组件的缩放功能： ```javascript option = { ... geo: { zoom: 1.2, // 初始缩放值，默认为1 roam: true, // 开启缩放和平移 ... }, ... }; ``` 在 `geo` 配置中，将 `zoom` 设置为大于1的值，可以实现初始放大效果。`roam` 设置为 `true` 可以开启缩放和平移功能。 2. 使用工具栏控制缩放： ```javascript option = { ... toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataZoom: { show: true, title: { zoom: '缩放', back: '还原', }, }, }, }, ... }; ``` 在 `toolbox` 配置中，设置 `dataZoom` 的 `show` 属性为 `true`，可以显示缩放工具按钮。通过点击按钮可以实现地图的缩放和还原操作。这样配置后，你就可以在 ECharts 地图上实现缩放功能了。注意，以上代码片段仅为示例，具体的配置可能需要根据你的实际需求进行调整。