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); | ... | ... |