echart地图点击事件使用一例

最新推荐文章于 2024-08-05 05:00:00 发布
最新推荐文章于 2024-08-05 05:00:00 发布
阅读量1.3w 收藏 12
点赞数 2
分类专栏： 可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/v104052010024/article/details/51228965
版权
本文介绍如何利用ECharts在地图上标注地点，并实现鼠标经过时展示图表的提示。通过改造示例，将静态提示改为动态生成图表，并设置点击事件，使得点击城市能切换数据并动态更新报表。
摘要由CSDN通过智能技术生成

公司准备在旅博会来一发，做几张炫酷的报表，打算用echart，demo里有一张迁徙图比较符合需求 


改造开始：在地图上标注一些地点，鼠标经过展示一张报表

最低0.47元/天 解锁文章
星星点灯灯
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
如何在echarts的图形中添加点击事件！！
qq_27098879的博客
05-03 1万+
    最近在做echarts的点击事件中获得体会，如何在echarts中添加点击事件，比如一个弹出框，查询官方api可得知，其回调函数中的params参数包括以上的这些属性，可以获得我们想要的信息，通过信息完成事件的发生。这是js中的调用方式comChars.on('click',function(params){ var name = params.name; var seriesType...
echarts飞线图 迁徙图 坐标点名称
Temple_Qii的博客
07-02 1221
echarts飞线图 迁徙图 获得地图json数据：https://datav.aliyun.com/tools/atlas/index.html#&lat=30.37018632615852&lng=106.68898666525287&zoom=3.5
Echarts 绘制地图（中国、省市、区县）
最新发布
富朝阳的博客
08-05 4710
Echarts 绘制地图（中国、省市、区县）
echarts 提示框异步获取数据 —— formatter 异步回调函数的使用
朝阳39的博客
09-06 2612
核心代码 let that = this; // 提示框 tooltip: { // 触发事件 triggerOn: "click", backgroundColor: "transparent", formatter: function(params, ticket, callback) { console.log(ticket); that.$http.
Echarts自定义地图点击事件
Circle-C的博客
03-14 2547
【代码】Echarts自定义地图点击事件。
echarts地图的单、双击
qq_43654065的博客
04-24 4408
1. 单击事件 map-click this.chart.on("click",function(params){ console.log(params.data) }) 2. 双击击事件 map-dblclick this.chart.on("dblclick",function(params){ console.log(params.data) }) 调用点击事件前，首先要先去除点击事件，否则有重复调用的可能。 this.chart.off('click') this.c
三亚echart地图.zip
03-22
在本案例中，"三亚echart地图.zip" 提供了一个专门针对三亚地区的 ECharts 地图应用示例。 首先，我们要了解 ECharts 的基本使用方法。ECharts 是基于 HTML5 Canvas 技术实现的，所以你需要确保浏览器支持这一特性...
echarts-map点击显示省地图
04-09
在本文中，我们将深入探讨如何使用ECharts库实现一个交互式地图功能，即"echarts-map点击显示省地图"。ECharts是一款由百度开发的基于JavaScript的数据可视化库，它提供了丰富的图表类型，易于使用，且支持高度...
echarts4.4地图演示（可点击地市）
10-29
在本例中，jQuery可能被用来处理地图上的点击事件。 地图的实现主要依赖于ECharts的`map`系列。ECharts内置了多种地图数据，包括中国的各个省份和地级市。黑龙江地图的展示可以通过指定`mapType`为`'china'`，然后...
echart 实例
11-16
总结，ECharts是一个强大且灵活的JavaScript可视化库，通过掌握其基本使用、图表类型、数据格式、配置项设置和交互功能，可以创建出各种各样的数据可视化应用。在实际项目中，结合具体的业务需求和数据特点，你可以...
echarts中的地图改变大小和位置
EstherNi的博客
08-02 3313
echarts中的地图改变大小和位置
echarts地图,和地图点击事件 地图加点击事件 修改地图选中区颜色
weixin_50885665的博客
12-16 2674
笔记：Echarts地图 被选中更改颜色一系列配置_skyseey的博客-CSDN博客_echarts地图选中颜色 echarts地图,和地图点击事件_小鱼爱小于的博客-CSDN博客_echarts 地图点击事件ECharts map地图点击切换变颜色 - 掘金
echarts中map的放大缩小与重置
nkym123456的博客
03-01 2042
echarts中map的放大缩小与重置。
Echarts 3D地图 标记实现
yuhaiyang11的博客
03-11 1342
Echarts 3D地图及标记点实现
ECharts问题--散点图中对散点添加点击事件
weixin_30402085的博客
01-13 3663
1.　　我们这次就没有先讲解怎么使用散点图了，这个跟之前的一些图还是很类似的，不会的可以去官网上面查看 API 使用。我们这次讲解的是为散点图中的散点添加点击事件，然后在图表之外的一个 div 里面显示这个元素的一些属性，一开始我想的是使用原生 javascript 的click事件来操作，但是这个方法是不可行的，因为我们的图表是在 canvas 中的显示的，所以我们每个散点不是能够我们通过 DO...
echart图表点击事件
木玄客的博客
02-17 2154
echart图表点击事件。
echarts地图随意绘制点
ying_ying7的博客
12-23 2044
获取echarts各国各省JSON数据： http://datav.aliyun.com/tools/atlas/#&lat=30.343372698262712&lng=106.720060693723&zoom=3.5 部分核心代码： import hzjson from './hangzhou.json' // 1.获取绘制地图的div容器 let myChart = echarts.init(document.getElementById('hangzhou')) //
Echarts3实例 map地图加载点数据
热门推荐
idomyway的博客
12-18 2万+
前言     Echarts map地图展示坐标点，并能更具不同的属性值进行区分，展示点数据依赖于Echarts的散点图scatter、effectScatter，底图依赖于geo。     geo：地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。    ...
echart地图点位点击事件
09-13
对于echarts地图的点位点击事件，可以通过绑定监听器来实现。具体步骤如下： 1. 首先，确保你已经引入了echarts库，并创建了一个地图实例。 2. 使用echarts提供的API，设置series的itemStyle中的emphasis属性，将emphasis属性的focus属性设为true，表示在点击时启用高亮效果。 3. 绑定地图上的点击事件，在事件回调函数中获取到点击的点位信息。 4. 在点击事件回调函数中，可以通过event对象获取到点击的点位的相关信息，例如seriesName、name、value等。根据需要，可以使用这些信息做进一步的处理。 5. 最后，根据点击的点位信息进行相应的操作，比如跳转到指定页面、展示详细信息等。 下面是一个示例代码，演示了如何通过echarts实现地图的点击事件： ``` // 创建地图实例 var myChart = echarts.init(document.getElementById('map')); // 设置地图配置项 var option = { //... 其他配置项 // 设置series的itemStyle中的emphasis属性 series: [{ type: 'map', map: 'china', itemStyle: { emphasis: { focus: 'true' // 点击时启用高亮效果 } } }] }; // 绑定地图上的点击事件 myChart.on('click', function(params) { // 获取点击的点位信息 var seriesName = params.seriesName; var name = params.name; var value = params.value; // 根据需要，进行相应的操作 // 比如跳转到指定页面、展示详细信息等 // 示例：在控制台输出点击的点位信息 console.log("点击的点位信息："); console.log("seriesName: " + seriesName); console.log("name: " + name); console.log("value: " + value); }); // 渲染地图 myChart.setOption(option); ``` 以上是使用echarts实现地图的点击事件的方法，通过绑定点击事件，可以获取到点击的点位信息，并进行相应的操作。你可以根据实际需求进行进一步的处理和扩展。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值