1 function cityMap(city_data) {
2
3 var myChart = Echarts.init(document.getElementById('echart_right'));
4 var data = []
5 for (var i in city_data) {
6 data.push(city_data[i]);
7 }
8 myChart.showLoading();
9 var geoCoordMap = {
10 "北京":[116.46,39.92],
11 "上海":[121.48,31.22],
12 "杭州":[120.19,30.26],
13 "广州":[113.23,23.16],
14 "深圳":[114.07,22.62],
15 "成都":[104.06,30.67]
16 };
17
18 var BJData = data;
19
20 var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
21
22 var convertData = function (data) {
23 var res = [];
24 for (var i = 0; i < data.length; i++) {
25 var dataItem = data[i];
26 var fromCoord = geoCoordMap[dataItem[0].name];
27 var toCoord = geoCoordMap[dataItem[1].name];
28 if (fromCoord && toCoord) {
29 res.push({
30 fromName: dataItem[0].name,
31 toName: dataItem[1].name,
32 numValue : dataItem[1].value,
33 coords: [fromCoord, toCoord]
34 });
35 }
36 }
37 return res;
38 };
39 $.get('/admin/dashboard/china', function (geoJson) {
40 myChart.hideLoading();
41
42 Echarts.registerMap('china',geoJson);
43
44 //设置Line和Point的颜色
45 var LineColor = ['#ff6727','#f4ff0a','#91ff0a','#0affa8'];
46 var series = [];
47 [['上海', BJData]].forEach(function (item, i) {
48 series.push({
49 // 设置飞行线
50 name: item[1],
51 type: 'lines',
52 zlevel: 1,
53 coordinateSystem: 'geo',
54 effect: {
55 show: true,
56 period: 6,
57 trailLength: 1.7,
58 color: '#73d9d0',
59 shadowBlur: 0,
60 symbolSize: 0
61 },
62 lineStyle: {
63 normal: {
64 color: function(params){
65 var num = params.data.numValue;
66 if(num > 1000000){
67 return LineColor[0];
68 }else if(num > 800000){
69 return LineColor[1];
70 }else if(num > 500000){
71 return LineColor[2];
72 }else{
73 return LineColor[3];
74 }
75 },
76 1,
77 curveness: 0.2
78 }
79 },
80 data: convertData(item[1])
81 },
82 // 设置轨迹线
83 {
84 name: item[0].name,
85 type: 'lines',
86 zlevel: 2,
87 coordinateSystem: 'geo',
88 effect: {
89 show: true,
90 period: 6,
91 trailLength: 0.7,
92 symbol:planePath,
93 symbolSize: 12
94 },
95 lineStyle: {
96 normal: {
97 color: function(params){
98 var num = params.data.numValue;
99 if(num > 1000000){
100 return LineColor[0];
101 }else if(num > 800000){
102 return LineColor[1];
103 }else if(num > 500000){
104 return LineColor[2];
105 }else{
106 return LineColor[3];
107 }
108 },
109 0.2,
110 opacity: 0.4,
111 curveness: 0.2,
112 }
113 },
114 data: convertData(item[1])
115 },
116 {
117 // 设置点
118 name: item[0],
119 type: 'effectScatter',
120 coordinateSystem: 'geo',
121 zlevel: 2,
122 rippleEffect: {
123 brushType: 'stroke'
124 },
125 label: {
126 normal: {
127 show: true,
128 position: 'right',
129 formatter: function(params){
130 var res = params.value[2];
131 return res;
132 }
133 }
134 },
135 /* symbolSize: function (val) {
136 return val[2] / 1000;
137 },*/
138 itemStyle: {
139 normal: {
140 color: function(params){
141 var num = params.value[2];
142 if(num > 1000000){
143 return LineColor[0];
144 }else if(num > 800000){
145 return LineColor[1];
146 }else if(num > 500000){
147 return LineColor[2];
148 }else{
149 return LineColor[3];
150 }
151 }
152 }
153 },
154 data: item[1].map(function (dataItem) {
155 return {
156 name: dataItem[1].name,
157 value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
158 };
159 })
160 });
161 });
162 var options = {
163 title : {
164 text: '',
165 subtext: '',
166 left: 'center',
167 textStyle : {
168 color: '#fff'
169 }
170 },
171 tooltip : {
172 trigger: 'item',
173 show: true,
174 textStyle : {
175 color: '#333' //提示标签字体颜色
176 },
177 backgroundColor:"#fff",//提示标签背景颜色
178 formatter:function(params){
179
180 if(params.value){
181
182 var res = params.name + '<br/>' + params.value[2];
183 }else {
184 var res = res;
185 }
186 return res;
187 }
188 },
189 legend: {
190 orient: 'vertical',
191 top: 'bottom',
192 left: 'center',
193 data:['上海 Top10'],
194 textStyle: {
195 color: '#fff'
196 },
197 selectedMode: 'single'
198 },
199 /*dataRange: {
200 min : 0,
201 max : 100,
202 calculable : true,
203 color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
204 textStyle:{
205 color:'#fff'
206 }
207 },*/
208 geo: {
209 map: 'china',
210 center: [113.65,34.76],
211 zoom: 1.65,
212 roam: false,
213 label: {
214 normal: {
215 show: true,
216 textStyle: {
217 color: '#b5b5b5' //字体颜色
218 }
219 },
220 emphasis: { // 对应的鼠标悬浮效果
221 show: true,
222 textStyle: {
223 color: "#fff"
224 }
225 }
226 },
227 itemStyle: {
228 normal: {
229 areaColor: '#1b1b1b',
230 borderColor: '#577ec6', //地图描边
231 borderWidth:1
232 },
233 emphasis: {
234 borderWidth: 0,
235 borderColor: 'yellow',
236 areaColor: "#577ec6",
237 shadowColor: 'rgba(0, 0, 0, 0.5)'
238 }
239 }
240 },
241 series: series
242 };
243 myChart.setOption(options);
244
245 });
