98fc25b6bb1ca244f7b075edc9ef926e.php 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <?php if (!defined('THINK_PATH')) exit();?>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>kline-demo</title>
  8. <link rel="stylesheet" href="/Public/Static/css/kline.css">
  9. <style>
  10. #chart_container {
  11. margin: 0 auto;
  12. width: 100%;
  13. height: 544px;
  14. position: relative;
  15. }
  16. #interval_tool_bar.dark .interval-item{
  17. background-color: #E4E4E4 ;
  18. color:black;
  19. border: none;
  20. }
  21. #interval_tool_bar.dark .interval-item.active, #interval_tool_bar.dark .interval-item:hover{
  22. background: #FADB84 ;
  23. }
  24. .changInterval {
  25. margin-bottom: 10px;
  26. }
  27. .interval-item{
  28. margin-right: 10px;
  29. padding: 4px 10px;
  30. outline: none;
  31. transition: all .25s;
  32. border: 1px solid #f5f5f5;
  33. cursor: pointer;
  34. vertical-align: top;
  35. background-color: #fff;
  36. border-radius: 5px;
  37. }
  38. .active{
  39. background-color: #f5f5f5;
  40. border:1px solid #FCD535;
  41. border-radius: 5px;
  42. }
  43. .loding{
  44. position: absolute;
  45. width: 100%;
  46. height: 100%;
  47. z-index: 999;
  48. /*display: flex;*/
  49. align-items: center;
  50. justify-content: center;
  51. display: none;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <div class="changInterval">
  57. <span class="interval-item" style="border:none:font-size:14px;"><?php echo L("时间");?></span>
  58. <button type="button" class="interval-item active" onclick="changInterval('m1',this)">1 M</button>
  59. <button type="button" class="interval-item" onclick="changInterval('m5',this)">5 M</button>
  60. <button type="button" class="interval-item" onclick="changInterval('m15',this)">15 M</button>
  61. <button type="button" class="interval-item" onclick="changInterval('m30',this)">30 M</button>
  62. <button type="button" class="interval-item" onclick="changInterval('m60',this)">60 M</button>
  63. <button type="button" class="interval-item" onclick="changInterval('h4',this)">4 H</button>
  64. <button type="button" class="interval-item" onclick="changInterval('d1',this)">1 Day</button>
  65. <!-- <button type="button" class="interval-item" onclick="changInterval('w1',this)">1 Week</button>-->
  66. </div>
  67. <div id="chart_container">
  68. <div class="loding" data-type="0">
  69. <img src="/Public/Static/img/loading.gif" alt="" />
  70. </div>
  71. </div>
  72. <div id="chart_container1" style="display:none"></div>
  73. </body>
  74. <script>
  75. window.SYMBOL = "<?php echo ($market); ?>"
  76. window.fenshi = "Time sharing"
  77. window.fen = "M"
  78. window.xiaoshi = "H"
  79. window.tian = "Day"
  80. window.zhou = "Week"
  81. window.kai = " S"
  82. window.gao = " High"
  83. window.di = " Low"
  84. window.shou = " Collect"
  85. window.labels=["Time:"," S:"," Collect:"," High:"," Low:","Finished:"]
  86. window.plots=[{
  87. key: "ma5",
  88. title: "MA5: ",
  89. type: "line"
  90. }, {
  91. key: "ma10",
  92. title: "MA10: ",
  93. type: "line"
  94. }, {
  95. key: "ma30",
  96. title: "MA30: ",
  97. type: "line"
  98. }, {
  99. key: "ma60",
  100. title: "MA60: ",
  101. type: "line"
  102. }]
  103. window.title="MA20: "
  104. window.title1="VOLUME: "
  105. // console.log("btcusdt")
  106. </script>
  107. <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  108. <script type="text/javascript" src="/Public/Static/js/kline.min.js"></script>
  109. <script type="text/javascript" src="/Public/Static/js/pako.min.js"></script>
  110. <script type="text/javascript" src="/Public/Static/js/klinecharts.min.js"></script>
  111. <script type="text/javascript" src="/Public/Static/js/ws-deedfeeds.js"></script>
  112. <script>
  113. function initOnReady() {
  114. loading()
  115. window.init_offset = 10
  116. VyKline.bootstrap({
  117. container: document.getElementById('chart_container1'), // 容器
  118. deedfeeds: window.deedfeeds, // 数据反馈对象
  119. showIntervalToolbar: true,
  120. defaultInterval: 'm1',
  121. interval: [ 'm1','m5','m15','m30','m60','h4','d1', 'w1'],
  122. theme: 'light',
  123. customChart: {
  124. init_offset_x: window.init_offset,
  125. default_rise_color: '#49C043',
  126. default_fall_color: '#CC1414',
  127. },
  128. // customLoadingEl: customLoading,
  129. onTimeIntervalChanged: interval => {
  130. console.log("window.deedfeeds", interval);
  131. }
  132. })
  133. // window.deedfeeds.intervalChanged('m5')
  134. vyChart.switchChartType('KLINE')
  135. console.info(window.deedfeeds)
  136. }
  137. window.addEventListener('DOMContentLoaded', initOnReady, false);
  138. </script>
  139. </html>