echarts的地图点击事件

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

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

  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 }

待续......

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一“技”之长

iOS原生地图开发指南 原

在上一篇博客中:http://my.oschina.net/u/2340880/blog/414760。对iOS中的定位服务进行了详细的介绍与参数说明,在开发中...

1203
来自专栏视频咖

100行代码搞定短视频App,终于可以和美女合唱了。

最近抖音最近又带了一波合唱的节奏,老板看到后果然又是要尽快跟进,希望隔壁公司加薪的时候他也能作出如此反应。

33K2
来自专栏雪胖纸的玩蛇日常

Vue+Django2.0 REST framework打造前后端分离的生鲜电商项目(三)设计数据库以及导入原始数据

4495
来自专栏SAP最佳业务实践

SAP S/4HANA最佳业务实践:Order-to-Cash订单到收款-3合同处理

•The tile Manage Sales Contracts is part of the business catalog Sales –Contract...

3749
来自专栏cloudskyme

众推架构的进一步讨论

讨论内容 昨天的架构基本确定成如下图所示: ? 针对此架构,大家分别提了不同的看法: 【大侠】秦刘 9:53:58  工作节点的爬虫 应该就是普通的一个cmd...

3386
来自专栏xx_Cc的学习总结专栏

六天完成一个简单iOS App - 第四天

2787
来自专栏Hadoop实操

【简报】CDH和HDP的合并提前终止反垄断法的等待期

2018年11月19日,Cloudera和Hortonworks联合宣布,美国联邦贸易委员会(the U.S. Federal Trade Commission...

1733
来自专栏FreeBuf

这货不是电源:硬件渗透测试平台 – Power Pwn

Power Pwn是由美国国防部高级计划研究局(DARPA)牵头开发的硬件集成化渗透测试平台,其目标是帮助企业或个人发现安全漏洞。 Power Pwn外形与普通...

2257
来自专栏数据和云

DBA必备技能:通过truss跟踪解决监听无法启动案例

作者简介:刘斌,云和恩墨高级技术专家,擅长数据库故障诊断分析,数据库性能优化,自动化运维开发,坚持学习、写作、分享, 在Oracle DBA的日常工作中,通过各...

3147
来自专栏杂文共赏

3分钟将10M Stack Overflow导入Neo4j

我想演示如何将Stack Overflow快速导入到Neo4j中。之后,您就可以通过查询图表以获取更多信息,然后可以在该数据集上构建应用程序。如果你愿意,我们有...

7076

扫码关注云+社区

领取腾讯云代金券