<!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>
