最近构建大数据平台时,需要显示一个市的地图,改完后显示效果
地图json数据
首先你是要显示一个区域的地图,那么就需要获取到这个区域的周维经纬度数据,将其连起来就是一个闭合的区域,也就是你需要显示的地图,可以从阿里Datav地图选择器下载
选择对应的省市区,然后点击右下角的下载:
下载json数据后,代码如下:
01 | <!DOCTYPE html> |
02 | <html> |
03 | <head> |
04 | <meta charset= "UTF-8" > |
05 | <meta http-equiv= "X-UA-Compatible" content= "IE=edge" > |
06 | <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > |
07 | <title>Document</title> |
08 | </head> |
09 | <body> |
10 | <script type= "text/javascript" src= "js/jquery.min.js" ></script> |
11 | <script type= "text/javascript" src= "js/echarts.min.js" ></script> |
12 | |
13 | <div id= "chart" style= "width: 100%;height:500px;" ></div> |
14 | |
15 | <script type= "text/javascript" > |
16 | |
17 | //获取下载的地区json文件,将代码里的“zhenngzhou”统统替换成你的文件名,建议用英文。 |
18 | $.get( 'zhengzhou.json' , function (rs){ |
19 | echarts.registerMap( 'zhengzhou' ,rs); |
20 | showMap(); |
21 | }) |
22 | |
23 | function showMap(){ |
24 | var myChart = echarts.init(document.getElementById( 'chart' )); |
25 | var option = { |
26 | tooltip: { |
27 | // show: false //不显示提示标签 |
28 | formatter: '{b}' , //提示标签格式 |
29 | backgroundColor: "#999999" , //提示标签背景颜色 |
30 | textStyle:{color: "#fff" } //提示标签字体颜色 |
31 | }, |
32 | series: [{ |
33 | type: 'map' , |
34 | mapType: 'zhengzhou' , |
35 | label: { |
36 | normal: { |
37 | show: true , //显示省份标签 |
38 | textStyle:{color: "#c71585" } //省份标签字体颜色 |
39 | }, |
40 | emphasis: { //对应的鼠标悬浮效果 |
41 | show: true , |
42 | textStyle:{color: "#800080" } |
43 | } |
44 | }, |
45 | itemStyle: { |
46 | normal: { |
47 | borderWidth: .5, //区域边框宽度 |
48 | borderColor: '#009fe8' , //区域边框颜色 |
49 | areaColor: "#ffefd5" , //区域颜色 |
50 | }, |
51 | emphasis: { |
52 | borderWidth: .5, |
53 | borderColor: '#4b0082' , |
54 | areaColor: "#f47920" , |
55 | } |
56 | }, |
57 | data:[ |
58 | {name: '金水区' , selected: true } |
59 | ] |
60 | }], |
61 | }; |
62 | |
63 | myChart.setOption(option); |
64 | myChart.on( 'mouseover' , function (params) { |
65 | var dataIndex = params.dataIndex; |
66 | console.log(params); |
67 | }); |
68 | } |
69 | |
70 | </script> |
71 | </body> |
72 | </html> |
显示效果:
可以加入geo定位,显示一些更有用的东西,代码如下:
01 | <!DOCTYPE html> |
02 | <html> |
03 | <head> |
04 | <meta charset= "UTF-8" > |
05 | <meta http-equiv= "X-UA-Compatible" content= "IE=edge" > |
06 | <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > |
07 | <title>Document</title> |
08 | </head> |
09 | <body> |
10 | <script type= "text/javascript" src= "js/jquery.min.js" ></script> |
11 | <script type= "text/javascript" src= "js/echarts.min.js" ></script> |
12 | |
13 | <div id= "chart" style= "width: 100%;height:500px;" ></div> |
14 | |
15 | <script type= "text/javascript" > |
16 | |
17 | //获取地区json文件 |
18 | $.get( 'zhengzhou.json' , function (rs){ |
19 | echarts.registerMap( 'zhengzhou' ,rs); |
20 | showMap(); |
21 | }) |
22 | |
23 | function showMap(){ |
24 | var myChart = echarts.init(document.getElementById( 'chart' )); |
25 | var option = { |
26 | tooltip: { |
27 | }, |
28 | geo: { |
29 | tooltip: { |
30 | show: true |
31 | }, |
32 | map: 'zhengzhou' , |
33 | roam: true |
34 | }, |
35 | |
36 | series: [ |
37 | { // 定位点 |
38 | type: 'effectScatter' , |
39 | coordinateSystem: 'geo' , |
40 | geoIndex: 0, |
41 | symbolSize: function (params) { |
42 | return (params[2] / 100) * 15; |
43 | }, |
44 | symbol: 'circle' , |
45 | itemStyle: { |
46 | color: '#0E436D' |
47 | }, |
48 | encode: { |
49 | tooltip: 2 |
50 | }, |
51 | data:[ |
52 | [113.572182,34.80333, 100], |
53 | [113.404019,34.793607, 120] |
54 | ] |
55 | }, |
56 | { // 对应的名称 |
57 | type: 'map' , |
58 | mapType: 'zhengzhou' , |
59 | label: { |
60 | normal: { |
61 | show: true , //显示省份标签 |
62 | textStyle:{color: "#FFFFFF" } //省份标签字体颜色 |
63 | }, |
64 | emphasis: { //对应的鼠标悬浮效果 |
65 | show: true , |
66 | textStyle:{color: "#FFFFFF" } |
67 | } |
68 | }, |
69 | itemStyle: { |
70 | normal: { |
71 | borderWidth: .5, //区域边框宽度 |
72 | borderColor: '#197BC6' , //区域边框颜色 |
73 | areaColor: "#209CFC" , //区域颜色 |
74 | }, |
75 | emphasis: { |
76 | borderWidth: .5, |
77 | borderColor: '#1463A0' , |
78 | areaColor: "#197BC6" , |
79 | } |
80 | }, |
81 | data:[ |
82 | |
83 | ] |
84 | } |
85 | ], |
86 | }; |
87 | |
88 | myChart.setOption(option); |
89 | myChart.getZr().on( 'click' , function (params) { |
90 | var pixelPoint = [params.offsetX, params.offsetY]; |
91 | var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint); |
92 | console.log(dataPoint); |
93 | }); |
94 | } |
95 | |
96 | </script> |
97 | </body> |
98 | </html> |
运行效果: