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 width: 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 width: 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 });
