dataItem-wv.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <div id="main" style="width:100%;height:400px;margin:auto"></div>
  10. <script src="./echarts.min.js"></script>
  11. <script type="text/javascript" src="../luckysheet/dist/plugins/js/uni-webview-js0.0.3_index.js"></script>
  12. <script src="../jquery.min.js"></script>
  13. <script>
  14. function GetQueryString(name) {
  15. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  16. var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
  17. var context = "";
  18. if (r != null)
  19. context = decodeURIComponent(r[2]);
  20. reg = null;
  21. r = null;
  22. return context == null || context == "" || context == "undefined" ? "" : context;
  23. }
  24. </script>
  25. <script>
  26. var option = {
  27. xAxis: {
  28. type: 'category',
  29. data: [],
  30. axisLabel: {
  31. formatter: function(value) {
  32. return value.substring(11, 19) + "\n" + value.substring(0, 10).split('-').join('')
  33. }
  34. }
  35. },
  36. yAxis: {
  37. type: 'value'
  38. },
  39. legend: {
  40. type: 'scroll',
  41. top: 0
  42. },
  43. tooltip: {
  44. trigger: 'axis',
  45. axisPointer: {
  46. type: 'cross',
  47. lineStyle: {
  48. type: 'dashed'
  49. },
  50. label: {
  51. show: false
  52. }
  53. },
  54. confine: true,
  55. extraCssText: 'white-space: normal; word-break: break-all;',
  56. backgroundColor: 'rgba(255,255,255,0.1)', //通过设置rgba调节背景颜色与透明度
  57. position: 'inside',
  58. formatter: function(params) {
  59. let result = ''
  60. for (let i in params) {
  61. let value = '--'
  62. if (params[i].data !== null) {
  63. value = params[i].data
  64. }
  65. result += '<br>' + params[i].seriesName + ':' +
  66. value
  67. }
  68. return result
  69. }
  70. },
  71. dataZoom: [{
  72. type: 'inside',
  73. start: 90,
  74. end: 100
  75. },
  76. {
  77. type: 'slider',
  78. show: true,
  79. start: 90,
  80. end: 100,
  81. bottom: 10
  82. }
  83. ],
  84. series: []
  85. };
  86. </script>
  87. <script>
  88. document.addEventListener('UniAppJSBridgeReady', function() {
  89. uni.getEnv(function(res) {
  90. const id = GetQueryString('id')
  91. const startTime = GetQueryString('startTime')
  92. const endTime = GetQueryString('endTime')
  93. const valueType = GetQueryString('valueType')
  94. const itemName = GetQueryString('itemName')
  95. const token = window.localStorage.getItem('C_TOKEN')
  96. var service, serviceTime
  97. $.ajax({
  98. url: '',
  99. type: 'GET',
  100. beforeSend: function(xhr) {
  101. // this.url =
  102. // `http://192.168.0.41:8081/itemGroup/itemDataQuery?id=${id}&startTime=${startTime}&endTime=${endTime}&valueType=${valueType}`
  103. this.url = window.location.origin +
  104. `/itemGroup/itemDataQuery?id=${id}&startTime=${startTime}&endTime=${endTime}&valueType=${valueType}`
  105. xhr.setRequestHeader("Authorization", "Bearer " +
  106. token);
  107. xhr.setRequestHeader("token", token);
  108. },
  109. success: (res) => {
  110. if (res.code === 200) {
  111. const {
  112. valueList,
  113. valueTimeList
  114. } = res.data
  115. const service = [{
  116. name: itemName,
  117. data: valueList,
  118. type: 'line'
  119. }]
  120. option.xAxis.data = valueTimeList
  121. option.series = service
  122. var chart = echarts.init(document.getElementById('main'));
  123. var lastOption = chart.getOption();
  124. if (lastOption != undefined) {
  125. option.dataZoom[0].start = lastOption.dataZoom[0].start
  126. option.dataZoom[0].end = lastOption.dataZoom[0].end
  127. option.dataZoom[1].start = lastOption.dataZoom[1].start
  128. option.dataZoom[1].end = lastOption.dataZoom[1].end
  129. }
  130. chart.setOption(option)
  131. }
  132. }
  133. })
  134. })
  135. })
  136. </script>
  137. </body>
  138. </html>