eCharts 3-缩放地理地图onclick

ECharts 3 支持地理地图的缩放功能

首先，确保您已经在 HTML 文件中引入了 ECharts 和地图数据文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 地图缩放示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/3.8.5/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/3.8.5/map/js/china.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        // 在这里编写 ECharts 配置代码
    </script>
</body>
</html>

接下来，初始化 ECharts 实例并配置地图和缩放功能：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            roam: true, // 开启缩放和平移功能
            label: {
                show: true
            },
            data: []
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

在这个示例中，我们设置了 roam: true 以开启地图的缩放和平移功能。现在，您可以在浏览器中打开这个 HTML 文件，然后使用鼠标滚轮或触摸板上的缩放手势来缩放地图。

如果您希望在点击地图时执行其他操作，可以使用 ECharts 的 on 方法监听 click 事件：

myChart.on('click', function (params) {
    console.log(params);
    // 在这里编写您希望在点击地图时执行的代码
});

这样，当您点击地图时，控制台将输出点击位置的详细信息，您可以根据这些信息执行其他操作。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

这几款数据可视化大屏开源项目，科技感爆棚！太哇塞了～

数据可视化交互的基本原则：总览为先，缩放过滤按需查看细节。大屏数据可视化是当前可视化领域的一项热门应用，通常可以分为信息展示类、数据分析类及监控预警类。...项目案例 - 上市公司全景概览地图数据可视化 - 基于ECharts Geo 3D图表展示 - 基于ECharts GL 热力图展示 - 基于ECharts & 百度地图 ECharts扩展示例...旭日图 - 基于ECharts V4.2 地理信息数据 - ECharts & Baidu Map 以上内容来源：blog.csdn.net/hwhsong/article/details/80805511...DataV可通过拖拽组件+配置数据的方式快速生成可视化大屏，并具有以下特点：专业级大数据可视化：专精于地理信息与业务数据融合的可视化，提供丰富的行业模版和图表组件。...）、高度铺满（宽度按比例缩放）；因为有ECharts的加持，报表渲染比较流畅；支持以现有已完成的大屏为模板进行新建项目；以上内容来源：blog.csdn.net/hwhsong/article/details

5.3K1 0

ECharts 是什么？

-- 引入 echarts.js --> </script...、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，...移动端优化: 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。...深度的交互式数据探索: 提供了图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。...绚丽的特效: 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。通过 GL 实现更多更强大绚丽的三维可视化: 在 VR，大屏场景里实现三维的可视化效果。

1.2K3 0

Pyecharts 动态地图 geo()和map()的安装与用法详解

echarts-china-cities-pypkg $ pip install echarts-china-counties-pypkg $ pip install echarts-china-misc-pypkg...45 China 北京北京 96 北京 96 China 广西崇左 15 福建 63 China 内蒙古兴安盟 94 甘肃 23 使用 pyecharts 模块中的 Geo 函数： Geo 地理坐标系组件用于地图的绘制...，支持在地理坐标系上绘制散点图，线集。...is_roam bool 是否开启鼠标缩放和平移漫游。’scale’缩放、’move’平移、’True’都开启；默认为True。...使用 pyecharts 模块中的 map 函数： map 函数地图主要用于地理区域数据的可视化。

2.9K3 0

echarts实现航班选座案例分析

注册自定义地图 echarts是可以搭配地图来实现自定义的位置坐标布局渲染的。但不仅仅局限于百度，高德地图。他还支持将一个符合地图数据的svg注册为一个地图。...下面来看一下echarts的这个注册自定义地图的api。...它是一种用于编码各种地理数据结构的格式。一种编程式的地图，用一些特殊的属性来表达地图上的线，面，点，颜色。区域。...地理坐标系组件用于地图的绘制，支持地理坐标系上绘制散点图，线集。有关geo组件的所有的配置项都可以在此处查询到详细的解析。此案例使用的就是该组件，那么下面来看下示例是如何配置的。...map 首先map指向的是我们刚刚注册的一个自定义地图'flight-seats' map: 'flight-seats', roam roam关键字是用于配置是否开启鼠标缩放和平移漫游。

2.2K1 0

Echarts大数据可视化物流航向省份流向迁徙动态图，开发全解+完美参数注释

本案例需要引用的JS文件有：echarts.js（echarts官方资源）、china.js（中国地图的配置），相关配置文件已打包至Github，如需使用，clone下载即可。...： var myChart = echarts.init(document.getElementById('main')); // 数据格式地图上标点为citys，value...如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。...geo'使用地理坐标系 zlevel: 2, // 所有图形的 zlevel 值。...scale:2.5, // 动画中波纹的最大缩放比例。

3.2K1 0

pyecharts可视化和微信的结合

条形图.gif 环境配置 pip install pyecharts pip install snapshot_selenium pip install echarts-countries-pypkg...pip install echarts-china-provinces-pypkg pip install echarts-china-cities-pypkg pip install echarts-china-counties-pypkg...地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。...文件 maptype: str = "china", # 是否选中图例 is_selected: bool = True, # 是否开启鼠标缩放和平移漫游。...is_roam: bool = True, # 当前视角的中心点，用经纬度表示 center: Optional[Sequence] = None, # 当前视角的缩放比例。

7614 0

Echarts地图省市县穿透及区域居中显示

>" + params.data.workRule + ""; return result; }, }, //地理坐标系组件用于地图的绘制...roam: false, // 是否允许缩放 zoom: 1, // 当前视角的缩放比例 center: [116.692385...= echarts; this.dom = document.getElementById("bmapChartBox"); this.myChart = this.echarts.init...获取地图中心点地图数据中有一个features数组，以下结构可以获取地图的质点请注意不是 center，而是centroid!...在许多地理信息系统和平台中，如GEE，提供了直接计算Geometry（几何形状）质心的方法，如ee.Geometry.centroid()。

1801 0

你知道你的微信好友可视化后是什么样子吗？

1.1K2 0

大屏数据可视化案例「建议收藏」

数据可视化交互的基本原则：总览为先，缩放过滤按需查看细节。大屏数据可视化是当前可视化领域的一项热门应用，通常可以分为信息展示类、数据分析类及监控预警类。...制作可视化大屏，最便捷有效的方式是使用DataV、帆软等报表工具，而本示例项目则使用ECharts自行开发。...项目案例 – 上市公司全景概览地图数据可视化 – 基于ECharts Geo 3D图表展示 – 基于ECharts GL 热力图展示 – 基于ECharts & 百度地图 ECharts...扩展示例旭日图 – 基于ECharts V4.2 地理信息数据 – ECharts & Baidu Map 项目Git地址：https://github.com/yyhsong/iDataV

3.8K1 0

使用echarts绘制地图

获取地理数据绘制地图时需要用于展示地图的地理数据，地理数据是一个 geoJSON 格式的数据，本质上是一个 json 数据打开地图选择器在地图上选择江西省所在的区域单击鼠标左键，此时会进入江西省区域下...在右边的属性面板中点击其它类型中的下载按钮此时会将江西省的地理数据以一个 json 数据的形式下载到本地创建一个前端项目，在项目目录下放入 echarts 核心库文件和下载下来的江西省地理数据.../echarts.min.js"> 手机品牌分布地图...mapType: 'jx', // 地图缩放比例 zoom: 1.2,...转载请注明：【文章转载自meishadevs：使用echarts绘制地图】

1.1K1 0

Apache ECharts 一个开源可商用的数据表格

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，...千万数据的前端展现通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量，并且在这个数据量级依然能够进行流畅的缩放平移等交互。...几千万的地理坐标数据就算使用二进制存储也要占上百 MB 的空间。因此 ECharts 同时提供了对流加载（4.0+）的支持，你可以使用 WebSocket 或者对数据分块后加载，加载多少渲染多少！...我们希望平台和语言都不会成为大家使用 ECharts 实现可视化的限制！深度的交互式数据探索交互是从数据中发掘信息的重要手段。“总览为先，缩放过滤按需查看细节”是数据可视化交互的基本需求。...ECharts 一直在交互的路上前进，我们提供了图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。

2K2 0

数据科学篇| pyecharts库的使用（五）

pyecharts 是一个用于生成 Echarts 图表的类库。Echarts 是百度开源的一个数据可视化 JS 库。本文将为你阐述pyecharts的使用细则。...，支持China，world，北京，天津，上海，湖南，湖北，……363个二线城市 is_roam -> bool/str 是否开启鼠标缩放，漫游等，默认 True,...若只想开启缩放/平移设置scale/move 设置成 True 开启 is is_map_symobol_show 是否显示地图标记，默认 True。...参考：http://pyecharts.herokuapp.com/ 为了地图上的数据能显示完全，先加载好需要的城市地理坐标数据。...pip install echarts-countries-pypkg pip install echarts-china-provinces-pypkg pip install echarts-china-cities-pypkg

1.4K1 0

几款数据可视化大屏开源项目，科技感爆棚！太哇塞了～

数据可视化交互的基本原则：总览为先，缩放过滤按需查看细节。大屏数据可视化是当前可视化领域的一项热门应用，通常可以分为信息展示类、数据分析类及监控预警类。...制作可视化大屏，最便捷有效的方式是使用报表工具，而本示例项目则使用ECharts自行开发。...项目案例 - 上市公司全景概览地图数据可视化 - 基于ECharts Geo 3D图表展示 - 基于ECharts GL 热力图展示 - 基于ECharts & 百度地图 ECharts扩展示例...旭日图 - 基于ECharts V4.2 地理信息数据 - ECharts & Baidu Map 大屏模板（定制尺寸 3840 * 864）后记除自行开发可视化大屏外，还可以通过第三方服务来快速实现

2.8K4 0

Echarts + 低代码：可视化如何赋能企业的创新之路？

结合 Echarts 等可视化工具，复杂的数据信息能够以直观、富交互性的图表形式展现出来，帮助决策者更好地理解和洞察数据蕴含的价值。...，能够与地图进行无缝结合来展示地理空间数据。...Echarts 特性丰富的图表类型：ECharts 提供了广泛的图表类型，包括但不限于折线图、柱状图、饼图、散点图、雷达图、K线图、盒形图、热力图、地图、关系图、Treemap、旭日图、平行坐标系、漏斗图...交互性：ECharts 支持多种鼠标和触摸事件，如点击、缩放、拖拽等，增强用户体验，使用户能够更深入地探索和分析数据。...地理数据可视化：ECharts 特别擅长地理数据的可视化，提供了地图图表类型，支持世界地图、中国地图以及其他国家地区的地图绘制，以及热力图、线图等地理信息展示方式。

4115 0

python可视化神器——pyecharts库

pyecharts 是一个用于生成 Echarts 图表的类库。Echarts 是百度开源的一个数据可视化 JS 库。...(Line、Bar、Scatter、EffectScatter、Kline) dataZoom：dataZoom 组件用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响...） GeoLines（地理坐标系线图） Graph（关系图） HeatMap（热力图） Kline/Candlestick（K线图） Line（折线/面积图） Line3D（3D 折线图） Liquid...地图文件被分成了三个 Python 包，分别为：全球国家地图: echarts-countries-pypkg 中国省级地图: echarts-china-provinces-pypkg 中国市级地图...: echarts-china-cities-pypkg 直接使用python的pip安装但是这里大家一定要注意，安装完地图包以后一定要重启jupyter notebook，不然是无法显示地图的。

4.3K5 0

进阶图表 | 盘点可视化地图实现

在数据可视化中，可视化地图是高频应用的一种。数据可视化地图用来分析和展示与地理位置相关的数据，并以实际地图的形式呈现，这种数据表达方式更为明确和直观，让人一目了然，方便发现问题，更好的辅助决策。...可视化地图，简单的套入地理经纬度数据或者区域名称，系统自动识别定位出相应位置从而完成地图可视化。地图可以说下当下重要的数据可视化工具。好的地图将信息融入地理语境，高信息量与美感兼备。...然而，想要做地图可视化也并非易事，一般来说，实现可视化地图有以下几种方式： 1. 在Excel的2013以上版本，下一个Power map组件 2. 要么就是JS+Echarts，能玩很多花样 3....04 散点图散点地图作为一种数据可视化图表经常出现在数据分析报告之中，它能够准确的反映出不同地理位置的数据差异。 1. 点击界面左侧【图表】按钮，选择散点图 2....选中涟漪线路地图，界面右侧出现【格式】属性功能区，可以对地图样式、默认缩放、中心点、缩放控件、旋转控件、比例尺、地图类控件进行格式设置。 ?

1.9K3 0

你想要的地图素材资源，我都帮你整理好了~

这些BI工具其实依赖的内置在线地图（确实不用我们自己定义），但是在线地图的风格往往意味着你没有太大的调整空间，而且地址的解析率与识别率都是有精度限制的（甚至很多非标准的地理名称是解析不出来的）。...我所说的这种高精度矢量图一般可提供自定义的格式输出（SVG这种）以及自定义像素比和清晰度等，但是如果你直接使用矢量素材来做或者使用shp格式或者json格式这种地理信息数据，那么输出高精度矢量图是很容易的...（其实就是一组图形，没有什么神秘的，需要熟练掌握编组、解组菜单、等比缩放菜单和常用的轮廓、线条的编辑等）。...这里我只介绍两个获取渠道：一个是dataV的json素材源地址，一个是Echarts的json获取地址（没错，稍微了解过国内做web可视化的应该都知道，这两个产品就是阿里和百度的web可视化产品）。...Echarts：http://echarts.baidu.com/download-map.html ? Echarts提供的地图出了页面上预览的这些之外，还提供了自定义区域板块。 ?

4K4 0

echarts geo根据缩放动态加载effectScatter以及居中问题解决方案

echarts 画中国地图出现effectScatter标注点，但是由于点太密集，坐标太多，客户想实现地图一样根据缩放显示不同数据。...背景环境框架： UMI/React Hooks echarts版本：4.9.0 react-for-echarts 实现思路 events 监听时间georoam（拖动和缩放） <ReactEcharts...，从新获取数据 ctrolData(newZoom) }; 根据缩放比例筛选数据这样基本满足了缩放，显示数据层次。...但是又有了新问题，拖动的时候数据刷新了echarts每次都会从新居中。解决数据刷新echarts geo 自动居中问题 echarts geo 有一个center属性，中国地图不设置默认居中。...步骤设置个全局变量或者ref 记录下拖动最后，echarts 的center值。

1.9K2 0

SuperMap iClient for JavaScript 新手入门

地理信息系统（英语：Geographic Information System，缩写：GIS）是一门综合性学科，结合地理学与地图学，已经广泛的应用在不同的领域，是用于输入、存储、查询、分析和显示地理数据的计算机系统...常见GIS组件平台： ArcGIS - Esri中国-Esri中国,GIS,GIS平台,地理信息系统 SuperMap - 超图软件股份有限公司天地图 - 国家地理信息公共服务平台“天地图” 今天的重点就是体验一把...常见控件如下：可见控件： PanZoomBar：地图平移缩放控件，提供对地图的平移和缩放的控制操作。 ScaleLine：比例尺控件，显示地图的比例关系。...地图放大，在当前缩放级别的基础上放大一级。...地图缩小，在当前缩放级别的基础上缩小一级。

3.4K3 1

借官方示例学习一下 series-lines 用法

name:'广州'},{name:'太原',value:90}] ... ]; 这一段代码定义了迁徙图要使用的原始数据（...表省略，要不太长了）： geoCoorMap 提供各城市经纬度坐标，地图上标点...emphasis: { show: false } }, //开启鼠标控制的缩放和平移...areaColor: '#2a333d' } } }, //将之前生成好的series配置项引入 series: series }; geo 引入地理坐标系组件...，需要引入 geoJSON 地图(备注) series 通过 series 变量引入此前生成好的 series 配置因为是在 echarts 的 gallery 里练习的，只需要定义好 option...(document.getElementById('main')); 显示图表 myChart.setOption(option); 【备注】如何引入 geoJSON 地图？

3762 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云