首先看一下运行效果；
效果图如下：
具体实现如下：
引用js文件：jq、echarts.js；
1 <script src="../js/echarts.js"></script> 2 <script src="../js/jquery-1.10.2.min.js"></script> 3 <script type="text/javascript"> 4 function draw() { 5 // 路径配置 6 var cfg = require.config({ 7 paths: { 8 echarts: \'http://echarts.baidu.com/build/dist\' 9 //echarts: \'http://echarts.baidu.com\' 10 } 11 }); 12 require([\'echarts\', \'echarts/chart/map\'], 13 function (ec) { 14 var myChart = ec.init(document.getElementById(\'mainMap\')); 15 var option = { 16 tooltip: { 17 trigger: \'item\', 18 formatter: \'{b}\' 19 }, 20 dataRange: { 21 x: \'-1000px\', //图例横轴位置 22 y: \'-1000px\', //图例纵轴位置 23 splitList: [ 24 { 25 start: 1, 26 end: 1, 27 label: \'北京\', 28 color: \'#46799E\' 29 }, { 30 start: 2, 31 end: 2, 32 label: \'天津\', 33 color: \'#9FBCD4\' 34 }, { 35 start: 3, 36 end: 3, 37 label: \'上海\', 38 color: \'#78A1C3\' 39 }, { 40 start: 4, 41 end: 4, 42 label: \'重庆\', 43 color: \'#79A2C4\' 44 }, { 45 start: 5, 46 end: 5, 47 label: \'河北\', 48 color: \'#A5BED7\' 49 }, { 50 start: 6, 51 end: 6, 52 label: \'河南\', 53 color: \'#A3BDD8\' 54 }, { 55 start: 7, 56 end: 7, 57 label: \'云南\', 58 color: \'#8DAFCD\' 59 }, { 60 start: 8, 61 end: 8, 62 label: \'辽宁\', 63 color: \'#9CB9D4\' 64 }, { 65 start: 9, 66 end: 9, 67 label: \'黑龙江\', 68 color: \'#7BA3C5\' 69 }, { 70 start: 10, 71 end: 10, 72 label: \'湖南\', 73 color: \'#A3BDD8\' 74 }, { 75 start: 11, 76 end: 11, 77 label: \'安徽\', 78 color: \'#ACC2D5\' 79 }, { 80 start: 12, 81 end: 12, 82 label: \'山东\', 83 color: \'#9DBAD4\' 84 }, { 85 start: 13, 86 end: 13, 87 label: \'新疆\', 88 color: \'#78A2C5\' 89 }, { 90 start: 14, 91 end: 14, 92 label: \'江苏\', 93 color: \'#C3D3E5\' 94 }, { 95 start: 15, 96 end: 15, 97 label: \'浙江\', 98 color: \'#9DBAD4\' 99 }, { 100 start: 16, 101 end: 16, 102 label: \'江西\', 103 color: \'#C2D3E4\' 104 }, { 105 start: 17, 106 end: 17, 107 label: \'湖北\', 108 color: \'#A2BED8\' 109 }, { 110 start: 18, 111 end: 18, 112 label: \'广西\', 113 color: \'#D7E4EF\' 114 }, { 115 start: 19, 116 end: 19, 117 label: \'甘肃\', 118 color: \'#94B4D0\' 119 }, { 120 start: 20, 121 end: 20, 122 label: \'山西\', 123 color: \'#8DAFCD\' 124 }, { 125 start: 21, 126 end: 21, 127 label: \'内蒙古\', 128 color: \'#9DBAD4\' 129 }, { 130 start: 22, 131 end: 22, 132 label: \'陕西\', 133 color: \'#9AB8D3\' 134 }, { 135 start: 23, 136 end: 23, 137 label: \'吉林\', 138 color: \'#81A7C7\' 139 }, { 140 start: 24, 141 end: 24, 142 label: \'福建\', 143 color: \'#94B6D2\' 144 }, { 145 start: 25, 146 end: 25, 147 label: \'贵州\', 148 color: \'#9BB8D2\' 149 }, { 150 start: 26, 151 end: 26, 152 label: \'广东\', 153 color: \'#7BA4C6\' 154 }, { 155 start: 27, 156 end: 27, 157 label: \'青海\', 158 color: \'#8DAFCD\' 159 }, { 160 start: 28, 161 end: 28, 162 label: \'西藏\', 163 color: \'#86ABCA\' 164 }, { 165 start: 29, 166 end: 29, 167 label: \'四川\', 168 color: \'#7BA4C6\' 169 }, { 170 start: 30, 171 end: 30, 172 label: \'宁夏\', 173 color: \'#BBCFE1\' 174 }, { 175 start: 31, 176 end: 31, 177 label: \'海南\', 178 color: \'#B4C9DB\' 179 }, { 180 start: 32, 181 end: 32, 182 label: \'台湾\', 183 color: \'#BACEE1\' 184 }, { 185 start: 33, 186 end: 33, 187 label: \'香港\', 188 color: \'#7BA4C6\' 189 }, { 190 start: 34, 191 end: 34, 192 label: \'澳门\', 193 color: \'#7BA4C6\' 194 }, { 195 start: 35, 196 end: 35, 197 label: \'南海诸岛\', 198 color: \'#BACEE1\' 199 }, 200 ] 201 }, 202 series: [ 203 { 204 name: \'中国\', 205 type: \'map\', 206 mapType: \'china\', 207 selectedMode: \'multiple\', 208 itemStyle: { 209 normal: { 210 label: { 211 show: true 212 }, 213 borderWidth: 3, //省份的边框宽度 214 borderColor: \'#F0F5F7\', //省份的边框颜色 215 color: \'#ece2df\' //地图背景颜色 216 //areaStyle:{color:\'#f60\'}//设置地图颜色 217 }, 218 emphasis: { 219 label: { 220 show: true 221 } 222 } 223 }, 224 data: [ 225 { 226 name: \'北京\', 227 selected: false, 228 value: 1 229 }, { 230 name: \'天津\', 231 selected: false, 232 value: 2 233 }, { 234 name: \'上海\', 235 selected: false, 236 value: 3 237 }, { 238 name: \'重庆\', 239 selected: false, 240 value: 4 241 }, { 242 name: \'河北\', 243 selected: false, 244 value: 5 245 }, { 246 name: \'河南\', 247 selected: false, 248 value: 6 249 }, { 250 name: \'云南\', 251 selected: false, 252 value: 7 253 }, { 254 name: \'辽宁\', 255 selected: false, 256 value: 8 257 }, { 258 name: \'黑龙江\', 259 selected: false, 260 value: 9 261 }, { 262 name: \'湖南\', 263 selected: false, 264 value: 10 265 }, { 266 name: \'安徽\', 267 selected: false, 268 value: 11 269 }, { 270 name: \'山东\', 271 selected: false, 272 value: 12 273 }, { 274 name: \'新疆\', 275 selected: false, 276 value: 13 277 }, { 278 name: \'江苏\', 279 selected: false, 280 value: 14 281 }, { 282 name: \'浙江\', 283 selected: false, 284 value: 15 285 }, { 286 name: \'江西\', 287 selected: false, 288 value: 16 289 }, { 290 name: \'湖北\', 291 selected: false, 292 value: 17 293 }, { 294 name: \'广西\', 295 selected: false, 296 value: 18 297 }, { 298 name: \'甘肃\', 299 selected: false, 300 value: 19 301 }, { 302 name: \'山西\', 303 selected: false, 304 value: 20 305 }, { 306 name: \'内蒙古\', 307 selected: false, 308 value: 21 309 }, { 310 name: \'陕西\', 311 selected: false, 312 value: 22 313 }, { 314 name: \'吉林\', 315 selected: false, 316 value: 23 317 }, { 318 name: \'福建\', 319 selected: false, 320 value: 24 321 }, { 322 name: \'贵州\', 323 selected: false, 324 value: 25 325 }, { 326 name: \'广东\', 327 selected: false, 328 value: 26 329 }, { 330 name: \'青海\', 331 selected: false, 332 value: 27 333 }, { 334 name: \'西藏\', 335 selected: false, 336 value: 28 337 }, { 338 name: \'四川\', 339 selected: false, 340 value: 29 341 }, { 342 name: \'宁夏\', 343 selected: false, 344 value: 30 345 }, { 346 name: \'海南\', 347 selected: false, 348 value: 31 349 }, { 350 name: \'台湾\', 351 selected: false, 352 value: 32 353 }, { 354 name: \'香港\', 355 selected: false, 356 value: 33 357 }, { 358 name: \'澳门\', 359 selected: false, 360 value: 34 361 }, { 362 name: \'南海诸岛\', 363 selected: false, 364 value: 35 365 } 366 ] //各省地图颜色数据依赖value 367 } 368 ] 369 }; 370 myChart.setOption(option); 371 } 372 ); 373 374 } 375 376 $(function () { 377 draw(); 378 $(window).resize(function () { 379 sizeToParent("mainMap"); 380 draw(); 381 }); 382 383 }); 384 </script> 385 <div id="mainMap" style="height:100%;width:100%;"> 386 </div>