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 }
待续......
