sensor_chart.html 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Smart Coffee - Chart</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <!-- 新 Bootstrap4 核心 CSS 文件 -->
  8. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  9. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  10. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  11. <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
  12. <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  13. <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  14. <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  15. <!--
  16. <script src="../static/js/sign_in.js"></script>
  17. <link rel="stylesheet" href="../static/css/sign_in.css">
  18. -->
  19. <!--引入 echarts.js -->
  20. <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  21. <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js'></script>
  22. <script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js'></script>
  23. <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.3.0/Chart.Zoom.min.js"></script>
  24. <script language="JavaScript">
  25. </script>
  26. </head>
  27. <body>
  28. <a href="/dry">返回乾燥槽介面</a>
  29. <div style="text-align: center; margin-top:0px; font-size: 24px;">
  30. Smart Coffee
  31. </div>
  32. <!--
  33. <form action="/chart/SHT11_Temp/{{tid}}" method="post">
  34. <div class="form-group" style="margin-top: 30px; text-align: center;">
  35. -->
  36. <table style="margin: auto; border:3px gray solid; width: 80%; text-align: center;" cellpadding="6" rules='ALL'>
  37. <tr>
  38. <td>
  39. {% if tid == '2'%}
  40. <select id="tank_num">
  41. <option value="D1">乾燥槽_1</option>
  42. <option value="D2" selected>乾燥槽_2</option>
  43. <option value="D3">乾燥槽_3</option>
  44. <option value="D4">乾燥槽_4</option>
  45. <option value="D5">乾燥槽_5</option>
  46. <option value="D6">乾燥槽_6</option>
  47. <option value="D7">乾燥槽_7</option>
  48. <option value="D8">乾燥槽_8</option>
  49. <option value="D9">乾燥槽_9</option>
  50. <option value="D10">乾燥槽_10</option>
  51. <option value="D11">乾燥槽_11</option>
  52. <option value="D12">乾燥槽_12</option>
  53. </select>
  54. {% elif tid == '3'%}
  55. <select id="tank_num">
  56. <option value="D1">乾燥槽_1</option>
  57. <option value="D2">乾燥槽_2</option>
  58. <option value="D3" selected>乾燥槽_3</option>
  59. <option value="D4">乾燥槽_4</option>
  60. <option value="D5">乾燥槽_5</option>
  61. <option value="D6">乾燥槽_6</option>
  62. <option value="D7">乾燥槽_7</option>
  63. <option value="D8">乾燥槽_8</option>
  64. <option value="D9">乾燥槽_9</option>
  65. <option value="D10">乾燥槽_10</option>
  66. <option value="D11">乾燥槽_11</option>
  67. <option value="D12">乾燥槽_12</option>
  68. </select>
  69. {% elif tid == '4'%}
  70. <select id="tank_num">
  71. <option value="D1">乾燥槽_1</option>
  72. <option value="D2">乾燥槽_2</option>
  73. <option value="D3">乾燥槽_3</option>
  74. <option value="D4" selected>乾燥槽_4</option>
  75. <option value="D5">乾燥槽_5</option>
  76. <option value="D6">乾燥槽_6</option>
  77. <option value="D7">乾燥槽_7</option>
  78. <option value="D8">乾燥槽_8</option>
  79. <option value="D9">乾燥槽_9</option>
  80. <option value="D10">乾燥槽_10</option>
  81. <option value="D11">乾燥槽_11</option>
  82. <option value="D12">乾燥槽_12</option>
  83. </select>
  84. {% elif tid == '5'%}
  85. <select id="tank_num">
  86. <option value="D1">乾燥槽_1</option>
  87. <option value="D2">乾燥槽_2</option>
  88. <option value="D3">乾燥槽_3</option>
  89. <option value="D4">乾燥槽_4</option>
  90. <option value="D5" selected>乾燥槽_5</option>
  91. <option value="D6">乾燥槽_6</option>
  92. <option value="D7">乾燥槽_7</option>
  93. <option value="D8">乾燥槽_8</option>
  94. <option value="D9">乾燥槽_9</option>
  95. <option value="D10">乾燥槽_10</option>
  96. <option value="D11">乾燥槽_11</option>
  97. <option value="D12">乾燥槽_12</option>
  98. </select>
  99. {% elif tid == '6'%}
  100. <select id="tank_num">
  101. <option value="D1">乾燥槽_1</option>
  102. <option value="D2">乾燥槽_2</option>
  103. <option value="D3">乾燥槽_3</option>
  104. <option value="D4">乾燥槽_4</option>
  105. <option value="D5">乾燥槽_5</option>
  106. <option value="D6" selected>乾燥槽_6</option>
  107. <option value="D7">乾燥槽_7</option>
  108. <option value="D8">乾燥槽_8</option>
  109. <option value="D9">乾燥槽_9</option>
  110. <option value="D10">乾燥槽_10</option>
  111. <option value="D11">乾燥槽_11</option>
  112. <option value="D12">乾燥槽_12</option>
  113. </select>
  114. {% elif tid == '7'%}
  115. <select id="tank_num">
  116. <option value="D1">乾燥槽_1</option>
  117. <option value="D2">乾燥槽_2</option>
  118. <option value="D3">乾燥槽_3</option>
  119. <option value="D4">乾燥槽_4</option>
  120. <option value="D5">乾燥槽_5</option>
  121. <option value="D6">乾燥槽_6</option>
  122. <option value="D7" selected>乾燥槽_7</option>
  123. <option value="D8">乾燥槽_8</option>
  124. <option value="D9">乾燥槽_9</option>
  125. <option value="D10">乾燥槽_10</option>
  126. <option value="D11">乾燥槽_11</option>
  127. <option value="D12">乾燥槽_12</option>
  128. </select>
  129. {% elif tid == '8'%}
  130. <select id="tank_num">
  131. <option value="D1">乾燥槽_1</option>
  132. <option value="D2">乾燥槽_2</option>
  133. <option value="D3">乾燥槽_3</option>
  134. <option value="D4">乾燥槽_4</option>
  135. <option value="D5">乾燥槽_5</option>
  136. <option value="D6">乾燥槽_6</option>
  137. <option value="D7">乾燥槽_7</option>
  138. <option value="D8" selected>乾燥槽_8</option>
  139. <option value="D9">乾燥槽_9</option>
  140. <option value="D10">乾燥槽_10</option>
  141. <option value="D11">乾燥槽_11</option>
  142. <option value="D12">乾燥槽_12</option>
  143. </select>
  144. {% elif tid == '9'%}
  145. <select id="tank_num">
  146. <option value="D1">乾燥槽_1</option>
  147. <option value="D2">乾燥槽_2</option>
  148. <option value="D3">乾燥槽_3</option>
  149. <option value="D4">乾燥槽_4</option>
  150. <option value="D5">乾燥槽_5</option>
  151. <option value="D6">乾燥槽_6</option>
  152. <option value="D7">乾燥槽_7</option>
  153. <option value="D8">乾燥槽_8</option>
  154. <option value="D9" selected>乾燥槽_9</option>
  155. <option value="D10">乾燥槽_10</option>
  156. <option value="D11">乾燥槽_11</option>
  157. <option value="D12">乾燥槽_12</option>
  158. </select>
  159. {% elif tid == '10'%}
  160. <select id="tank_num">
  161. <option value="D1">乾燥槽_1</option>
  162. <option value="D2">乾燥槽_2</option>
  163. <option value="D3">乾燥槽_3</option>
  164. <option value="D4">乾燥槽_4</option>
  165. <option value="D5">乾燥槽_5</option>
  166. <option value="D6">乾燥槽_6</option>
  167. <option value="D7">乾燥槽_7</option>
  168. <option value="D8">乾燥槽_8</option>
  169. <option value="D9">乾燥槽_9</option>
  170. <option value="D10" selected>乾燥槽_10</option>
  171. <option value="D11">乾燥槽_11</option>
  172. <option value="D12">乾燥槽_12</option>
  173. </select>
  174. {% elif tid == '11'%}
  175. <select id="tank_num">
  176. <option value="D1">乾燥槽_1</option>
  177. <option value="D2">乾燥槽_2</option>
  178. <option value="D3">乾燥槽_3</option>
  179. <option value="D4">乾燥槽_4</option>
  180. <option value="D5">乾燥槽_5</option>
  181. <option value="D6">乾燥槽_6</option>
  182. <option value="D7">乾燥槽_7</option>
  183. <option value="D8">乾燥槽_8</option>
  184. <option value="D9">乾燥槽_9</option>
  185. <option value="D10">乾燥槽_10</option>
  186. <option value="D11" selected>乾燥槽_11</option>
  187. <option value="D12">乾燥槽_12</option>
  188. </select>
  189. {% elif tid == '12'%}
  190. <select id="tank_num">
  191. <option value="D1">乾燥槽_1</option>
  192. <option value="D2">乾燥槽_2</option>
  193. <option value="D3">乾燥槽_3</option>
  194. <option value="D4">乾燥槽_4</option>
  195. <option value="D5">乾燥槽_5</option>
  196. <option value="D6">乾燥槽_6</option>
  197. <option value="D7">乾燥槽_7</option>
  198. <option value="D8">乾燥槽_8</option>
  199. <option value="D9">乾燥槽_9</option>
  200. <option value="D10">乾燥槽_10</option>
  201. <option value="D11">乾燥槽_11</option>
  202. <option value="D12" selected>乾燥槽_12</option>
  203. </select>
  204. {% else %}
  205. <select id="tank_num">
  206. <option value="D1" selected>乾燥槽_1</option>
  207. <option value="D2">乾燥槽_2</option>
  208. <option value="D3">乾燥槽_3</option>
  209. <option value="D4">乾燥槽_4</option>
  210. <option value="D5">乾燥槽_5</option>
  211. <option value="D6">乾燥槽_6</option>
  212. <option value="D7">乾燥槽_7</option>
  213. <option value="D8">乾燥槽_8</option>
  214. <option value="D9">乾燥槽_9</option>
  215. <option value="D10">乾燥槽_10</option>
  216. <option value="D11">乾燥槽_11</option>
  217. <option value="D12">乾燥槽_12</option>
  218. </select>
  219. {% endif %}
  220. {% if sensor_name=='SHT11_Humidity' %}
  221. <select id="sensors">
  222. <option value="SHT11_Temp">乾燥槽桶內溫度</option>
  223. <option value="SHT11_Humidity" selected>乾燥槽桶內濕度</option>
  224. <option value="UltraSonic">乾燥槽桶內咖啡生豆高度</option>
  225. <option value="PA">乾燥槽桶內壓力</option>
  226. <option value="soil_Temp">乾燥槽咖啡生豆溫度</option>
  227. <option value="soil_Humidity">乾燥槽咖啡生豆濕度</option>
  228. <option value="soil_EC">乾燥槽咖啡生豆 EC</option>
  229. </select>
  230. {% elif sensor_name=='UltraSonic' %}
  231. <select id="sensors">
  232. <option value="SHT11_Temp">乾燥槽桶內溫度</option>
  233. <option value="SHT11_Humidity">乾燥槽桶內濕度</option>
  234. <option value="UltraSonic" selected>乾燥槽桶內咖啡生豆高度</option>
  235. <option value="PA">乾燥槽桶內壓力</option>
  236. <option value="soil_Temp">乾燥槽咖啡生豆溫度</option>
  237. <option value="soil_Humidity">乾燥槽咖啡生豆濕度</option>
  238. <option value="soil_EC">乾燥槽咖啡生豆 EC</option>
  239. </select>
  240. {% elif sensor_name=='PA' %}
  241. <select id="sensors">
  242. <option value="SHT11_Temp">乾燥槽桶內溫度</option>
  243. <option value="SHT11_Humidity">乾燥槽桶內濕度</option>
  244. <option value="UltraSonic">乾燥槽桶內咖啡生豆高度</option>
  245. <option value="PA" selected>乾燥槽桶內壓力</option>
  246. <option value="soil_Temp">乾燥槽咖啡生豆溫度</option>
  247. <option value="soil_Humidity">乾燥槽咖啡生豆濕度</option>
  248. <option value="soil_EC">乾燥槽咖啡生豆 EC</option>
  249. </select>
  250. {% elif sensor_name=='soil_Temp' %}
  251. <select id="sensors">
  252. <option value="SHT11_Temp">乾燥槽桶內溫度</option>
  253. <option value="SHT11_Humidity">乾燥槽桶內濕度</option>
  254. <option value="UltraSonic">乾燥槽桶內咖啡生豆高度</option>
  255. <option value="PA">乾燥槽桶內壓力</option>
  256. <option value="soil_Temp" selected>乾燥槽咖啡生豆溫度</option>
  257. <option value="soil_Humidity">乾燥槽咖啡生豆濕度</option>
  258. <option value="soil_EC">乾燥槽咖啡生豆 EC</option>
  259. </select>
  260. {% elif sensor_name=='soil_Humidity' %}
  261. <select id="sensors">
  262. <option value="SHT11_Temp">乾燥槽桶內溫度</option>
  263. <option value="SHT11_Humidity">乾燥槽桶內濕度</option>
  264. <option value="UltraSonic">乾燥槽桶內咖啡生豆高度</option>
  265. <option value="PA">乾燥槽桶內壓力</option>
  266. <option value="soil_Temp">乾燥槽咖啡生豆溫度</option>
  267. <option value="soil_Humidity" selected>乾燥槽咖啡生豆濕度</option>
  268. <option value="soil_EC">乾燥槽咖啡生豆 EC</option>
  269. </select>
  270. {% elif sensor_name=='soil_EC' %}
  271. <select id="sensors">
  272. <option value="SHT11_Temp">乾燥槽桶內溫度</option>
  273. <option value="SHT11_Humidity">乾燥槽桶內濕度</option>
  274. <option value="UltraSonic">乾燥槽桶內咖啡生豆高度</option>
  275. <option value="PA">乾燥槽桶內壓力</option>
  276. <option value="soil_Temp">乾燥槽咖啡生豆溫度</option>
  277. <option value="soil_Humidity">乾燥槽咖啡生豆濕度</option>
  278. <option value="soil_EC" selected>乾燥槽咖啡生豆 EC</option>
  279. </select>
  280. {% else %}
  281. <select id="sensors">
  282. <option value="SHT11_Temp" selected>乾燥槽桶內溫度</option>
  283. <option value="SHT11_Humidity">乾燥槽桶內濕度</option>
  284. <option value="UltraSonic">乾燥槽桶內咖啡生豆高度</option>
  285. <option value="PA">乾燥槽桶內壓力</option>
  286. <option value="soil_Temp">乾燥槽咖啡生豆溫度</option>
  287. <option value="soil_Humidity">乾燥槽咖啡生豆濕度</option>
  288. <option value="soil_EC">乾燥槽咖啡生豆 EC</option>
  289. </select>
  290. {% endif %}
  291. </td>
  292. </tr>
  293. <tr>
  294. <td>
  295. 時間間隔:
  296. <select name="time-interval" class="text-right">
  297. <option value="month">逐月</option>
  298. <option value="day">逐日</option>
  299. <option value="hour">逐時</option>
  300. </select>
  301. &nbsp;
  302. <!--
  303. 從&nbsp;
  304. <input type="datetime-local" name="sensor_starttime" id="sensor_starttime" value={{starttime}}>
  305. &nbsp;到&nbsp;
  306. <input type="datetime-local" name="sensor_endtime" id="sensor_endtime" value={{endtime}}>
  307. &nbsp;為止
  308. -->
  309. <span>從</span>
  310. <label for="querydate-start"></label><input id="querydate-start" type="date">
  311. <span>到</span>
  312. <label for="querydate-end"></label><input id="querydate-end" type="date">
  313. <span>為止</span>
  314. </td>
  315. </tr>
  316. <tr>
  317. <td>
  318. 資料類型:
  319. <label><input type="checkbox" name="data-type" value="max">最大值</label>
  320. <label><input type="checkbox" name="data-type" value="avg">平均值</label>
  321. <label><input type="checkbox" name="data-type" value="min">最小值</label>
  322. <br>
  323. </td>
  324. </tr>
  325. <tr>
  326. <td>
  327. <!--
  328. <button type="submit" name="charting">繪製圖表</button>
  329. <button type="submit" onclick="" id="btn_save_chart" style="display: none;">儲存圖表</button>
  330. -->
  331. <input type="button" value="查詢" onclick="ShowInfo()">
  332. <input type="button" value="匯出" onclick="downloadFile()">
  333. <input type="button" value="刪除" onclick="">
  334. <script>
  335. function ShowInfo() {
  336. // 取得桶號、感測器名稱
  337. tid = document.getElementById("tank_num").value
  338. console.log('tid: ' + tid)
  339. sensor_name = document.getElementById("sensors").value
  340. console.log('sensor_name: ' + sensor_name)
  341. // 數據整理
  342. Echart(sensor_name, tid)
  343. // 顯示圖表
  344. };
  345. function downloadFile() {
  346. tid = document.getElementById("tank_num").value
  347. sensor_name = document.getElementById("sensors").value
  348. //藉型別陣列建構的 blob 來建立 URL
  349. let fileName = "ChartData_" + tid + "_" + sensor_name + ".csv";
  350. //"\ufeff"解決打開CSV中文亂碼問題
  351. const data = "\ufeff" + getData();
  352. let blob = new Blob([data], {
  353. type: 'text/csv,charset=UTF-8'
  354. });
  355. var href = URL.createObjectURL(blob);
  356. // 從 Blob 取出資料
  357. var link = document.createElement("a");
  358. document.body.appendChild(link);
  359. link.href = href;
  360. link.download = fileName;
  361. link.click();
  362. };
  363. //所有資料函數
  364. function getData() {
  365. var header = "日期," + data_name + "\n";
  366. var data = "";
  367. var length = all_datetime.length;
  368. for (var i = 0; i < length; i++) {
  369. data = data + all_datetime[i] + ',' + all_data[i] + '\n';
  370. };
  371. return header + data;
  372. };
  373. //最大最小平均資料函數
  374. function getData() {
  375. var header = data_name + "\n日期,";
  376. if (max_data) {
  377. console.log(max_data);
  378. header = header + "最大值,";
  379. };
  380. if (avg_data) {
  381. header = header + "平均值,";
  382. };
  383. if (min_data) {
  384. header = header + "最小值,";
  385. };
  386. header = header + "\n";
  387. var data = "";
  388. var length = xAxis_data.length;
  389. for (var i = 0; i < length; i++) {
  390. data = data + xAxis_data[i] + ',';
  391. if (max_data) {
  392. data = data + max_data[i] + ',';
  393. };
  394. if (avg_data) {
  395. data = data + avg_data[i] + ',';
  396. };
  397. if (min_data) {
  398. data = data + min_data[i] + ',';
  399. };
  400. data = data + '\n';
  401. };
  402. return header + data;
  403. };
  404. </script>
  405. </td>
  406. </tr>
  407. <tr>
  408. <td>
  409. <!--
  410. <img src={{ url }}>
  411. -->
  412. <div id="" class="show-info" style="text-align: center;">
  413. <center>
  414. <div class="show-chart" style="height: 480px; width: 100%; text-align: center;">
  415. 圖表
  416. </div>
  417. </center>
  418. </div>
  419. </td>
  420. </tr>
  421. </table>
  422. <!--
  423. </div>
  424. </form>
  425. -->
  426. </body>
  427. <script>
  428. var all_datetime = 0; // 所有資料時間 ?
  429. var all_data = 0; // 所有感測器數據 ?
  430. var data_name = 0; // 感測器名稱 // "溫溼度"
  431. var xAxis_data = 0; // x 軸資料
  432. var max_data = 0; //
  433. var min_data = 0; //
  434. var avg_data = 0; //
  435. function Echart(sensor_name, tid) {
  436. // Echart(sensor_name, tid)
  437. //將echarts圖形銷毀
  438. $(".show-chart").removeAttr("_echarts_instance_").empty();
  439. // Rita:sensor 與 data_name 重複
  440. // var sensor = evt.substring(2);
  441. if (!$("input[value=avg]").prop('checked') && !$("input[value=min]").prop('checked') && !$("input[value=max]").prop('checked')) {
  442. alert("請至少選擇一種資料類型!");
  443. return false;
  444. };
  445. if ($("#querydate-start").val() == '' || $("#querydate-end").val() == '') {
  446. alert("請選擇日期範圍!");
  447. return false;
  448. };
  449. //基於準備好的dom,初始化echarts例項
  450. var myChart = echarts.init(document.getElementsByClassName('show-chart')[0]); // class="col-10 show-chart"
  451. var date_start = $("#querydate-start").val();
  452. var date_end = $("#querydate-end").val();
  453. var avg = 0;
  454. var max = 0;
  455. var min = 0;
  456. var time_interval = $("select[name=time-interval]").val();
  457. var legend = new Array();
  458. var color = new Array();
  459. var series = new Array();
  460. if ($("input[value=max]").prop('checked')) {
  461. max = 1;
  462. legend.push("最大值");
  463. color.push("#1e88e5"); // 水藍色
  464. };
  465. if ($("input[value=avg]").prop('checked')) {
  466. avg = 1;
  467. legend.push("平均值");
  468. color.push("#43a047"); // 草綠色
  469. };
  470. if ($("input[value=min]").prop('checked')) {
  471. min = 1;
  472. legend.push("最小值");
  473. color.push("#e64a19"); // 橘紅色
  474. };
  475. var json = {
  476. 'tid': tid,
  477. 'sensor_name': sensor_name,
  478. 'avg': avg,
  479. 'max': max,
  480. 'min': min,
  481. 'time-interval': time_interval,
  482. 'date-start': date_start,
  483. 'date-end': date_end
  484. };
  485. console.log('json___' +
  486. 'tid: ' + tid +
  487. 'sensor_name: ' + sensor_name +
  488. 'avg: ' + avg +
  489. 'max: ' + max +
  490. 'min: ' + min +
  491. 'time-interval: ' + time_interval +
  492. 'date-start: ' + date_start +
  493. 'date-end: ' + date_end
  494. )
  495. $.get('/history_data_new', json, function (resText) {
  496. if (resText.max) {
  497. var max_series = {
  498. 'name': '最大值',
  499. 'type': 'scatter',
  500. 'data': resText.max.map(function (item) { return item[1]; }),
  501. 'itemStyle': { 'normal': { 'lineStyle': { 'color': '#1e88e5' } } },
  502. };
  503. series.push(max_series); // 把上面的 dict 加入 series array 內
  504. xAxis_data = resText.max.map(function (item) { return item[0]; });
  505. max_data = resText.max.map(function (item) { return item[1]; });
  506. };
  507. if (resText.avg) {
  508. var avg_series = { 'name': '平均值', 'type': 'scatter', 'data': resText.avg.map(function (item) { return item[1]; }), 'itemStyle': { 'normal': { 'lineStyle': { 'color': '#43a047' } } }, };
  509. series.push(avg_series);
  510. xAxis_data = resText.avg.map(function (item) { return item[0]; });
  511. console.log('xAxis_data' + xAxis_data) // 2021-07-09 10:00:00,2021-07-20 09:00:00,2021-07-22 15:00:00,2021-07-26 15:00:00,2021-07-26 16:00:00
  512. avg_data = resText.avg.map(function (item) { return item[1]; });
  513. console.log('avg_data' + avg_data) // 91.0,98.0,11.0,15.2,30.5
  514. };
  515. if (resText.min) {
  516. var min_series = { 'name': '最小值', 'type': 'scatter', 'data': resText.min.map(function (item) { return item[1]; }), 'itemStyle': { 'normal': { 'lineStyle': { 'color': '#e64a19' } } }, };
  517. series.push(min_series);
  518. xAxis_data = resText.min.map(function (item) { return item[0]; }); // all
  519. min_data = resText.min.map(function (item) { return item[1]; }); // min
  520. };
  521. //獲取日期內所有數據
  522. all_datetime = resText.all.map(function (item) { return item[0]; }); // all
  523. all_data = resText.all.map(function (item) { return item[1]; });
  524. //指定圖表的配置項和資料
  525. option = {
  526. title: {
  527. text: '', // 'Data History'
  528. left: '1%'
  529. },
  530. tooltip: {
  531. trigger: 'axis'
  532. },
  533. color: color,
  534. legend: {
  535. data: legend,
  536. },
  537. xAxis: {
  538. data: xAxis_data,
  539. },
  540. yAxis: {
  541. splitLine: {
  542. show: true,
  543. lineStyle: {
  544. color: ''
  545. }
  546. }
  547. },
  548. toolbox: {
  549. show: true,
  550. feature: {
  551. dataZoom: {
  552. yAxisIndex: 'none'
  553. },
  554. dataView: { readOnly: false },
  555. magicType: { type: ['line', 'bar'] },
  556. restore: {},
  557. saveAsImage: {}
  558. }
  559. },
  560. dataZoom: [{
  561. startValue: '2021-01-01'
  562. }, {
  563. type: 'inside'
  564. }],
  565. series: series,
  566. /*
  567. series: [
  568. {
  569. name: '最大值',
  570. type: 'line',
  571. data: resText.max.map(function (item) {
  572. return item[1];
  573. }),
  574. itemStyle: {
  575. normal: {
  576. lineStyle: {
  577. color: '#1e88e5'
  578. }
  579. }
  580. },
  581. },
  582. {
  583. name: '平均值',
  584. type: 'line',
  585. data: [20.0, 20.0, 20.0, 20.0, 20.0, 20.0],
  586. itemStyle: {
  587. normal: {
  588. lineStyle: {
  589. color: '#43a047'
  590. }
  591. }
  592. },
  593. },
  594. {
  595. name: '最小值',
  596. type: 'line',
  597. data: [15.0, 15.0, 15.0, 15.0, 15.0, 15.0],
  598. itemStyle: {
  599. normal: {
  600. lineStyle: {
  601. color: '#e64a19'
  602. }
  603. }
  604. }
  605. },
  606. ]
  607. */
  608. };
  609. console.log('SHOW myChart')
  610. //使用剛指定的配置項和資料顯示圖表
  611. myChart.setOption(option);
  612. }, 'json');
  613. } // Echart(sensor_name, tid)
  614. </script>
  615. </html>