scatter-weibo.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1" />
  6. <script src="lib/esl.js"></script>
  7. <script src="lib/config.js"></script>
  8. <script src="lib/jquery.min.js"></script>
  9. <script src="lib/facePrint.js"></script>
  10. <script src="lib/testHelper.js"></script>
  11. <link rel="stylesheet" href="lib/reset.css">
  12. </head>
  13. <body>
  14. <style>
  15. .test-title {
  16. background: #146402;
  17. color: #fff;
  18. }
  19. </style>
  20. <div id="main0"></div>
  21. <script>
  22. require([
  23. 'echarts', 'map/js/china'
  24. ], function (echarts) {
  25. $.getJSON('./data/weibo.json', function (weiboData) {
  26. weiboData = weiboData.map(function (serieData, idx) {
  27. var px = serieData[0] / 1000;
  28. var py = serieData[1] / 1000;
  29. var res = [[px, py]];
  30. for (var i = 2; i < serieData.length; i += 2) {
  31. var dx = serieData[i] / 1000;
  32. var dy = serieData[i + 1] / 1000;
  33. var x = px + dx;
  34. var y = py + dy;
  35. res.push([x.toFixed(2), y.toFixed(2), 1]);
  36. px = x;
  37. py = y;
  38. }
  39. return res;
  40. });
  41. var option = {
  42. backgroundColor: '#404a59',
  43. title : {
  44. text: '微博签到数据点亮中国',
  45. subtext: 'From ThinkGIS',
  46. sublink: 'http://www.thinkgis.cn/public/sina',
  47. left: 'center',
  48. top: 'top',
  49. textStyle: {
  50. color: '#fff'
  51. }
  52. },
  53. tooltip: {},
  54. legend: {
  55. left: 'left',
  56. data: ['强', '中', '弱'],
  57. textStyle: {
  58. color: '#ccc'
  59. }
  60. },
  61. geo: {
  62. map: 'china',
  63. roam: true,
  64. label: {
  65. emphasis: {
  66. show: false
  67. }
  68. },
  69. itemStyle: {
  70. normal: {
  71. areaColor: '#323c48',
  72. borderColor: '#111'
  73. },
  74. emphasis: {
  75. areaColor: '#2a333d'
  76. }
  77. }
  78. },
  79. series: [{
  80. name: '弱',
  81. type: 'scatter',
  82. coordinateSystem: 'geo',
  83. symbolSize: 1,
  84. large: true,
  85. itemStyle: {
  86. normal: {
  87. shadowBlur: 2,
  88. shadowColor: 'rgba(37, 140, 249, 0.8)',
  89. color: 'rgba(37, 140, 249, 0.8)'
  90. }
  91. },
  92. data: weiboData[0]
  93. }, {
  94. name: '中',
  95. type: 'scatter',
  96. coordinateSystem: 'geo',
  97. symbolSize: 1,
  98. large: true,
  99. itemStyle: {
  100. normal: {
  101. shadowBlur: 2,
  102. shadowColor: 'rgba(14, 241, 242, 0.8)',
  103. color: 'rgba(14, 241, 242, 0.8)'
  104. }
  105. },
  106. data: weiboData[1]
  107. }, {
  108. name: '强',
  109. type: 'scatter',
  110. coordinateSystem: 'geo',
  111. symbolSize: 1,
  112. large: true,
  113. itemStyle: {
  114. normal: {
  115. shadowBlur: 2,
  116. shadowColor: 'rgba(255, 255, 255, 0.8)',
  117. color: 'rgba(255, 255, 255, 0.8)'
  118. }
  119. },
  120. data: weiboData[2]
  121. }]
  122. };
  123. testHelper.create(echarts, 'main0', {
  124. option: option,
  125. height: 500
  126. });
  127. });
  128. });
  129. </script>
  130. </body>
  131. </html>