博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
echarts的地图点击事件
阅读量:6246 次
发布时间:2019-06-22

本文共 5069 字,大约阅读时间需要 16 分钟。

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

参考链接:

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 : false161     };162     myChart.setOption(option, true);163     164     165     //点击事件,根据点击某个省份计算出这个省份的数据166     myChart.on('click', function (params) {167         console.log(params);168         //逻辑控制169         ......170     });171     172 }

 

待续......

转载地址:http://emoia.baihongyu.com/

你可能感兴趣的文章
VTDecoderXPCService意外退出
查看>>
js 数字验证
查看>>
在repeater中实现radiobutton单选
查看>>
使用Ora2Pg工具把数据从Oracle导入到PostgreSQL
查看>>
条件注释判断浏览器
查看>>
页面自动刷新代码大全
查看>>
【java基础】压缩图片上传
查看>>
Kotlin代码检查在美团的探索与实践
查看>>
Tomcat下的修改缺省项目文件夹
查看>>
网络技术
查看>>
it公司了解
查看>>
SpringCloud调研系列1:服务注册
查看>>
使用四种框架分别实现百万websocket常连接的服务器{转}
查看>>
python 之 随机数获取
查看>>
Linux开机启动流程
查看>>
Docker 介绍: 相关技术
查看>>
xcode中Version和Build的区别
查看>>
RedHat下利用bonding实现linux服务器网卡绑定
查看>>
libjingle : sessionmanagertask 分析
查看>>
主从DB与cache一致性
查看>>