gjjk.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. var uploadedDataURL = "./js/gjjk.json";
  2. var retail = "./img/sy/06/xq.png";
  3. var travl = "./img/sy/06/dq.png";
  4. $.get(uploadedDataURL, function (geoJson) {
  5. var myChart = echarts.init(document.getElementById('gjjk_bak'));
  6. myChart.hideLoading();
  7. echarts.registerMap('wuhan', geoJson);
  8. var allData = {
  9. "citys":[
  10. {"name":"215\n电子围栏","value":[70,60],symbol: 'image://' + retail,"symbolSize":4,"itemStyle":{"normal":{"color":"#0090FD"}}},
  11. {"name":"2164\nWIFI探针","value":[70,150],symbol: 'image://' + retail,"symbolSize":4,"itemStyle":{"normal":{"color":"#0090FD"}}},
  12. {"name":"3982\n全省数据中心","value":[310,100],symbol: 'image://' + travl,"symbolSize":6,"itemStyle":{"normal":{"color":"#0090FD"}}},
  13. {"name":"745\n入省轨迹","value":[490,60],symbol: 'image://' + retail,"symbolSize":4,"itemStyle":{"normal":{"color":"#0090FD"}}},
  14. {"name":"745\n出省轨迹","value":[490,150],symbol: 'image://' + retail,"symbolSize":4,"itemStyle":{"normal":{"color":"#0090FD"}}},
  15. ],
  16. "moveLines":[
  17. {"fromName":"零售","toName":"MQ","coords":[[70,60],[310,100]]},
  18. {"fromName":"旅游","toName":"MQ","coords":[[70,150],[310,100]]},
  19. {"fromName":"MQ_LVYOU_JFDZ","toName":"MQ","coords":[[490,60],[310,100]]},
  20. {"fromName":"MQ_LVYOU_JFZJ","toName":"MQ","coords":[[490,150],[310,100]]},
  21. ]
  22. };
  23. option = {
  24. backgroundColor: '',
  25. title: {
  26. text: 'MQ数据传输图',
  27. left: 'center',
  28. textStyle: {
  29. color: '#fff'
  30. },
  31. show:false
  32. },
  33. legend: {
  34. show: false,
  35. orient: 'vertical',
  36. top: 'bottom',
  37. left: 'right',
  38. data: ['地点', '线路'],
  39. textStyle: {
  40. color: '#fff'
  41. }
  42. },
  43. tooltip:{
  44. formatter:'{b}'
  45. },
  46. geo: {
  47. map: '北京市',
  48. label: {
  49. emphasis: {
  50. show: false
  51. }
  52. },
  53. roam: true,
  54. itemStyle: {
  55. normal: {
  56. areaColor: '#323c48',
  57. borderColor: '#404a59'
  58. },
  59. emphasis: {
  60. areaColor: '#2a333d'
  61. }
  62. }
  63. },
  64. series: [{
  65. name: '地点',
  66. type: 'effectScatter',
  67. coordinateSystem: 'geo',
  68. zlevel: 2,
  69. rippleEffect: {
  70. brushType: 'stroke',
  71. period:7,
  72. scale:26
  73. },
  74. label: {
  75. normal:{
  76. show:true,
  77. position:'inside',
  78. formatter:'{b}',
  79. // color:'',
  80. textStyle: {
  81. // color: '#0090FD',
  82. fontSize: 14
  83. }
  84. },
  85. emphasis: {
  86. show: true,
  87. position: 'inside',
  88. formatter: '{b}'
  89. }
  90. },
  91. symbolSize: 2,
  92. showEffectOn: 'render',
  93. itemStyle: {
  94. normal: {
  95. color: '#46bee9'
  96. }
  97. },
  98. data: allData.citys
  99. }, {
  100. name: '线路',
  101. type: 'lines',
  102. coordinateSystem: 'geo',
  103. zlevel: 2,
  104. large: true,
  105. effect: {
  106. show: true,
  107. constantSpeed: 30,
  108. symbol: 'arrow',//ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  109. symbolSize: 10,
  110. trailLength: 0,
  111. },
  112. lineStyle: {
  113. normal: {
  114. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  115. offset: 0, color: '#58B3CC'
  116. }, {
  117. offset: 1, color: '#F58158'
  118. }], false),
  119. width: 4,
  120. opacity: 0.6,
  121. curveness: 0.2
  122. }
  123. },
  124. data: allData.moveLines
  125. }]
  126. };
  127. myChart.setOption(option);
  128. });