<%@ 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-3 col-md-3">
        <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-3 col-md-3">
        <div class="ibox shortcut">
            <div class="ibox-title-noline">
                <span>水耗</span>
            </div>
            <div class="ibox-content-noline">
                <div id="divChart2" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-3">
        <div class="ibox shortcut">
            <div class="ibox-title-noline">
                <span>建设用地占用</span>
            </div>
            <div class="ibox-content-noline">
                <div id="divChart3" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3">
        <div class="ibox shortcut">
            <div class="ibox-title-noline">
                <span>人均CO2排放量</span>
            </div>
            <div class="ibox-content-noline">
                <div id="divChart4" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3">
        <div class="ibox shortcut">
            <div class="ibox-title-noline">
                <span>环境质量指数</span>
            </div>
            <div class="ibox-content-noline">
                <div id="divChart5" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3">
        <div class="ibox shortcut">
            <div class="ibox-title-noline">
                <span>环境治理投资占GDP比重</span>
            </div>
            <div class="ibox-content-noline">
                <%--<div id="divChart7" style="width: 100%;height: 200px;"></div>--%>
                <div id="divChart6" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3">
        <div class="ibox shortcut">
            <div class="ibox-title-noline">
                <span>处理达标率</span>
            </div>
            <div class="ibox-content-noline">
                <div id="divChart8" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="../../../common/admin/body_post.jsp"></jsp:include>
</body>
<script>
    var myChart1 = echarts.init(document.getElementById('divChart1'));
    var myChart2 = echarts.init(document.getElementById('divChart2'));
    var myChart3 = echarts.init(document.getElementById('divChart3'));
    var myChart4 = echarts.init(document.getElementById('divChart4'));
    var myChart5 = echarts.init(document.getElementById('divChart5'));
    var myChart6 = echarts.init(document.getElementById('divChart6'));
    var myChart7 = echarts.init(document.getElementById('divChart6'));
    var myChart8 = echarts.init(document.getElementById('divChart8'));





    var renderFunc = function () {
        $.get('<%=basePath%>/admin/EcologicalCivilization/getConsume.action').done(function (data) {
            // 填入数据
            myChart1.setOption({
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data.dataYear,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '能耗值',
                        type: 'bar',

                        data: data.energyValue
                    }
                ]
            });
            myChart2.setOption({
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data.dataYear,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '水耗值',
                        type: 'bar',

                        data: data.waterValue
                    }
                ]
            });
            myChart3.setOption({
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data.dataYear,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '建设用地',
                        type: 'bar',

                        data: data.constructValue
                    }
                ]
            });
            myChart4.setOption({
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data.dataYear,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '排放量',
                        type: 'bar',

                        data: data.co2Value
                    }
                ]
            });
        });
        $.get('<%=basePath%>/admin/EcologicalCivilization/getEnvironmentalQuality.action').done(function (data) {
            myChart5.setOption({
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '等级',
                        type: 'gauge',
                        detail: {formatter: '{value}%'},
                        data: data
                    }
                ]
            });
        })

        $.get('<%=basePath%>/admin/EcologicalCivilization/getEnvironmentalGovernanceGdp.action').done(function (data) {
            myChart6.setOption({
                tooltip: {
                    trigger: 'axis'
                    ,
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data:data.name
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data.dataYear

                    }
                ],
                yAxis: [
                    {
                        type: 'value',

                    }
                ],
                series: [

                    {
                        name:'同比值',
                        type:'line',
                        data:data.growth
                    },
                    {
                        name:'环境治理',
                        type:'bar',
                        data:data.huanjing

                    }
                ]
            });
        })

        $.get('<%=basePath%>/admin/EcologicalCivilization/getDealWithTheStandard.action').done(function (data) {
            myChart8.setOption({
                // title: {
                //     text: '堆叠区域图'
                // },
                tooltip : {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data:data.name
                },
                toolbox: {
                    feature: {
                        // saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : data.dataYear
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'工业三废',
                        type:'line',
                        stack: '总量',
                        areaStyle: {normal: {}},
                        data:data.siG

                    },
                    {
                        name:'生活垃圾',
                        type:'line',
                        stack: '总量',
                        areaStyle: {normal: {}},
                        data:data.reads
                    },
                    {
                        name:'生活污水',
                        type:'line',
                        stack: '总量',
                        areaStyle: {normal: {}},
                        data:data.wifi
                    }
                ]
            });
        })
    }
    renderFunc();
</script>
</html>
