env.html 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. {%include '../inc/header.html'%}
  5. <link href="{{static_url('mobile/css/imgs.css')}}" rel="stylesheet">
  6. </head>
  7. <body>
  8. <section class="m-wrapper">
  9. {%include 'menu.html'%}
  10. </section>
  11. <section class="m-wrapper charts">
  12. {% for v in data['list'] %}
  13. <section class="img-wrap">
  14. <div class="box" id="main_{{v['id']}}" style="width: 100%;height:400px;"></div>
  15. <p>{{v['name']}}</p>
  16. </section>
  17. {% end %}
  18. </section>
  19. {%include '../inc/script.html'%}
  20. <script type="text/javascript" src="{{static_url('js/echarts.common.min.js')}}"></script>
  21. <script>
  22. {% for v in data['list'] %}
  23. var date = {% for key,value in enumerate(v['stat']) %}{% if key == 0 %}{% raw value['data']['time'] %}{% end %}{% end %};
  24. if (date.length > 0) {
  25. var myChart = echarts.init(document.getElementById('main_{{v['id']}}'));
  26. var series = [
  27. {% for key,value in enumerate(v['stat']) %}
  28. {% if key > 0 %},{% end %}
  29. {
  30. name:'{{value['name']}}',
  31. type:'line',
  32. data:{% raw value['data']['value'] %},
  33. markPoint: {
  34. data: [
  35. {type: 'max', name: '最大值'},
  36. {type: 'min', name: '最小值'}
  37. ]
  38. },
  39. markLine: {
  40. data: [
  41. {type: 'average', name: '平均值'}
  42. ]
  43. }
  44. }
  45. {% end %}
  46. ];
  47. // 指定图表的配置项和数据
  48. var option = {
  49. tooltip: {
  50. trigger: 'axis'
  51. },
  52. xAxis: {
  53. type: 'category',
  54. data: date
  55. },
  56. yAxis: {
  57. type: 'value',
  58. axisLabel: {
  59. formatter: '{value} {{v['type']['unit']}}'
  60. }
  61. },
  62. series: series
  63. };
  64. myChart.setOption(option, true);
  65. } else {
  66. var myChart = $('#main_{{v['id']}}');
  67. myChart.attr('style', 'font-size:14px;text-align:center;');
  68. myChart.html('您要查询的时间段暂无数据');
  69. }
  70. {% end %}
  71. </script>
  72. </body>
  73. </html>