ECharts之类型map(省级，地级市)
一、效果：
1.广东地图
2.深圳地图
二、项目结构：
1.广东地图
2.深圳地图
三、项目介绍：
1.广东地图：
地图包含三个模块，①广东地图图表是用geo，不是series因为只作为背景（可捕捉点击地级市事件）。②地图上的条形图是根据坐标地位的③左下角的条形图是根据grid来定位的。
2.深圳市地图：（与广东地图一样）
四、源码
1.广东地图：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel=\'icon\' href=\'w.ico\' type=\'image/x-icon\'> 5 <title>广东地图2D</title> 6 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 7 <script src="echarts.min.js"></script> 8 <script src="echarts-gl.min.js"></script> 9 <!-- <script src="http://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js"></script> --> 10 <script src="guangdong.js"></script> 11 <script src="jquery-3.2.1.js"></script> 12 13 <style type="text/css"> 14 #id1 { 15 16 border:2px solid green; 17 height: 450px; 18 19 } 20 21 </style> 22 23 </head> 24 25 <body> 26 <div id="id1"></div> 27 28 29 <script> 30 var rawData = [ 31 {name: \'珠海市\',value:130}, 32 {name: \'广州市\',value: 50}, 33 {name: \'中山市\',value:30}, 34 {name: \'佛山市\',value: 50}, 35 {name: \'清远市\',value:30}, 36 {name: \'梅州市\',value: 50}, 37 {name: \'汕头市\',value:30}, 38 {name: \'东莞市\',value: 50}, 39 {name: \'惠州市\',value:30}, 40 {name: \'深圳市\',value: 50} 41 ]; 42 43 function Map(id,cityData){ 44 45 function sortRule(a,b){return a.value-b.value;} 46 cityData.sort(sortRule); 47 var name=cityData.map(name=>name.name); 48 49 var chart = echarts.init(document.getElementById(id)); 50 51 var geoCoordMap = { 52 \'珠海市\': [113.353986,21.924979] 53 ,\'广州市\':[113.480637,23.125178] 54 ,\'湛江市\':[110.264977,21.274898] 55 ,\'茂名市\':[110.919229,21.659751] 56 ,\'阳江市\':[111.825107,21.859222] 57 ,\'云浮市\':[112.044439,22.629801] 58 ,\'肇庆市\':[112.472529,23.051546] 59 ,\'江门市\':[112.894942,22.090431] 60 ,\'中山市\':[113.382391,22.321113] 61 ,\'佛山市\':[113.022717,22.828762] 62 ,\'清远市\':[113.051227,23.685022] 63 ,\'韶关市\':[113.591544,24.501322] 64 ,\'河源市\':[114.897802,23.746266] 65 ,\'梅州市\':[116.117582,24.099112] 66 ,\'潮州市\':[116.692301,23.661701] 67 ,\'揭阳市\':[116.255733,23.143778] 68 ,\'汕头市\':[116.708463,22.87102] 69 ,\'汕尾市\':[115.364238,22.774485] 70 ,\'深圳市\':[114.085947,22.347] 71 ,\'东莞市\':[113.746262,22.746237] 72 ,\'惠州市\':[114.412599,23.079404] 73 }; 74 75 var option = { 76 legend: [], 77 xAxis: [{ 78 type: "value", 79 axisLine: { 80 show: false 81 }, 82 axisTick: { 83 show: false 84 }, 85 axisLabel: { 86 show: false 87 }, 88 splitLine: { 89 show: false 90 } 91 },], 92 yAxis: [{ 93 type: "category", 94 95 axisLine: { 96 show: false 97 }, 98 axisTick: { 99 show: false, 100 alignWithLabel: true 101 }, 102 axisLabel: { 103 textStyle:{ 104 show:false 105 } 106 }, 107 data:name, 108 },], 109 grid: [{ 110 left: "70%", 111 right: "20", 112 bottom: "10", 113 top:\'60%\', 114 containLabel: true 115 },], 116 title:[{ 117 text:\'全省安全态势\', 118 x:0, 119 textStyle:{ 120 color:\'rgb(0,147,203)\', 121 fontSize:14 122 } 123 },{ 124 text: "综合安全事件影响排名Top10", 125 textStyle: { 126 color: "#000", 127 fontWeight: "bold", 128 fontSize: 14 129 }, 130 top: "55%", 131 left: "69%" 132 }], 133 tooltip:[{ 134 // formatter:function(params){ 135 // console.log(params) 136 // var content=\'\', 137 // content=params.name+params.value[0]+params.value[1]+params.value[2]; 138 // return content; 139 // }, 140 show:true, 141 }], 142 backgroundColor:\'#fff\', 143 // visualMap: { 144 // show: false, 145 // min: 0, 146 // max: 3000, 147 // inRange: { 148 // color: [\'#00ffff\', \'#006edd\'], 149 // color: [\'#00467F\', \'#A5CC82\'] 150 // }, 151 // calculable:true 152 153 // }, 154 155 geo:{ 156 157 show:true, 158 map:\'广东\', 159 type:\'map\', 160 label: { 161 normal: { 162 show: false 163 }, 164 emphasis: { 165 show: true, 166 fontSize:15, 167 fontWeight:\'bold\', 168 color:\'rgb(80,50,180)\', 169 } 170 }, 171 roam: false, 172 itemStyle: { 173 normal: { 174 areaColor: [\'rgb(0,90,157)\'], 175 borderColor: \'#fff\', 176 borderWidth: \'0.8\', 177 }, 178 emphasis: { 179 areaColor: \'#2B91B7\', 180 } 181 } 182 }, 183 series: [{ 184 name: "安全事件数量", 185 type: "bar", 186 data: cityData, 187 barWidth:7, 188 barCategoryGap: "50%", 189 label: { 190 normal: { 191 left:\'right\', 192 show: true, 193 position: "right", 194 formatter: function(params) { 195 console.log(params); 196 return params.data.value; 197 }, 198 textStyle: { 199 color: "#000" //color of value 200 } 201 } 202 }, 203 itemStyle: { 204 normal: { 205 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ 206 offset: 0, 207 color: "rgb(231,91,250)" // 0% 处的颜色 208 }, { 209 offset: 1, 210 color: "rgb(80,50,180)" // 100% 处的颜色 211 }], false), 212 barBorderRadius: [30, 30,30, 30], 213 } 214 } 215 },] 216 217 };//option 218 chart.setOption(option); 219 220 function renderEachCity() { 221 var width=$(\'#id1\').width(); 222 var height=$(\'#id1\').height(); 223 // option.xAxis.push(); 224 // option.yAxis.push(); 225 // option.grid.push(); 226 // option.series.push(); 227 echarts.util.each(rawData, function(dataItem, idx) { 228 229 var geoCoord = geoCoordMap[dataItem.name]; 230 231 var coord = chart.convertToPixel(\'geo\', geoCoord); 232 console.log(geoCoord+":"+coord); 233 idx += \'\'; 234 235 236 option.xAxis.push({ 237 id: idx, 238 gridId: idx, 239 type: \'category\', 240 show: false 241 }); 242 option.yAxis.push({ 243 id: idx, 244 gridId: idx, 245 show: false 246 }); 247 option.grid.push({ 248 id: idx, 249 width: 10, 250 height: (dataItem.value), 251 left: coord[0], 252 bottom:height-coord[1]+10, 253 }); 254 255 256 option.series.push({ 257 name:dataItem.name, 258 type: \'bar\', 259 xAxisId: idx, 260 yAxisId: idx, 261 road:true, 262 itemStyle: { 263 normal: { 264 color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 265 offset: 0, 266 color: \'rgba(231,91,250,1)\' 267 }, { 268 offset: 1, 269 color: \'rgba(80,50,180,0.9)\' 270 }], false), 271 barBorderRadius: [30, 30,30, 30], 272 borderColor:\'rgba(255,255,255,0.8)\', 273 }, 274 emphasis:{ 275 color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 276 offset: 1, 277 color: \'rgb(231,91,250)\' 278 }, { 279 offset: 0, 280 color: \'rgb(80,50,180)\' 281 }], false) 282 } 283 }, 284 data: [dataItem.value] 285 }); 286 287 288 }); 289 chart.setOption(option); 290 } 291 292 renderEachCity(); 293 294 295 chart.on(\'click\',function(params){console.log(params);}) 296 297 } 298 Map(\'id1\',rawData); 299 </script> 300 </body> 301 </html>
2.深圳市地图：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel=\'icon\' href=\'w.ico\' type=\'image/x-icon\'> 5 <title>地级市地图2D</title> 6 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 7 <script src="echarts.min.js"></script> 8 <script src="echarts-gl.min.js"></script> 9 <!-- <script src="http://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js"></script> --> 10 <script src="guangdong.js"></script> 11 <script src="jquery-3.2.1.js"></script> 12 13 <style type="text/css"> 14 #id1 { 15 16 border:2px solid green; 17 height: 530px; 18 width:1097px; 19 20 } 21 22 </style> 23 24 </head> 25 26 <body> 27 <div id="id1"></div> 28 29 30 <script> 31 var rawData = [ 32 {name: \'时代互联\',value:130}, 33 {name: \'朗达互动\',value: 50} 34 35 ]; 36 37 function Map(id,cityData,cityName){ 38 var name=cityData.map(name=>name.name); 39 40 41 var chart = echarts.init(document.getElementById(id)); 42 $.getJSON(\'广东/\'+cityName+\'.json\', function (usaJson) { 43 echarts.registerMap(\'city\', usaJson); 44 var geoCoordMap = { 45 \'时代互联\':[114.085947,22.547], 46 \'朗达互动\':[114.005947,22.547], 47 \'飞远网络\':[113.353986,21.924979], 48 \'科飞科技\':[113.353986,21.924979], 49 \'明飞互联\':[113.353986,21.924979], 50 \'万网网络\':[113.353986,21.924979], 51 \'大朗科技\':[113.353986,21.924979], 52 \'腾度科技\':[112.353986,22.924979] 53 54 55 56 }; 57 58 var option = { 59 legend: [], 60 xAxis: [{ 61 type: "value", 62 axisLine: { 63 show: false 64 }, 65 axisTick: { 66 show: false 67 }, 68 axisLabel: { 69 show: false 70 }, 71 splitLine: { 72 show: false 73 } 74 },], 75 yAxis: [{ 76 type: "category", 77 78 axisLine: { 79 show: false 80 }, 81 axisTick: { 82 show: false, 83 alignWithLabel: true 84 }, 85 axisLabel: { 86 textStyle:{ 87 show:false 88 } 89 }, 90 data:name, 91 },], 92 grid: [{ 93 left: "70%", 94 right: "20", 95 bottom: "10", 96 top:\'60%\', 97 containLabel: true 98 },], 99 title:[{ 100 text:cityName+\'IDC安全态势\', 101 x:0, 102 textStyle:{ 103 color:\'rgb(0,147,203)\', 104 fontSize:14 105 } 106 },{ 107 text: "综合安全事件影响排名Top10", 108 textStyle: { 109 color: "#000", 110 fontWeight: "bold", 111 fontSize: 14 112 }, 113 top: "55%", 114 left: "69%" 115 }], 116 tooltip:[{ 117 // formatter:function(params){ 118 // console.log(params) 119 // var content=\'\', 120 // content=params.name+params.value[0]+params.value[1]+params.value[2]; 121 // return content; 122 // }, 123 show:true, 124 }], 125 backgroundColor:\'#fff\', 126 // visualMap: { 127 // show: false, 128 // min: 0, 129 // max: 3000, 130 // inRange: { 131 // color: [\'#00ffff\', \'#006edd\'], 132 // color: [\'#00467F\', \'#A5CC82\'] 133 // }, 134 // calculable:true 135 136 // }, 137 138 geo:{ 139 left:\'10\', 140 show:true, 141 map:\'city\', 142 type:\'map\', 143 zlevel:0, 144 label: { 145 normal: { 146 show: false 147 }, 148 emphasis: { 149 show: true, 150 fontSize:20, 151 color:\'rgb(255,255,255)\', 152 } 153 }, 154 roam: false, 155 itemStyle: { 156 normal: { 157 color: \'rgb(0,90,157)\', 158 borderColor: \'rgb(0,90,157)\', 159 borderWidth: 1, 160 }, 161 emphasis: { 162 areaColor: \'#2B91B7\', 163 164 165 166 } 167 } 168 }, 169 series: [{ 170 name: "安全事件数量", 171 type: "bar", 172 data: cityData, 173 barWidth:7, 174 barCategoryGap: "50%", 175 zlevel:2, 176 label: { 177 normal: { 178 left:\'right\', 179 show: true, 180 position: "right", 181 formatter: function(params) { 182 console.log(params); 183 return params.data.value; 184 }, 185 textStyle: { 186 color: "#000" //color of value 187 } 188 } 189 }, 190 itemStyle: { 191 normal: { 192 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ 193 offset: 0, 194 color: "rgb(231,91,250)" // 0% 处的颜色 195 }, { 196 offset: 1, 197 color: "rgb(80,50,180)" // 100% 处的颜色 198 }], false), 199 barBorderRadius: [30, 30,30, 30], 200 } 201 } 202 },] 203 204 };//option 205 chart.setOption(option); 206 207 function renderEachCity() { 208 var width=$(\'#\'+id).width(); 209 var height=$(\'#\'+id).height(); 210 // option.xAxis.push(); 211 // option.yAxis.push(); 212 // option.grid.push(); 213 // option.series.push(); 214 echarts.util.each(rawData, function(dataItem, idx) { 215 216 var geoCoord = geoCoordMap[dataItem.name]; 217 console.log(dataItem.name); 218 var coord = chart.convertToPixel(\'geo\', geoCoord); 219 console.log(geoCoord+":"+coord); 220 idx += \'\'; 221 222 console.log(dataItem.name) 223 option.xAxis.push({ 224 id: idx, 225 gridId: idx, 226 type: \'category\', 227 //show: true, 228 data:[dataItem.name], 229 boundaryGap:true, 230 axisLine: { 231 show: false 232 }, 233 axisTick: { 234 235 236 show: false, 237 238 }, 239 axisLabel: { 240 interval:0, 241 fontSize:10, 242 243 color: "#fff", 244 245 246 247 } 248 }); 249 option.yAxis.push({ 250 id: idx, 251 gridId: idx, 252 show: false 253 }); 254 option.grid.push({ 255 id: idx, 256 width: 10, 257 height: (dataItem.value), 258 left: coord[0], 259 bottom:height-coord[1]+10, 260 }); 261 262 263 option.series.push({ 264 name:dataItem.name, 265 type: \'bar\', 266 xAxisId: idx, 267 yAxisId: idx, 268 zlevel:1, 269 road:true, 270 itemStyle: { 271 normal: { 272 color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 273 offset: 0, 274 color: \'rgba(231,91,250,1)\' 275 }, { 276 offset: 1, 277 color: \'rgba(80,50,180,0.8)\' 278 }], false), 279 borderColor:\'rgba(255,255,255,0.8)\', 280 barBorderRadius: [30, 30,30, 30], 281 }, 282 emphasis:{ 283 color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 284 offset: 1, 285 color: \'rgb(231,91,250)\' 286 }, { 287 offset: 0, 288 color: \'rgb(80,50,180)\' 289 }], false) 290 } 291 }, 292 data: [dataItem.value] 293 }); 294 295 296 }); 297 chart.setOption(option); 298 } 299 300 renderEachCity(); 301 302 303 chart.on(\'click\',function(params){console.log(params);}) 304 }); 305 } 306 Map(\'id1\',rawData,\'深圳市\'); 307 </script> 308 </body> 309 </html>