<%@ page import="org.apache.commons.lang.StringUtils" %>
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String basePath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="../../../common/admin/head.jsp"></jsp:include>
    <link  rel="stylesheet" type="text/css" href="<%=basePath%>/resource/css/admin/home/index.css">
</head>
<body>
<jsp:include page="../../../common/admin/body_pre.jsp"></jsp:include>
<div class="row hidden-print">
    <div class="col-lg-12">
        <div class="ibox">
            <div class="ibox-title">
                <h2>空气质量</h2>
                <ol class="breadcrumb">
                    <li>
                        <a href="javascript:void(0);" >每日指数</a>
                    </li>
                    <li class="active">
                        <strong>空气质量每日指数</strong>
                    </li>
                </ol>
            </div>
        </div>
    </div>
</div>
<div class="row hidden-print">
    <div class="col-lg-12 col-md-12">
        <div class="ibox shortcut">
            <div class="ibox-title-noline">
                <span>河北省每日空气质量</span>
            </div>
            <div class="ibox-content-noline">
                <div id="divChart1" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-12 col-md-12">
        <div class="ibox shortcut">
            <div class="ibox-title-noline">
                <span>衡水市区县每日空气质量</span>
            </div>
            <div class="ibox-content-noline">
                <div id="divChart2" style="width: 100%;height: 450px;"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-12 col-md-12">
        <div class="ibox shortcut">
            <div class="ibox-title-noline">
                <span>河北各市优良天数(含北京)</span>
            </div>
            <div class="ibox-content-noline">
                <div id="divChart3" style="width: 100%;height: 450px;"></div>
            </div>
        </div>
    </div>
</div>

<jsp:include page="../../../common/admin/body_post.jsp"></jsp:include>
<script type="text/javascript" src="<%=basePath%>/resource/plugins/echarts/echarts-liquidfill.js"></script>
<script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('divChart1'));
    var myChart2 = echarts.init(document.getElementById('divChart2'));
    var myChart3 = echarts.init(document.getElementById('divChart3'));

    var array1 = new Array();
    function dataSource1(){
        this.name= '',
            this.type= 'line',
            this.data= [],
            this.showSymbol=false
    }
    for(var i=0;i<15;i++){
        array1.push(new dataSource1());
    }
    var option1 = {
        tooltip: {
            show:true,
            trigger: 'axis',
            backgroundColor:['skyblue'],
            textStyle:{
                color:['#003']
            },
        },
        legend: {
            data:[]
        },
        dataZoom: [{
            show: true,
            realtime: true,
            start: 20,
            end: 100
        }, {
            type: 'inside',
            realtime: true,
            start: 20,
            end: 40
        }],
        xAxis: {
            data: [],
            boundaryGap: false,
        },
        yAxis: {

        },
        toolbox: {
            show: true,
            feature: {
                mark: true,
                dataView: { show: true, readOnly: false },
                restore: { show: true},
                saveAsImage: { show: true }
            },

        },
        series: array1
    };
    myChart1.setOption(option1);
    var fnMyChart1=function() {
        $.get('<%=basePath%>/admin/atmosphere/getHBCityAirQualityIndex.action', function (result) {
            var array = new Array();
            function zidingyi(name,data){
                this.name=name;
                this.data=data;
            }
            for(var k=0;k<result.data.length;k++){
                array.push(new zidingyi(result.data[k].city_name,eval(result.data[k].dates)))
            }
            myChart1.setOption( {
                legend: {
                    data:eval(result.cityName)
                },
                xAxis: {
                    data:eval(result.date)
                },
                series: array
            });
        })
    }
    fnMyChart1();

    var array2 = new Array();
    function dataSource2(){
        this.name= '',
            this.type= 'line',
            this.data= [],
            this.showSymbol=false
    }
    for(var i=0;i<25;i++){
        array2.push(new dataSource2());
    }
    var option2 = {
        tooltip: {
            show:true,
            trigger: 'axis',
            backgroundColor:['skyblue'],
            textStyle:{
                color:['#003']
            },
        },
        legend: {
            data:[]
        },
        dataZoom: [{
            show: true,
            realtime: true,
            start: 20,
            end: 100
        }, {
            type: 'inside',
            realtime: true,
            start: 20,
            end: 40
        }],
        xAxis: {
            data: [],
            boundaryGap: false,
        },
        yAxis: {

        },
        toolbox: {
            show: true,
            feature: {
                mark: true,
                dataView: { show: true, readOnly: false },
                restore: { show: true},
                saveAsImage: { show: true }
            },

        },
        series: array2
    };
    myChart2.setOption(option2);
    var fnMyChart2=function() {
        $.get('<%=basePath%>/admin/atmosphere/getHSAreaAirPollutionIndex.action', function (result) {
            var array = new Array();
            function zidingyi(name,data){
                this.name=name;
                this.data=data;
            }
            for(var k=0;k<result.data.length;k++){
                array.push(new zidingyi(result.data[k].name,eval(result.data[k].data)))
            }
            console.info("自定义数组"+array);
            myChart2.setOption( {
                legend: {
                    data:eval(result.cityName)
                },
                xAxis: {
                    data:eval(result.date)
                },
                series: array
            });
        })
    }
    fnMyChart2();

    option3 = {
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : [],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'优良天数:',
                type:'bar',
                barWidth: '60%',
                data:[]
            }
        ]
    };
    myChart3.setOption(option3);
    var fnMyChart3=function() {
        $.get('<%=basePath%>/admin/atmosphere/getHbAreaAirFineCount.action', function (result) {
            myChart3.setOption( {
                xAxis: {
                    data:result.data.citys
                },
                series:{
                    data:result.data.days
                }
            });
        })
    }
    fnMyChart3();

</script>
</body>
</html>