前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >echarts的地图点击事件

echarts的地图点击事件

作者头像
别先生
发布于 2018-12-14 09:29:10
发布于 2018-12-14 09:29:10
4.3K00
代码可运行
举报
文章被收录于专栏:别先生别先生
运行总次数:0
代码可运行

1、echarts的地图展示,有时候展示出的数据,虽然鼠标点击上去某个省份或者某个地方会有数据显示,但是点击一下地图没有任何动态效果,如何添加地图点击效果呢,这里自己也是坐下笔记,方便以后使用。

参考链接:https://blog.csdn.net/qq_21386275/article/details/79039024

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  1 //地图展示
  2 function map() {
  3     //url,将需要的数据查询出来,放到固定的省份的位置即可。
  4     var url = "xxxxxx.action";
  5     var array = new Array();
  6     $.ajax({
  7         url : url,
  8         dataType : "json",
  9         async : false,
 10         success : function(data){
 11             var datas = data.result;
 12             var length = datas.length;
 13             //逻辑控制
 14             ......
 15         }
 16     });
 17     //console.log(array);
 18     
 19     //将查询出的需要的省份的数据值存放到下面对应的地方
 20     var option = {
 21         tooltip : {
 22             trigger : 'item'
 23         },
 24         dataRange : {
 25             orient : 'horizontal',
 26             min : 0,
 27             max : 55000,
 28             text : [ '高', '低' ], // 文本,默认为数值文本
 29             splitNumber : 0
 30         },
 31         series : [ {
 32             name : '',
 33             type : 'map',
 34             mapType : 'china',
 35             mapLocation : {
 36                 x : 'left'
 37             },
 38             selectedMode : 'multiple',
 39             itemStyle : {
 40                 normal : {
 41                     label : {
 42                         show : true
 43                     }
 44                 },
 45                 emphasis : {
 46                     label : {
 47                         show : true
 48                     }
 49                 }
 50             },
 51             data : [ {
 52                 name : '西藏',
 53                 value : array[1],
 54                 selected : true,//此属性值是默认被选中
 55             }, {
 56                 name : '青海',
 57                 value : array[2],
 58             }, {
 59                 name : '宁夏',
 60                 value : array[3],
 61             }, {
 62                 name : '海南',
 63                 value : array[4],
 64             }, {
 65                 name : '甘肃',
 66                 value : array[5],
 67             }, {
 68                 name : '贵州',
 69                 value : array[6],
 70                 selected : true,
 71             }, {
 72                 name : '新疆',
 73                 value : array[7],
 74             }, {
 75                 name : '云南',
 76                 value : array[8],
 77             }, {
 78                 name : '重庆',
 79                 value : array[9],
 80                 selected : true,
 81             }, {
 82                 name : '吉林',
 83                 value : array[10],
 84             }, {
 85                 name : '山西',
 86                 value : array[11],
 87             }, {
 88                 name : '天津',
 89                 value : array[12],
 90             }, {
 91                 name : '江西',
 92                 value : array[13],
 93             }, {
 94                 name : '广西',
 95                 value : array[14],
 96             }, {
 97                 name : '陕西',
 98                 value : array[15],
 99             }, {
100                 name : '黑龙江',
101                 value : array[16],
102             }, {
103                 name : '内蒙古',
104                 value : array[17],
105             }, {
106                 name : '安徽',
107                 value : array[18],
108                 selected : true,
109             }, {
110                 name : '北京',
111                 value : array[19],
112                 //selected : true,
113             }, {
114                 name : '福建',
115                 value : array[20],
116             }, {
117                 name : '上海',
118                 value : array[21],
119                 selected : true,
120             }, {
121                 name : '湖北',
122                 value : array[22],
123             }, {
124                 name : '湖南',
125                 value : array[23],
126             }, {
127                 name : '四川',
128                 value : array[24],
129                 selected : true,
130             }, {
131                 name : '辽宁',
132                 value : array[25],
133             }, {
134                 name : '河北',
135                 value : array[26],
136             }, {
137                 name : '河南',
138                 value : array[27],
139             }, {
140                 name : '浙江',
141                 value : array[28],
142                 selected : true,
143             }, {
144                 name : '山东',
145                 value : array[29],
146                 selected : true,
147             }, {
148                 name : '江苏',
149                 value : array[30],
150                 selected : true,
151             }, {
152                 name : '广东',
153                 value : array[31],
154                 selected : true,
155             }, {
156                 name : '中国台湾',
157                 value : array[32],
158             } ]
159         } ],
160         animation : false
161     };
162     myChart.setOption(option, true);
163     
164     
165     //点击事件,根据点击某个省份计算出这个省份的数据
166     myChart.on('click', function (params) {
167         console.log(params);
168         //逻辑控制
169         ......
170     });
171     
172 }

待续......

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-11-17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
基于echarts实现3D地图的定时高亮和点击事件
此时地图消息就在你的node_modules/echarts/map/china中
腾讯位置服务
2020/11/20
4.9K0
百度ECharts的使用
网址:http://echarts.baidu.com/download.html 下载文件:echarts.min.js 网址:http://echarts.baidu.com/download-map.html 下载文件:china.js
一觉睡到小时候
2019/07/03
2.2K0
百度ECharts的使用
Echarts 地图生成 以及生成geojson文件(附带完整代码)
前言:需要实现的效果就是生成省级地图,点击省级地图中的市切换至市级地图。为了自己方便查阅,也方便大家使用。
全栈程序员站长
2022/11/16
2.8K0
Echarts 地图生成 以及生成geojson文件(附带完整代码)
echarts 应用数个样例
注意输入数组的格式(不是一般Javascript 的数组格式,而是有点像json 的样子),代码例如以下:
全栈程序员站长
2022/07/08
1.3K0
echarts 应用数个样例
vue实现世界疫情地图(点击进入子地图)
用axios请求这些数据如果出现跨域问题,就设置本地代理,在根目录下创建vue.config.js文件
代码哈士奇
2021/01/26
1.1K0
vue实现世界疫情地图(点击进入子地图)
Vue实现echarts地图与table表格数据联动
今天后端突然告诉我说,需要我实现一下通过点击地图,获取地图的地址,然后通过地址名称来拿取table表格的数据,从而实现表格和数据的联动,我一想,不就添加一个点击事件嘛,简单,结果。。。。
玖柒的小窝
2021/10/19
2.5K0
Vue实现echarts地图与table表格数据联动
echarts制作疫情地图
ECharts地图详解:https://blog.csdn.net/xieweikun7/article/details/52766676
陨石坠灭
2020/05/22
4.7K0
Echarts的legends 禁用点击事件但不影响鼠标悬浮事件
在最下面改写legend点击事件同时禁用动画效果animation:false此改动会使得动画效果僵硬。 option && myChart.setOption(option); // 点击图例 myChart.on('legendselectchanged', function (params) { myChart.setOption({ legend:{selected:{[params.name]: true}},
Symbol125
2023/01/17
3.8K0
eCharts添加自定义geojson数据实现地图展示
当初看到echarts的地图的时候感觉可以做点什么,但是一直米有实施,最近刚好用到了,就研究了研究,在echarts中添加了自定义的geojson数据,实现数据的地图展示。
牛老师讲GIS
2018/10/23
19.9K0
eCharts添加自定义geojson数据实现地图展示
echarts实现航班选座案例分析
最近在echarts官方看到了一个航班选座的示例,感觉很好,可以扩大,缩小,鼠标放置到座位上可以显示座位号,允许默认选中座位。于是在5.1假期抽了一点点时间,来写一篇文章,深入研究分析一下这个示例,解析一下这个示例的完整代码。首先让我们来看下示例的效果图。
拿我格子衫来
2022/01/24
2.4K0
echarts实现航班选座案例分析
前端实战:ECharts实现饼图选中区域跳转
ECharts是百度开源的一个基于JavaScript的可视化图表库,提供了直观、生动、可交互、可高度定制化的数据可视化图表展现能力,支持直线图、K线图、散点图、饼图、地图等多种图表类型。ECharts使得复杂的数据可视化变得简单易行,可广泛应用于各类数据展现领域,如BI、舆情分析、数据报表等。
小明互联网技术分享社区
2024/07/29
8380
前端实战:ECharts实现饼图选中区域跳转
Echarts地图实现散点配置
关于Echarts地图添加散点,以及地图label的显示,记录如下: 需求: 关于这个地图的需求: 地图label上体现对比效果,差值大于0 红色,小于0 绿色 散点图要求涟漪效果,并默认只展示TOP10 不同区域颜色不同 代码: /* * @Author: Tricia * @Date: 2022-12-14 15:28:39 * @Description: 地图绘制 */ // 地图数据 let seriesData = [ { nam
且陶陶
2023/04/12
1.1K0
Echarts地图实现散点配置
echarts画中国地图及省份切换
最近用 ehcarts 写了一个有关中国地图的需求,这篇文章来总结下基本的原理和用法。
windliang
2022/09/23
4.9K0
echarts画中国地图及省份切换
echarts中国地图使省份选择性滑动或点击高亮「建议收藏」
本文介绍echarts显示中国省份图,对于需要高亮的省份进行筛选。并且对省份进行选择性交互。
全栈程序员站长
2022/11/01
3.7K0
echarts中国地图使省份选择性滑动或点击高亮「建议收藏」
echarts中地图和统计图的简单使用
各个省份地图json下载地址: https://github.com/apache/incubator-echarts/tree/master/map 或者点击这里 链接:https://pan.baidu.com/s/11d-vKVEip7InOOlu8si8RA 提取码:b397
不愿意做鱼的小鲸鱼
2022/09/26
1.3K0
echarts中地图和统计图的简单使用
关于flask入门教程-ajax+echarts实现地图GDP展示
地图可视化就是将地理数据转换成可视化形态,通过将具有地域特征的数据或者数据分析结果形象地表现在地图上,使得用户可以更加容易理解数据规律和趋势。通俗地讲,地图可视化可以将地理数据更清晰直白地展现出来。
python与大数据分析
2022/03/11
9210
关于flask入门教程-ajax+echarts实现地图GDP展示
vue疫情大屏数据展示+数据导出+地图图片下载
将页面分成三部分 第一部分就是左侧两个图 第二部分就是中间部分 第三部分就是右侧图和表格
代码哈士奇
2021/01/26
2.5K0
vue疫情大屏数据展示+数据导出+地图图片下载
Echarts鼠标事件阻止冒泡
按照上面的分析,接下来我们只需要对扇形的点击事件做阻止冒泡就好了。 我的测试代码如下: 分别使用了常识里的event.stopPropagation()、return false;,甚至看到params有个cancelBubble也尝试设置成true,都无法生效
celineWong7
2020/11/05
4.9K0
自定义图例事件
主要思路 增加无数据的 series[i] ,产生额外的图例图标 监听「legendselectchanged」事件,更新图表数据源,实现所需图形的显示 / 隐藏 具体实现 准备原始数据、准备过滤原始数据的函数 arrFilter(): datasetSource = [ ['product', '2015', '2016', '2017', '2018'], ['Matcha Latte', 43.3, 85.8, 93.7, 54.2], ['Milk Tea', 83
ZXand618
2022/04/10
4830
自定义图例事件
大数据工程师必备之数据可视化技术
也有其他类的软件做可视化:一则使用,一则是开发。使用有成品的软件可以使用,一些SPSS软件、Tableau。开发使用的是echarts、Hights、D3等一些可视化的工具和库。
张哥编程
2024/12/13
5830
大数据工程师必备之数据可视化技术
相关推荐
基于echarts实现3D地图的定时高亮和点击事件
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验