echarts地图点击事件(附地图点击事件完整实例代码)
echarts的地图点击事件,echarts的地图展示,有时候展示出的数据,虽然鼠标点击上去某个省份或者某个地方会有数据显示,但是点击一下地图没有任何动态效果,如何添加地图点击效果呢,这里自己也是坐下笔记,方便以后使用。
准备工作:
①到echarts3(注意是echarts3,不是echarts2)官方下载echarts或者自定义下载,下载地址:http://echarts.baidu.com/download.htm
②准备地图的坐标文件,就是本文示例中引用的beijing.js文件
说明:
代码中未说明的配置项,可以在官网查看。还有很多配置属性,示例中并没有使用到。配置文档地址:http://echarts.baidu.com/option.html#tooltip.trigger
地图中文字位置控制说明:
在我们自己准备的坐标文件中,在下载示例shenzhen.js文件中,搜索“cp”,即每个地区坐标的开头{"type":"Feature","id":"440308","properties":{"cp":[114.2712600002325,22.608372999871885],"name":"盐田区"} 中的cp中的坐标,没有的话,自己添加,这个坐标就是控制地图中文字显示的位置。
全国区县级json数据及完整示例下载地址:http://download.csdn.net/download/qq_21386275/10218492
echarts地图点击事件完整实例代码:
//地图展示 function map() { //url,将需要的数据查询出来,放到固定的省份的位置即可。 var url = "xxxxxx.action"; var array = new Array(); $.ajax({ url : url, dataType : "json", async : false, success : function(data){ var datas = data.result; var length = datas.length; //逻辑控制 ...... } }); //console.log(array); //将查询出的需要的省份的数据值存放到下面对应的地方 var option = { tooltip : { trigger : 'item' }, dataRange : { orient : 'horizontal', min : 0, max : 55000, text : [ '高', '低' ], // 文本,默认为数值文本 splitNumber : 0 }, series : [ { name : '', type : 'map', mapType : 'china', mapLocation : { x : 'left' }, selectedMode : 'multiple', itemStyle : { normal : { label : { show : true } }, emphasis : { label : { show : true } } }, data : [ { name : '西藏', value : array[1], selected : true,//此属性值是默认被选中 }, { name : '青海', value : array[2], }, { name : '宁夏', value : array[3], }, { name : '海南', value : array[4], }, { name : '甘肃', value : array[5], }, { name : '贵州', value : array[6], selected : true, }, { name : '新疆', value : array[7], }, { name : '云南', value : array[8], }, { name : '重庆', value : array[9], selected : true, }, { name : '吉林', value : array[10], }, { name : '山西', value : array[11], }, { name : '天津', value : array[12], }, { name : '江西', value : array[13], }, { name : '广西', value : array[14], }, { name : '陕西', value : array[15], }, { name : '黑龙江', value : array[16], }, { name : '内蒙古', value : array[17], }, { name : '安徽', value : array[18], selected : true, }, { name : '北京', value : array[19], //selected : true, }, { name : '福建', value : array[20], }, { name : '上海', value : array[21], selected : true, }, { name : '湖北', value : array[22], }, { name : '湖南', value : array[23], }, { name : '四川', value : array[24], selected : true, }, { name : '辽宁', value : array[25], }, { name : '河北', value : array[26], }, { name : '河南', value : array[27], }, { name : '浙江', value : array[28], selected : true, }, { name : '山东', value : array[29], selected : true, }, { name : '江苏', value : array[30], selected : true, }, { name : '广东', value : array[31], selected : true, }, { name : '台湾', value : array[32], } ] } ], animation : false }; myChart.setOption(option, true); //点击事件,根据点击某个省份计算出这个省份的数据 myChart.on('click', function (params) { console.log(params); //逻辑控制 ...... }); }
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址:https://tangjiusheng.cn/js/604.html
原文地址:https://tangjiusheng.cn/js/604.html