首先看一下运行效果;

效果图如下:

仅展示中国地图_图例


 具体实现如下:

引用js文件:jq、echarts.js;

仅展示中国地图_2d_02仅展示中国地图_d3_03


  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