study.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. <!DOCTYPE html>
  2. <meta charset="UTF-8">
  3. <head>
  4. <title>可视化动态数据</title>
  5. <link rel="stylesheet" href="css/common.css" />
  6. <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
  7. <style>
  8. .l{
  9. flex: 1;
  10. display: flex;
  11. padding-top: 2rem;
  12. flex-direction: column;
  13. }
  14. .chart-wrap{
  15. flex: 1;
  16. display: flex;
  17. flex-direction: column;
  18. }
  19. .chart{
  20. flex: 1;
  21. }
  22. </style>
  23. </head>
  24. <body id="pb_studyPlan">
  25. <div id="container">
  26. <script type="text/javascript" src="js/common.js" ></script>
  27. <header></header>
  28. <nav>
  29. <a href="index.html">回首页</a>
  30. <a href="map2d.html">进入地图</a>
  31. </nav>
  32. <main>
  33. <div class="l">
  34. <div class="chart-wrap">
  35. <h3>可视化动态数据页面展示</h3>
  36. <div class="chart" id="ec01_line_studyPlan">
  37. <div id="con" style="width:1300px;height:500px"></div>
  38. <script type="text/javascript" src="js/echarts-4.2.0.min.js" ></script>
  39. <script type="text/javascript">
  40. var dom = document.getElementById("con");
  41. var myChart = echarts.init(dom);
  42. var app = {};
  43. option = null;
  44. option = {
  45. title: {
  46. text: '动态数据',
  47. },
  48. tooltip: {
  49. trigger: 'axis',
  50. axisPointer: {
  51. type: 'cross',
  52. label: {
  53. backgroundColor: 'green'
  54. }
  55. }
  56. },
  57. legend: {
  58. data:['最新成交价', '预购队列']
  59. },
  60. toolbox: {
  61. show: true,
  62. feature: {
  63. dataView: {readOnly: false},
  64. restore: {},
  65. saveAsImage: {}
  66. }
  67. },
  68. dataZoom: {
  69. show: false,
  70. start: 0,
  71. end: 100
  72. },
  73. xAxis: [
  74. {
  75. type: 'category',
  76. boundaryGap: true,
  77. data: (function (){
  78. var now = new Date();
  79. var res = [];
  80. var len = 10;
  81. while (len--) {
  82. res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
  83. now = new Date(now - 2000);
  84. }
  85. return res;
  86. })()
  87. },
  88. {
  89. type: 'category',
  90. boundaryGap: true,
  91. data: (function (){
  92. var res = [];
  93. var len = 10;
  94. while (len--) {
  95. res.push(10 - len - 1);
  96. }
  97. return res;
  98. })()
  99. }
  100. ],
  101. yAxis: [
  102. {
  103. type: 'value',
  104. scale: true,
  105. name: '价格',
  106. max: 30,
  107. min: 0,
  108. boundaryGap: [0.2, 0.2]
  109. },
  110. {
  111. type: 'value',
  112. scale: true,
  113. name: '预购量',
  114. max: 1200,
  115. min: 0,
  116. boundaryGap: [0.2, 0.2]
  117. }
  118. ],
  119. series: [
  120. {
  121. name:'预购队列',
  122. type:'bar',
  123. xAxisIndex: 1,
  124. yAxisIndex: 1,
  125. data:(function (){
  126. var res = [];
  127. var len = 10;
  128. while (len--) {
  129. res.push(Math.round(Math.random() * 1000));
  130. }
  131. return res;
  132. })()
  133. },
  134. {
  135. name:'最新成交价',
  136. type:'line',
  137. data:(function (){
  138. var res = [];
  139. var len = 0;
  140. while (len < 10) {
  141. res.push((Math.random()*10 + 5).toFixed(1) - 0);
  142. len++;
  143. }
  144. return res;
  145. })()
  146. }
  147. ]
  148. };
  149. app.count = 11;
  150. setInterval(function (){
  151. axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
  152. var data0 = option.series[0].data;
  153. var data1 = option.series[1].data;
  154. data0.shift();
  155. data0.push(Math.round(Math.random() * 1000));
  156. data1.shift();
  157. data1.push((Math.random() * 10 + 5).toFixed(1) - 0);
  158. option.xAxis[0].data.shift();
  159. option.xAxis[0].data.push(axisData);
  160. option.xAxis[1].data.shift();
  161. option.xAxis[1].data.push(app.count++);
  162. myChart.setOption(option);
  163. }, 2100);
  164. ;
  165. if (option && typeof option === "object") {
  166. myChart.setOption(option, true);
  167. }
  168. </script>
  169. </div>
  170. </div>
  171. </div>
  172. </main>
  173. </div>
  174. </body>
  175. </html>