Commit a81d475d5468e4357c0082e94a62a6a9e89fa7ac
1 parent
7a03bb0c
关于我们 地图自适应
Showing
1 changed file
with
270 additions
and
0 deletions
js/contact.js
0 → 100644
1 | + | ||
2 | +var myChart = echarts.init(document.getElementById('main')); | ||
3 | + | ||
4 | +var geoCoordMap = { | ||
5 | + '上海': [121.4648,31.2891], | ||
6 | + '东莞': [113.8953,22.901], | ||
7 | + '东营': [118.7073,37.5513], | ||
8 | + '中山': [113.4229,22.478], | ||
9 | + '临汾': [111.4783,36.1615], | ||
10 | + '临沂': [118.3118,35.2936], | ||
11 | + '丹东': [124.541,40.4242], | ||
12 | + '丽水': [119.5642,28.1854], | ||
13 | + '乌鲁木齐': [87.9236,43.5883], | ||
14 | + '佛山': [112.8955,23.1097], | ||
15 | + '保定': [115.0488,39.0948], | ||
16 | + '兰州': [103.5901,36.3043], | ||
17 | + '包头': [110.3467,41.4899], | ||
18 | + '北京': [116.4551,40.2539], | ||
19 | + '北海': [109.314,21.6211], | ||
20 | + '南京': [118.8062,31.9208], | ||
21 | + '南宁': [108.479,23.1152], | ||
22 | + '南昌': [116.0046,28.6633], | ||
23 | + '南通': [121.1023,32.1625], | ||
24 | + '厦门': [118.1689,24.6478], | ||
25 | + '台州': [121.1353,28.6688], | ||
26 | + '合肥': [117.29,32.0581], | ||
27 | + '呼和浩特': [111.4124,40.4901], | ||
28 | + '咸阳': [108.4131,34.8706], | ||
29 | + '哈尔滨': [127.9688,45.368], | ||
30 | + '唐山': [118.4766,39.6826], | ||
31 | + '嘉兴': [120.9155,30.6354], | ||
32 | + '大同': [113.7854,39.8035], | ||
33 | + '大连': [122.2229,39.4409], | ||
34 | + '天津': [117.4219,39.4189], | ||
35 | + '太原': [112.3352,37.9413], | ||
36 | + '威海': [121.9482,37.1393], | ||
37 | + '宁波': [121.5967,29.6466], | ||
38 | + '宝鸡': [107.1826,34.3433], | ||
39 | + '宿迁': [118.5535,33.7775], | ||
40 | + '常州': [119.4543,31.5582], | ||
41 | + '广州': [113.5107,23.2196], | ||
42 | + '廊坊': [116.521,39.0509], | ||
43 | + '延安': [109.1052,36.4252], | ||
44 | + '张家口': [115.1477,40.8527], | ||
45 | + '徐州': [117.5208,34.3268], | ||
46 | + '德州': [116.6858,37.2107], | ||
47 | + '惠州': [114.6204,23.1647], | ||
48 | + '成都': [103.9526,30.7617], | ||
49 | + '扬州': [119.4653,32.8162], | ||
50 | + '承德': [117.5757,41.4075], | ||
51 | + '拉萨': [91.1865,30.1465], | ||
52 | + '无锡': [120.3442,31.5527], | ||
53 | + '日照': [119.2786,35.5023], | ||
54 | + '昆明': [102.9199,25.4663], | ||
55 | + '杭州': [119.5313,29.8773], | ||
56 | + '枣庄': [117.323,34.8926], | ||
57 | + '柳州': [109.3799,24.9774], | ||
58 | + '株洲': [113.5327,27.0319], | ||
59 | + '武汉': [114.3896,30.6628], | ||
60 | + '汕头': [117.1692,23.3405], | ||
61 | + '江门': [112.6318,22.1484], | ||
62 | + '沈阳': [123.1238,42.1216], | ||
63 | + '沧州': [116.8286,38.2104], | ||
64 | + '河源': [114.917,23.9722], | ||
65 | + '泉州': [118.3228,25.1147], | ||
66 | + '泰安': [117.0264,36.0516], | ||
67 | + '泰州': [120.0586,32.5525], | ||
68 | + '济南': [117.1582,36.8701], | ||
69 | + '济宁': [116.8286,35.3375], | ||
70 | + '海口': [110.3893,19.8516], | ||
71 | + '淄博': [118.0371,36.6064], | ||
72 | + '淮安': [118.927,33.4039], | ||
73 | + '深圳': [114.5435,22.5439], | ||
74 | + '清远': [112.9175,24.3292], | ||
75 | + '温州': [120.498,27.8119], | ||
76 | + '渭南': [109.7864,35.0299], | ||
77 | + '湖州': [119.8608,30.7782], | ||
78 | + '湘潭': [112.5439,27.7075], | ||
79 | + '滨州': [117.8174,37.4963], | ||
80 | + '潍坊': [119.0918,36.524], | ||
81 | + '烟台': [120.7397,37.5128], | ||
82 | + '玉溪': [101.9312,23.8898], | ||
83 | + '珠海': [113.7305,22.1155], | ||
84 | + '盐城': [120.2234,33.5577], | ||
85 | + '盘锦': [121.9482,41.0449], | ||
86 | + '石家庄': [114.4995,38.1006], | ||
87 | + '福州': [119.4543,25.9222], | ||
88 | + '秦皇岛': [119.2126,40.0232], | ||
89 | + '绍兴': [120.564,29.7565], | ||
90 | + '聊城': [115.9167,36.4032], | ||
91 | + '肇庆': [112.1265,23.5822], | ||
92 | + '舟山': [122.2559,30.2234], | ||
93 | + '苏州': [120.6519,31.3989], | ||
94 | + '莱芜': [117.6526,36.2714], | ||
95 | + '菏泽': [115.6201,35.2057], | ||
96 | + '营口': [122.4316,40.4297], | ||
97 | + '葫芦岛': [120.1575,40.578], | ||
98 | + '衡水': [115.8838,37.7161], | ||
99 | + '衢州': [118.6853,28.8666], | ||
100 | + '西宁': [101.4038,36.8207], | ||
101 | + '西安': [109.1162,34.2004], | ||
102 | + '贵阳': [106.6992,26.7682], | ||
103 | + '连云港': [119.1248,34.552], | ||
104 | + '邢台': [114.8071,37.2821], | ||
105 | + '邯郸': [114.4775,36.535], | ||
106 | + '郑州': [113.4668,34.6234], | ||
107 | + '鄂尔多斯': [108.9734,39.2487], | ||
108 | + '重庆': [107.7539,30.1904], | ||
109 | + '金华': [120.0037,29.1028], | ||
110 | + '铜川': [109.0393,35.1947], | ||
111 | + '银川': [106.3586,38.1775], | ||
112 | + '镇江': [119.4763,31.9702], | ||
113 | + '长春': [125.8154,44.2584], | ||
114 | + '长沙': [113.0823,28.2568], | ||
115 | + '长治': [112.8625,36.4746], | ||
116 | + '阳泉': [113.4778,38.0951], | ||
117 | + '青岛': [120.4651,36.3373], | ||
118 | + '韶关': [113.7964,24.7028], | ||
119 | + '赤峰': [119.175506,42.717622], | ||
120 | + '丹阳': [119.601582,32.018124], | ||
121 | + '双流': [103.930965,30.579155], | ||
122 | + | ||
123 | +}; | ||
124 | + | ||
125 | +var BJData = [ | ||
126 | +]; | ||
127 | + | ||
128 | +var SHData = [ | ||
129 | +]; | ||
130 | + | ||
131 | +var GZData = [ | ||
132 | + [{name:'广州'},{name:'北京',value:30}], | ||
133 | + [{name:'北京'}, {name:'无锡',value:90}], | ||
134 | + [{name:'北京'}, {name:'赤峰',value:90}], | ||
135 | + [{name:'北京'}, {name:'青岛',value:90}], | ||
136 | + [{name:'北京'}, {name:'邯郸',value:90}], | ||
137 | + [{name:'北京'}, {name:'丹阳',value:90}], | ||
138 | + [{name:'北京'}, {name:'双流',value:90}], | ||
139 | +]; | ||
140 | + | ||
141 | +var convertData = function (data) { | ||
142 | + | ||
143 | +}; | ||
144 | + | ||
145 | +var color = ['#49A4FE', '#49A4FE', '#49A4FE']; | ||
146 | +var series = []; | ||
147 | +[['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) { | ||
148 | + //console.log(item,i); | ||
149 | + series.push( | ||
150 | + { | ||
151 | + name: item[0] + ' Top10', | ||
152 | + type: 'effectScatter', | ||
153 | + coordinateSystem: 'geo', | ||
154 | + zlevel: 2, | ||
155 | + rippleEffect: { | ||
156 | + brushType: 'stroke' | ||
157 | + }, | ||
158 | + label: { | ||
159 | + normal: { | ||
160 | + show: true, | ||
161 | + position: 'right', | ||
162 | + formatter: '{b}' | ||
163 | + } | ||
164 | + }, | ||
165 | + symbolSize: function (val) { | ||
166 | + return 100 / 8; | ||
167 | + }, | ||
168 | + itemStyle: { | ||
169 | + normal: { | ||
170 | + color: color[i] | ||
171 | + } | ||
172 | + }, | ||
173 | + data: item[1].map(function (dataItem) { | ||
174 | + return { | ||
175 | + name: dataItem[1].name, | ||
176 | + value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]) | ||
177 | + }; | ||
178 | + }) | ||
179 | + }); | ||
180 | +}); | ||
181 | +console.log(series) | ||
182 | + | ||
183 | +option = { | ||
184 | + backgroundColor: '#fff', | ||
185 | + | ||
186 | + tooltip : { | ||
187 | + show:false, | ||
188 | + // trigger: 'item', | ||
189 | + // formatter:function(params, ticket, callback){ | ||
190 | + // console.log(params); | ||
191 | + // if(params.seriesType=="effectScatter") { | ||
192 | + // return "线路:"+params.data.name+""+params.data.value[2]; | ||
193 | + // }else if(params.seriesType=="lines"){ | ||
194 | + // return params.data.fromName+">"+params.data.toName+"<br />"+params.data.value; | ||
195 | + // }else{ | ||
196 | + // return params.name; | ||
197 | + // } | ||
198 | + // } | ||
199 | + }, | ||
200 | + | ||
201 | + geo: { | ||
202 | + map: 'china', | ||
203 | + label: { | ||
204 | + emphasis: { | ||
205 | + show: true, | ||
206 | + color:'#fff' | ||
207 | + } | ||
208 | + }, | ||
209 | + roam: false, | ||
210 | + itemStyle: { | ||
211 | + normal: { | ||
212 | + areaColor: '#ccc', | ||
213 | + borderColor: '#fff' | ||
214 | + }, | ||
215 | + emphasis: { | ||
216 | + areaColor: '#ccc' | ||
217 | + } | ||
218 | + } | ||
219 | + }, | ||
220 | + // graphic: [ | ||
221 | + // | ||
222 | + // { | ||
223 | + // type: 'group', | ||
224 | + // right: 'right', | ||
225 | + // top: 'center', | ||
226 | + // children: [ | ||
227 | + // { | ||
228 | + // type: 'rect', | ||
229 | + // z: 100, | ||
230 | + // left: 'center', | ||
231 | + // top: 'middle', | ||
232 | + // shape: { | ||
233 | + // width: 190, | ||
234 | + // height: 90 | ||
235 | + // }, | ||
236 | + // style: { | ||
237 | + // fill: '#fff', | ||
238 | + // stroke: '#555', | ||
239 | + // lineWidth: 2, | ||
240 | + // shadowBlur: 8, | ||
241 | + // shadowOffsetX: 3, | ||
242 | + // shadowOffsetY: 3, | ||
243 | + // shadowColor: 'rgba(0,0,0,0.3)' | ||
244 | + // } | ||
245 | + // }, | ||
246 | + // { | ||
247 | + // type: 'text', | ||
248 | + // z: 100, | ||
249 | + // left: 'center', | ||
250 | + // top: 'middle', | ||
251 | + // style: { | ||
252 | + // fill: '#333', | ||
253 | + // text: [ | ||
254 | + // '无锡大三大四大所多', | ||
255 | + // '无锡大三大四大所多,单位是km', | ||
256 | + // '无锡大三大四大所多', | ||
257 | + // '无锡大三大四大所多', | ||
258 | + // '无锡大三大四大所多' | ||
259 | + // ].join('\n'), | ||
260 | + // font: '14px Microsoft YaHei' | ||
261 | + // } | ||
262 | + // } | ||
263 | + // ] | ||
264 | + // } | ||
265 | + // ], | ||
266 | + series: series | ||
267 | +}; | ||
268 | + | ||
269 | +// 使用刚指定的配置项和数据显示图表。 | ||
270 | +myChart.setOption(option); |