仅展示中国地图

首先看一下运行效果；

效果图如下：

 

 具体实现如下：

引用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>
View Code

 

posted @ 2020-04-02 14:50  你小子嚣张呀  阅读(1446)  评论(2)  编辑  收藏  举报