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