专栏首页别先生echarts的地图点击事件

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 条评论
登录 后参与评论

相关文章

  • struts2之OGNL和struts2标签库和ValueStack对象

    OGNL简介:    (1)OGNL是Object Graphic Navigation Language(对象图导航语言)的缩写,它是一个开源项目。     ...

    别先生
  • hbase启动后HMaster进程自动关闭

    1、情况描述如题所示,hbase启动以后,HMaster进程启动了,几秒钟以后自动关闭,但是HRegionServer进程正常运行; 原因是,hdfs的默认端口...

    别先生
  • vmware安装centOs操作系统配置网络的一系列问题

    1:最近公司在测试项目,需要在linux操作系统上面测试,可惜自己之前学linux操作系统不是很深,配置网络也不是很熟练,网上方法太多,但是不是很好用,确实难为...

    别先生
  • 浅谈jQuey表单序列化

    jQuery表格中提供了两个表格序列化函数。分别是serilize()和serializearray()。

    用户2936342
  • html中表单提交

    bamboo
  • MyBatis学习总结(四)——MyBatis缓存与代码生成

    缓存可以提高系统性能,可以加快访问速度,减轻服务器压力,带来更好的用户体验。缓存用空间换时间,好的缓存是缓存命中率高的且数据量小的。缓存是一种非常重要的技术。

    张果
  • Vue基础:数据绑定

    注意:当v-bind:style使用需要特定前缀的CSS属性时,如transform,Vue.js会自动侦测并添加相应的前缀。

    奋飛
  • 深入浅出| java中的clone方法

    clone,有人称之为克隆,有人称之为复制,其实都是同一个东西 本文称之为"克隆",毕竟人家方法名叫"clone"

    KEN DO EVERTHING
  • 干货 | 揭秘 Vue 3.0 最具潜力的 API

    古映杰,携程研发高级经理,负责前端框架和基础设施的设计、研发与维护。开源项目react-lite和react-imvc作者。

    携程技术
  • 爬取某招聘网站、近2万+程序员的工资单,得到以下5点涨薪结论!

    某一技术人爬了某招聘网站,获取近一周的程序员工资18275条。其中,有工资的17628条(北京4892,上海5073,广州3386,深圳4277)。本文分别从工...

    养码场

扫码关注云+社区

领取腾讯云代金券