echarts的地圖點選事件
阿新 • • 發佈:2018-12-31
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 }