1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- <!DOCTYPE html>
- <html>
- <head>
- {%include '../inc/header.html'%}
- <link href="{{static_url('mobile/css/imgs.css')}}" rel="stylesheet">
- </head>
- <body>
- <section class="m-wrapper">
- {%include 'menu.html'%}
- </section>
- <section class="m-wrapper charts">
- {% for v in data['list'] %}
- <section class="img-wrap">
- <div class="box" id="main_{{v['id']}}" style="width: 100%;height:400px;"></div>
- <p>{{v['name']}}</p>
- </section>
- {% end %}
- </section>
- {%include '../inc/script.html'%}
- <script type="text/javascript" src="{{static_url('js/echarts.common.min.js')}}"></script>
- <script>
- {% for v in data['list'] %}
- var date = {% for key,value in enumerate(v['stat']) %}{% if key == 0 %}{% raw value['data']['time'] %}{% end %}{% end %};
- if (date.length > 0) {
- var myChart = echarts.init(document.getElementById('main_{{v['id']}}'));
- var series = [
- {% for key,value in enumerate(v['stat']) %}
- {% if key > 0 %},{% end %}
- {
- name:'{{value['name']}}',
- type:'line',
- data:{% raw value['data']['value'] %},
- markPoint: {
- data: [
- {type: 'max', name: '最大值'},
- {type: 'min', name: '最小值'}
- ]
- },
- markLine: {
- data: [
- {type: 'average', name: '平均值'}
- ]
- }
- }
- {% end %}
- ];
- // 指定图表的配置项和数据
- var option = {
- tooltip: {
- trigger: 'axis'
- },
- xAxis: {
- type: 'category',
- data: date
- },
- yAxis: {
- type: 'value',
- axisLabel: {
- formatter: '{value} {{v['type']['unit']}}'
- }
- },
- series: series
- };
- myChart.setOption(option, true);
- } else {
- var myChart = $('#main_{{v['id']}}');
- myChart.attr('style', 'font-size:14px;text-align:center;');
- myChart.html('您要查询的时间段暂无数据');
- }
- {% end %}
- </script>
- </body>
- </html>
|