index.php 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. <!DOCTYPE html>
  2. <html style="height: 100%">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="default">
  9. <meta name="theme-color" content="#2196f3">
  10. <meta name="format-detection" content="telephone=no">
  11. <meta name="msapplication-tap-highlight" content="no">
  12. <title>动态权益图</title>
  13. </head>
  14. <body style="height: 100%; margin: 0">
  15. <?php
  16. $d=date("Ymd");
  17. if($_GET["date"]!="")
  18. $d=strtotime($_GET["date"]);
  19. $datatxt=file_get_contents("178118_$d.json");
  20. $data=json_decode($datatxt,true);
  21. ?>
  22. <div id="container" style="height: 100%"></div>
  23. <script type="text/javascript" src="//lib.baomitu.com/echarts/5.1.2/echarts.min.js"></script>
  24. <script type="text/javascript" src="//lib.baomitu.com/echarts/5.1.2/extension/dataTool.min.js"></script>
  25. <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  26. <script type="text/javascript">
  27. var dom = document.getElementById("container");
  28. var myChart = echarts.init(dom);
  29. var app = {};
  30. <?php
  31. $max=0;
  32. $min=999999999;
  33. for($i=0;$i<count($data);$i++){
  34. if($max<$data[$i]['balance']){
  35. $max=$data[$i]['balance'];
  36. }
  37. if($min>$data[$i]['balance']){
  38. $min=$data[$i]['balance'];
  39. }
  40. }
  41. if(count($data)>0){
  42. $low=round($min*(1-0.01)/10);
  43. $high=round($max*(1+0.01)/10);
  44. }else{
  45. $low=1000000;
  46. $high=3000000;
  47. }
  48. ?>
  49. option = null;
  50. option = {
  51. title: {
  52. text: '动态权益图',
  53. subtext: '账号:178118'
  54. },
  55. tooltip: {
  56. trigger: 'axis',
  57. axisPointer: {
  58. type: 'cross',
  59. label: {
  60. backgroundColor: '#283b56'
  61. }
  62. }
  63. },
  64. grid: {
  65. top: '16%', // 等价于 y: '16%'
  66. left: '3%',
  67. right: '8%',
  68. bottom: '3%',
  69. containLabel: true
  70. },
  71. legend: {
  72. data:['最新权益']
  73. },
  74. toolbox: {
  75. show: true,
  76. feature: {
  77. dataView: {readOnly: false},
  78. restore: {},
  79. saveAsImage: {}
  80. }
  81. },
  82. dataZoom: {
  83. show: true,
  84. start: 40,
  85. end: 100
  86. },
  87. xAxis: [
  88. {
  89. type: 'category',
  90. boundaryGap: true,
  91. data:[<?php foreach($data as $k=>$v){ echo "'".$data[$k]["datetime"]."',";} ?>],
  92. },
  93. ],
  94. yAxis:
  95. {
  96. type: 'value',
  97. name: '权益',
  98. max: <?php echo $high;?>,
  99. min: <?php echo $low;?>,
  100. axisLabel: {
  101. show: true,
  102. interval: 'auto',
  103. formatter: '{value}'
  104. },
  105. show: true
  106. },
  107. series: [
  108. {
  109. name:'权益',
  110. type:'line',
  111. data:[<?php foreach($data as $k=>$v) { echo round($data[$k]["balance"]/10).",";}?>]
  112. }
  113. ]
  114. };
  115. app.count = 11;
  116. lastid='<?php echo $data[count($data)-1]["datetime"];?>';
  117. setInterval(function (){
  118. htmlobj=$.ajax({url:"/tianqin/getdata.php?date=<?php echo $d;?>&lastid="+lastid,async:false});
  119. jsondata=htmlobj.responseText;
  120. if(jsondata!=""){
  121. newdata=jQuery.parseJSON(jsondata);
  122. console.log(newdata);
  123. if(newdata.length>0){
  124. lastid=newdata[newdata.length-1]["datetime"];
  125. }
  126. for(i=0;i<newdata.length;i++){
  127. var data0 = option.series[0].data;
  128. var data1 = option.series[1].data;
  129. data0.shift();
  130. data0.push(round(newdata[i]["balance"]/10));
  131. option.xAxis[0].data.shift();
  132. option.xAxis[0].data.push(newdata[i]["datetime"]);
  133. myChart.setOption(option)
  134. }
  135. }
  136. }, 2100);
  137. if (option && typeof option === "object") {
  138. myChart.setOption(option, true);
  139. }
  140. </script>
  141. </body>
  142. </html>