area_echarts.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. function echarts_map() {
  2. var myChart = echarts.init(document.getElementById('map_1'));
  3. var guangdong = "js/44.json";
  4. $.get(guangdong, function(tjJson) {
  5. echarts.registerMap('guangdong', tjJson);
  6. myChart.setOption({
  7. series: [{
  8. type: 'map',
  9. map: 'guangdong'
  10. }]
  11. });
  12. var geoCoordMap = {
  13. '珠海市': [113.353986,21.924979]
  14. ,'广州市':[113.480637,23.125178]
  15. ,'湛江市':[110.264977,21.274898]
  16. ,'茂名市':[110.919229,21.659751]
  17. ,'阳江市':[111.825107,21.859222]
  18. ,'云浮市':[112.044439,22.629801]
  19. ,'肇庆市':[112.472529,23.051546]
  20. ,'江门市':[112.894942,22.090431]
  21. ,'中山市':[113.382391,22.321113]
  22. ,'佛山市':[113.022717,22.828762]
  23. ,'清远市':[113.051227,23.685022]
  24. ,'韶关市':[113.601224,24.820603]
  25. ,'河源市':[114.897802,23.746266]
  26. ,'梅州市':[116.117582,24.099112]
  27. ,'潮州市':[116.692301,23.661701]
  28. ,'揭阳市':[116.255733,23.143778]
  29. ,'汕头市':[116.708463,22.87102]
  30. ,'汕尾市':[115.364238,22.774485]
  31. ,'深圳市':[114.085947,22.347]
  32. ,'东莞市':[113.746262,22.746237]
  33. ,'惠州市':[114.412599,23.079404]
  34. };
  35. var goData = [{
  36. name: '河源市',
  37. value: 32
  38. },{
  39. name: '湛江市',
  40. value: 24
  41. },{
  42. name: '韶关市',
  43. value: 20
  44. },{
  45. name: '汕尾市',
  46. value: 18
  47. },{
  48. name: '揭阳市',
  49. value: 18
  50. }
  51. ];
  52. var goTotal=0;//计算总人数
  53. goData.forEach(function(item,i){
  54. goTotal+=item.value;
  55. })
  56. var planePath = 'arrow';
  57. var convertData = function(name, data) {
  58. var res = [];
  59. for (var i = 0; i < data.length; i++) {
  60. var fromCoord = geoCoordMap[name];
  61. var toCoord = geoCoordMap[data[i].name];
  62. if (fromCoord && toCoord) {
  63. res.push({
  64. //对换即可调整方向
  65. coords: [fromCoord, toCoord]
  66. });
  67. }
  68. }
  69. return res;
  70. };
  71. var series = [];
  72. [
  73. ['广州市', goData],
  74. // ['徐州', backData],
  75. ].forEach(function(item, i) {
  76. series.push({
  77. name: item[0],
  78. type: 'lines',
  79. zlevel: 2,
  80. //线特效配置
  81. effect: {
  82. show: true,
  83. period: 6,
  84. trailLength: 0.1,
  85. symbol: planePath, //标记类型
  86. symbolSize: 10
  87. },
  88. lineStyle: {
  89. normal: {
  90. width: 1,
  91. opacity: 0.4,
  92. curveness: 0.2, //弧线角度
  93. color: 'rgba(255,255,255,.1)'
  94. }
  95. },
  96. data: convertData(item[0], item[1])
  97. }, { //终点
  98. name: item[0],
  99. type: 'scatter',
  100. coordinateSystem: 'geo',
  101. zlevel: 2,
  102. label: {
  103. normal: {
  104. show: false,
  105. color: 'rgba(255,255,255,.5)',
  106. position: 'right',
  107. formatter: '{b}'
  108. }
  109. },
  110. symbol: 'circle',
  111. //圆点大小
  112. symbolSize: function(val) {
  113. return val[2]*50 / goTotal;
  114. },
  115. itemStyle: {
  116. normal: {
  117. show: true
  118. }
  119. },
  120. data: item[1].map(function(dataItem) {
  121. console.log(dataItem)
  122. return {
  123. name: dataItem.name,
  124. value: geoCoordMap[dataItem.name].concat([dataItem.value])
  125. };
  126. })
  127. }, {//起点
  128. name: 'item[0]',
  129. type: 'scatter',
  130. coordinateSystem: 'geo',
  131. zlevel: 2,
  132. label: {
  133. normal: {
  134. show: true,
  135. position: 'right',
  136. formatter: '{b}'
  137. }
  138. },
  139. symbolSize: function(val) {
  140. return 15;
  141. },
  142. symbol: 'circle',
  143. itemStyle: {
  144. normal: {
  145. show: true
  146. }
  147. },
  148. data: [{
  149. name: item[0],
  150. value: geoCoordMap[item[0]].concat([100])
  151. }]
  152. })
  153. });
  154. option = {
  155. // backgroundColor: '#FDF7F2',
  156. title: {
  157. text: '业务覆盖',
  158. subtext: '2016-2018年数据',
  159. left: 'center',
  160. bottom:'15%',
  161. textStyle: {
  162. color: '#fff'
  163. }
  164. },
  165. tooltip: {
  166. trigger: 'item',
  167. formatter: "{b}"
  168. },
  169. //线颜色及飞行轨道颜色
  170. visualMap: {
  171. show: false,
  172. min: 0,
  173. max: 100,
  174. color: ['#fff']
  175. },
  176. //地图相关设置
  177. geo: {
  178. map: 'guangdong',
  179. //视角缩放比例
  180. zoom: 1,
  181. //显示文本样式
  182. label: {
  183. normal: {
  184. show: true,
  185. textStyle: {
  186. color: 'rgba(255,255,255,.3)'
  187. }
  188. },
  189. emphasis: {
  190. textStyle: {
  191. color: '#fff'
  192. }
  193. }
  194. },
  195. //鼠标缩放和平移
  196. roam: false,
  197. itemStyle: {
  198. normal: {
  199. areaColor: '#4256ff',
  200. borderColor: '#404a59'
  201. },
  202. emphasis: {
  203. areaColor: '#2539f5'
  204. }
  205. }
  206. },
  207. series: series
  208. };
  209. myChart.setOption(option);
  210. window.addEventListener("resize",function(){
  211. myChart.resize();
  212. });
  213. })
  214. // 使用刚指定的配置项和数据显示图表。
  215. }
  216. $(window).load(function(){
  217. echarts_map()
  218. })
  219. // })