开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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地图省市县穿透及区域居中显示

centroid（质心）是一个几何学上的概念，它指的是一个形状中所有点的平均位置。对于多边形等复杂形状，质心通常位于形状内部，且是该形状的一个平衡点。

01

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

数据可视化：把相对复杂的、抽象的数据通过可视的、交互的方式进行展示，从而形象直观地表达数据蕴含的信息和规律。数据可视化是数据空间到图形空间的映射，是抽象数据的具象表达。

01

echarts实现航班选座案例分析

最近在echarts官方看到了一个航班选座的示例，感觉很好，可以扩大，缩小，鼠标放置到座位上可以显示座位号，允许默认选中座位。于是在5.1假期抽了一点点时间，来写一篇文章，深入研究分析一下这个示例，解析一下这个示例的完整代码。首先让我们来看下示例的效果图。

01

ECharts 是什么？

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

03

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

把一些地域性比较明显的数据显示在一张地图上，远比给别人一个 Excel 文件好得多。

03

SuperMap iClient for JavaScript 新手入门

地理信息系统（英语：Geographic Information System，缩写：GIS）是一门综合性学科，结合地理学与地图学，已经广泛的应用在不同的领域，是用于输入、存储、查询、分析和显示地理数据的计算机系统。具体解释请参考维基百科。虽说GIS这门学科很复杂，但是从开发层次来划分，一般分为底层开发和二次开发。GIS组件发展迅速，将底层算法进行了封装。二次开发人员只要掌握相关组件的API函数，基本能完成业务需求。

03

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

本文是以原生JS为基础，如果使用Vue.js的话，只需把相关配置放到method函数中，或者放在computed属性中，毕竟参数配置都是固定的，换汤不换药，话不多说，先上效果图:

01

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

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

02

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

数据可视化：把相对复杂的、抽象的数据通过可视的、交互的方式进行展示，从而形象直观地表达数据蕴含的信息和规律。数据可视化是数据空间到图形空间的映射，是抽象数据的具象表达。数据可视化交互的基本原则：总览为先，缩放过滤按需查看细节。

01

pyecharts可视化和微信的结合

最近在研究 pyecharts 的用法，它是 python 的一个可视化工具，然后就想着结合微信来一起玩

04

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

数据分析和可视化是一个比较有意思的方向，可做的点有很多。最近看到一篇文章是玩了玩把自己的微信好友信息进行了可视化，结合了 pyecharts 和 wxpy 这两个库实现的，推荐给大家看看~

02

使用echarts绘制地图

最近我参与了几个数据大屏可视化项目，项目中要求在大屏上以地图的形式直观的展示某一地区的某个业务数据，在绘制地图时踩的坑还是挺多的，特此用一篇博客记录一下绘制地图的过程，下面会以展示江西省下面各城市手机品牌数为例介绍地图的绘制方法。

01

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

点击关注公众号，Java干货及时送达来源：https://blog.csdn.net/hwhsong/article/details/80805511 数据可视化：把相对复杂的、抽象的数据通过可视的、交互的方式进行展示，从而形象直观地表达数据蕴含的信息和规律。数据可视化是数据空间到图形空间的映射，是抽象数据的具象表达。数据可视化交互的基本原则：总览为先，缩放过滤按需查看细节。大屏数据可视化是当前可视化领域的一项热门应用，通常可以分为信息展示类、数据分析类及监控预警类。大屏数据可视化应用的难点并

04

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

这一篇我会把自己所掌握的所有数据地图素材资源获取途径全部分享给大家。可能有的小伙伴儿会有疑问，现在商务智能工具发展的这么火，像PowerBI、Tableau以及一些在线的可视化平台都能够免费多场景提供数据地图的制作，是否还有必要自己找素材去亲手做。这个问题怎么说呢，还是场景化吧，以上的商务智能工具确实降低了制作这些可视化地图的成本，但是缺点也有很多。这些BI工具其实依赖的内置在线地图（确实不用我们自己定义），但是在线地图的风格往往意味着你没有太大的调整空间，而且地址的解析率与识别率都是有精度限制的（

04

echarts画中国地图及省份切换

最近用 ehcarts 写了一个有关中国地图的需求，这篇文章来总结下基本的原理和用法。

03

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

pyecharts 是一个用于生成 Echarts 图表的类库。Echarts 是百度开源的一个数据可视化 JS 库。本文将为你阐述pyecharts的使用细则。

01

python可视化神器——pyecharts库

pyecharts 是一个用于生成 Echarts 图表的类库。Echarts 是百度开源的一个数据可视化 JS 库。用 Echarts 生成的图可视化效果非常棒，pyecharts 是为了与 Python 进行对接，方便在 Python 中直接使用数据生成图。使用pyecharts可以生成独立的网页，也可以在flask、django中集成使用。

05

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

在数据可视化中，可视化地图是高频应用的一种。数据可视化地图用来分析和展示与地理位置相关的数据，并以实际地图的形式呈现，这种数据表达方式更为明确和直观，让人一目了然，方便发现问题，更好的辅助决策。

03

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

框架： UMI/React Hooks echarts版本：4.9.0 react-for-echarts

02

地图的常见配置

$.get('json/map/anhui.json', function (anhuiJson) { })

03

使用Echart搭配百度地图创建某一地区热点图的注意点

使用Echart搭配百度地图创建的热点图,为网友免费做的demo,细节没有调整.记录一下写的过程. 效果图: 代码: <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> <style type="text/css"> html, body { height: 100%; width: 100%; } </s

02

基于echarts实现3D地图的定时高亮和点击事件

此时地图消息就在你的node_modules/echarts/map/china中

04

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

series[i]-lines 主要用于迁徙图，实现航线、路线的可视化，在这借 ECharts 官方迁徙示例学习一下其使用

02

echarts的学习（四）饼图，地图相关的学习

图形饼图的基本实现地图饼图的基本实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src

01

百度地图API开发指南（二）

除了指定停靠位置外，还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同，那么控件可能会重叠在一起，这时就可以通过偏移值使二者分开显示。

03

钢材信息小程序开发总结(四) --- 最普通数据大屏

主要是做个最垃圾的大屏给朋友视察用查看demo: https://klren0312.github.io/ironInfoWeapp/

01

echart实现地图的逐级钻取

本文讲述在echart下基于行政区划的地图逐级钻取功能。主要实现： 1、点击地图展示下一级地图； 2、通过区域导航可返回上一级地图；

03

领导都喜欢看--基于Vue的数据可视化之集成地图聚合功能

最近领导不知道抽什么风，非要做大屏数据可视化功能，这个东西之前也没有接触过，也不知道该如何下手，这两天正好有点点闲时间，就赶紧研究一把，毕竟升级加薪还得指望着这东西呢

01

基于JavaScript的开源可视化图标库

全局 echarts 对象，在 script 标签引入 echarts.js 文件后获得，或者在 AMD 环境中通过 require('echarts') 获得。

01

Hexo -23- 使用 ECharts 插件绘制炫酷图表

excerpt: ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求，本文介绍如何在 Hexo 博客中使用 ECharts 插件。

02

【ArcGIS JS API + eCharts系列】实现地图上二维图表的绘制

本文主要介绍使用ArcGIS JS API 4.14和eCharts 4.7.0来实现在地图上绘制二维图表中的柱状图的实现步骤。

02

【数据可视化】数据可视化入门前的了解

在大数据时代，离不开数据的处理和分析，这次来介绍一下数据可视化，在之后的文章中使用的工具都是Apache ECharts，它是一个基于 JavaScript 的开源可视化图表库。

01

echarts中国地图如何标记散点图[通俗易懂]

工作中会遇到echarts在地图上面标记点位，后端数据传给城市名和坐标轴给你以后，如何添加到echarts上面渲染呢 echarts需要的数据例子

02

数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

HT 是啥：Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向，接着就朝这个方向慢慢打磨，如今 HT 算是达到了这样的效果，谈不上用尽洪荒之力，但我们对产品结果很满意，特别是 HT 的用户手册，将例子和文档无缝融合一体，小小 10 来兆开发包居然包含了四十五份手册，数百个活生生的 HTML5 例子，还没体验过的同学可以点击 http://www.hightopo.com/guide/readme

05

数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

本文介绍了HT for Web在软件研发中的拓扑图组件在研发管理、团队协作、自动化部署、监控告警等方面的应用，并提供了丰富的案例和解决方案。

05

地图可视化不只是pyecharts.map

导读：地图可视化是一种非常直观的数据分析结果展现形式，python有很多可视化库可以实现，pyecharts就是很多python爱好者喜爱的实现地图可视化方法之一。不可否认，pyecharts绘制的地图实现方便、图形美观而且支持交互，但在面对不同需求时，其实我们还有很多其他手段实现地图可视化。

02

【进阶系列】地理位置专题

HTML5 Geolocation(地理定位)用于定位用户的位置。

03

疫情大屏优化-ECharts 地图下钻功能实现

最近在网络上看到了很多地图下钻的文章，感觉都很不错，正好自己也在研究这部分知识，就想着把下钻这个功能结合到疫情大屏中来，这样就能够更好的展示不同省份的疫情信息了。废话不多说，直接来干货！

04

Vue+Echarts实现中国疫情地图

效果：源码： <template>

</template> <script> import 'echarts/map/js/china.js' import jsonp from 'jsonp' const option = { title:{ text:"陶然同学", lik:"https://

03

google maps api_js调用谷歌浏览器接口

1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥，需要注重一下两点：

01

pyecharts从入门到精通-地图专题BMap-世界地图和中国城市地图

官方文档:https://pyecharts.org/#/zh-cn/quickstart Bmap - Hiking_trail_in_hangzhou

03

eCharts添加自定义geojson数据实现地图展示

当初看到echarts的地图的时候感觉可以做点什么，但是一直米有实施，最近刚好用到了，就研究了研究，在echarts中添加了自定义的geojson数据，实现数据的地图展示。

04

Android 高德地图API（详细步骤+源码）三

实际开发中都会对地图的点击和长按做处理，比如点击某一个地方获取经纬度，下面来操作一下吧。

03

极致呈现系列之：Vue3中使用Echarts图表初体验

Echarts是一个基于JavaScript的开源可视化图表库，由百度开发和维护。它提供了多种类型的图表，包括折线图、柱状图、散点图、饼图、地图等，可以用于展示各种类型的数据。Echarts具有良好的交互性和可扩展性，可以通过自定义主题和图表样式来满足不同的需求。同时，Echarts还支持移动端和桌面端的多种平台，可以在不同的设备上进行数据可视化展示。

leaflet在线地图进阶宝典之——高级辅助特性

本文跟大家分享leaflet在线地图的高级附加属性，这些属性通常来讲仅仅作为我们数据额可视化项目的修饰元素，而并不会影响数据元素。但是有了这些辅助修饰元素，往往可以使你的数据可视化项目变得更具人性化。本文内容根据leaflet的官方主页（R语言接口）翻译而来：附加属性：测度工具：Leaflet Measure ###增加该工具可以轻而易举的让你在可视化地图中通过鼠标打点，测量两点之间的距离，如果是闭合区域，则可以直接计算闭合区域的真实面积。网格线：Graticule ### 网格线可以提供平面

04

利用MapabcAPI实现基于浏览器的地理定位

现在互联网中有了越来越多的地理位置服务，正在制定中的HTML5规范也试图在浏览器中内置嵌入地理位置共享服务，而且幸运的是，我们已经能够在Firefox 3.5+、Chrome 5.0+、Opera 10.60+、Safari 5.0+ 以及一些移动终端，注入IPhone、Android上使用这项服务，那么这个服务能否有Mapabc的API结合，来实现用户的地理定位呢？

04

Qt编写地图综合应用12-路线查询

路线查询的功能只有在线地图才有，因为这个路线规划需要经常更新的，这个数据同步需要大量的人力物力去统计，所以这玩意必须放在服务器端，就算是类似于手机端一样的放在本地离线，也需要隔一段时间更新的，不然数据很可能不正确。路线查询也叫出行规划，基本上分成两大类，一种是开车的一种是不开车的，其中开车的又有多种策略供选择比如最少时间、最短距离、避开高速等，不开车的也有多种策略供选择比如最少时间、最少换乘、最少步行、不乘地铁。路线查询的功能，现在貌似默认只支持经纬度作为参数了，之前是可以直接填入中文名称地名的比如门牌号之类的，这种地址解析或者逆解析的功能需要去后台用对应的秘钥去开通才行。

03

[710]python使用pyecharts绘制地图

pyecharts 是一个用于生成 Echarts 图表的类库。Echarts 是百度开源的一个数据可视化 JS 库。用 Echarts 生成的图可视化效果非常棒，pyecharts 是为了与 Python 进行对接，方便在 Python 中直接使用数据生成图。

02

用可视化地图讲照片的故事(Python+Leaflet)

手机和数码相机拍的照片里除了我们能看到的RGB像元数据，还包含了拍摄时间、图像分辨率、感光值、GPS坐标等属性，记录在Exif(Exchangeable image file format)模块里。

02

用可视化地图讲照片的故事(Python+Leaflet)

手机和数码相机拍的照片里除了我们能看到的RGB像元数据，还包含了拍摄时间、图像分辨率、感光值、GPS坐标等属性，记录在Exif(Exchangeable image file format)模块里。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭