<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--<script src="https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts.min.js"></script>-->
   <!-- <script src="../static/js/echarts.min.js"></script>-->
    <script th:src="@{/js/echarts.min.js}"></script>

    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">

    function xiangqing(){
        window.location.href = '/detection/water/history/911202236794497949001001.html';
    }
</script>
<button type="button" class="reset-btn" onclick="xiangqing()">详  情</button>

<div id="main" style="width: 1350px;height: 400px;">

</div>

<div id="main1" style="width: 1350px;height: 400px;">

</div>
<!--<iframe src="http://lswz:88/workflow/request/MyRequestView.jsp?offical=1&officalType=2" width="100%" height="300px"></iframe>-->
<script type="text/javascript" th:inline="javascript">

    var myChart = echarts.init(document.getElementById('main'));
    var daysArray = [[${resultMap.daysArray}]];
    var avg = [[${resultMap.waterTempCollectionVO.avgTemperatureArr}]];
    var maxx = [[${resultMap.waterTempCollectionVO.maxTemperatureArr}]];
    var minn = [[${resultMap.waterTempCollectionVO.minTemperatureArr}]];

    var option1 = {
        title: {
            text: '温度示意图',
            x:'center'
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                animation: false,
                label: {
                    backgroundColor: '#505765'
                }
            }
        },
        grid: {
            left: '3%',
            right: '3%',
            bottom: '10%'
        },
        legend: {
            x:'center',
            y:'bottom',
            data:['最低温度','最高温度','平均温度']
        },
        xAxis: {
            type: 'category',
            name: '时间',
            boundaryGap: false,
            axisLabel:{
                fontSize:8,
                color: 'red',
                interval:0,
            },

            data: daysArray
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} °C'
            },
            name: '温度(℃)',
        },
        series: [{
            name: '最低温度',
            type: 'line',
            connectNulls: true,
            lineStyle: {
                width: 1
            },
            data: minn,
            markPoint: {
                data: [
                    {type: 'min', name: '最小值'},
                ]},
            markLine: {
                data: [
                    {type: 'min', name: '最小值'}
                ]
            }
        },{
            name: '最高温度',
            type: 'line',
            connectNulls: true,
            data: maxx,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                ]
            },markLine: {
                data: [
                    {type: 'max', name: '最大值'}
                ]
            }
        },{
            name: '平均温度',
            type: 'line',
            connectNulls: true,
            data: avg
        }]
    };


    var myChart1 = echarts.init(document.getElementById('main1'));
    var avg1 = [[${resultMap.waterTempCollectionVO.avgHumidityArr}]];
    var maxx1 = [[${resultMap.waterTempCollectionVO.maxHumidityArr}]];
    var minn1 = [[${resultMap.waterTempCollectionVO.minHumidityArr}]];

    var option2 = {
        title: {
            text: '水分示意图',
            x:'center'
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                animation: false,
                label: {
                    backgroundColor: '#505765'
                }
            }
        },
        grid: {
            left: '3%',
            right: '3%',
            bottom: '10%'
        },
        legend: {
            x:'center',
            y:'bottom',
            data:['最低水分','最高水分','平均水分']
        },
        xAxis: {
            type: 'category',
            name: '时间',
            boundaryGap: false,
            axisLabel:{
                fontSize:8,
                color: 'red',
                interval:0,
            },

            data: daysArray
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} °C'
            },
            name: '水分',
        },
        series: [{
            name: '最低水分',
            type: 'line',
            connectNulls: true,
            lineStyle: {
                width: 1
            },
            data: minn1,
            markPoint: {
                data: [
                    {type: 'min', name: '最小值'},
                ]},
            markLine: {
                data: [
                    {type: 'min', name: '最小值'}
                ]
            }
        },{
            name: '最高水分',
            type: 'line',
            connectNulls: true,
            data: maxx1,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                ]
            },markLine: {
                data: [
                    {type: 'max', name: '最大值'}
                ]
            }
        },{
            name: '平均水分',
            type: 'line',
            connectNulls: true,
            data: avg1
        }]
    };

    myChart.setOption(option1);
    myChart1.setOption(option2);
</script>
</body>
</html>
