<%@ 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">
    <style type="text/css">
        #allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
        #r-result{height:100%;width:20%;float:left;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=RleRpI1DQegNo17XGsVvUUS1e3oiubUG"></script>
</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-4 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-4 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-4 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>
    <div class="row hidden-print">
        <div class="col-lg-6 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>年龄结构</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart4" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 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>

    <div class="row hidden-print">
        <div class="col-lg-12 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>区域人口基本状况</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="allmap" style="width: 100%;height: 400px;"></div>
                    <div id="divChart6" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>
    <jsp:include page="../../../common/admin/body_post.jsp"></jsp:include>
    <script type="text/javascript">

        $.post('<%=basePath%>/admin/peopleGrowth/getPopulationRegion.action',function (data) {
            // 百度地图API功能
            map = new BMap.Map("allmap");
            map.centerAndZoom(new BMap.Point(115.675402, 37.745191), 15);
            var data_info = [];
            if (data.length>0){
                for(var y=0;y<data.length;y++){
                    var dataObj = [data[y].longitude, data[y].latitude, data[y].regionName+"：" + data[y].quantity]
                    data_info.push(dataObj);
                }
            }
            var opts = {
                width : 250,     // 信息窗口宽度
                height: 80,     // 信息窗口高度
                title : "人口数量" , // 信息窗口标题
                enableMessage:true//设置允许信息窗发送短息
            };
            for(var i=0;i<data_info.length;i++){
                var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 创建标注
                var content = data_info[i][2];
                map.addOverlay(marker);               // 将标注添加到地图中
                addClickHandler(content,marker);
            }
            function addClickHandler(content,marker){
                marker.addEventListener("click",function(e){
                    openInfo(content,e)}
                );
            }
            function openInfo(content,e){
                var p = e.target;
                var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
                map.openInfoWindow(infoWindow,point); //开启信息窗口
            }
        },"json")
        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'));

        myChart1.setOption({
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:['男性','女性','总数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : []
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'男性',
                    type:'bar',
                    data:[]
                },
                {
                    name:'女性',
                    type:'bar',
                    data:[],
                    markLine : {
                        lineStyle: {
                            normal: {
                                type: 'dashed'
                            }
                        }
                    }
                },
                {
                    name:'总数',
                    type:'bar',
                    stack: '搜索引擎',
                    data:[]
                },
            ]
        });

        myChart2.setOption({
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis:  {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: []
            },
            series: [
                {
                    name: '平均寿命',
                    type: 'bar',
                    itemStyle:{
                        normal:{
                            color:'#4699d0'
                        }
                    },
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: []
                },
            ]
        });

        myChart3.setOption({
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['死亡率','出生率','自然增长率']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'死亡率',
                    type:'line',
                    stack: '总量',
                    data:[]
                },
                {
                    name:'出生率',
                    type:'line',
                    stack: '总量',
                    data:[]
                },
                {
                    name:'自然增长率',
                    type:'line',
                    stack: '总量',
                    data:[]
                }
            ]
        }) ;

        myChart4.setOption({
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}"
            },
            toolbox: {
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
            legend: {
                data: []
            },
            calculable: true,
            series: [
                {
                    name:'年龄结构',
                    type:'funnel',
                    left: '10%',
                    top: 60,
                    //x2: 80,
                    bottom: 60,
                    width: '80%',
                    // height: {totalHeight} - y - y2,
                    min: 0,
                    max: 100,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {
                        normal: {
                            show: true,
                            position: 'inside'
                        },
                        emphasis: {
                            textStyle: {
                                fontSize: 20
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            length: 10,
                            lineStyle: {
                                width: 1,
                                type: 'solid'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#fff',
                            borderWidth: 1
                        }
                    },
                    data: []
                }
            ]
        }) ;

        myChart5.setOption({
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data: []
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'抚养比',
                    type:'bar',
                    data: [],
                    itemStyle:{
                        normal:{
                            color:'#73c8b4'
                        }
                    },
                    markLine : {
                        lineStyle: {
                            normal: {
                                type: 'dashed'
                            }
                        }
                    }
                }
            ]
        });

        myChart6.setOption({
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis:  {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: []
            },
            series: [
                {
                    name: '区域人口',
                    type: 'bar',
                    itemStyle:{
                        normal:{
                            color:'#4699d0'
                        }
                    },
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: []
                },
            ]
        }) ;

        var renderFunc = function () {
            $.get('<%=basePath%>/admin/peopleGrowth/getPopulationSummary.action').done(function (data) {
                // 填入数据
                myChart1.setOption({
                    xAxis: {
                        data: data.dataYear
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '男性',
                        data: data.manDataValue
                    },{
                        // 根据名字对应到相应的系列
                        name: '女性',
                        data: data.girlDataValue
                    },{
                        // 根据名字对应到相应的系列
                        name: '总数',
                        data: data.allDataValue
                    }]
                });
            })
            $.get('<%=basePath%>/admin/peopleGrowth/getLifetime.action').done(function (data) {
                // 填入数据
                myChart2.setOption({
                    yAxis: {
                        data: data.categories
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '平均寿命',
                        data: data.value
                    }]
                });
            })
            $.get('<%=basePath%>/admin/peopleGrowth/getExpectedRate.action').done(function (data) {
                // 填入数据
                myChart3.setOption({
                    xAxis: {
                        data: data.yearAndMonth
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '死亡率',
                        data: data.deathValue
                    },{
                        // 根据名字对应到相应的系列
                        name: '出生率',
                        data: data.birthValue
                    },{
                        // 根据名字对应到相应的系列
                        name: '自然增长率',
                        data: data.increaseValue
                    }]
                });
            })
            // myChart3.setOption(option3, true);
            $.get('<%=basePath%>/admin/peopleGrowth/getAgeStructure.action').done(function (data) {
                // 填入数据
                myChart4.setOption({
                    legend: {
                        data: data.ageName
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '年龄结构',
                        data: data.ageStructureNameAndValueModels
                    }]
                });
            })
            $.get('<%=basePath%>/admin/peopleGrowth/getDependencyRatio.action').done(function (data) {
                // 填入数据
                myChart5.setOption({
                    xAxis: {
                        data: data.categories
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '抚养比',
                        data: data.value
                    }]
                });
            })
            $.get('<%=basePath%>/admin/peopleGrowth/getPopulationRegionPicture.action').done(function (data) {
                // 填入数据
                myChart6.setOption({
                    yAxis: {
                        data: data.categories
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '区域人口',
                        data: data.value
                    }]
                });
            })
        };
        renderFunc();
    </script>
</body>
</html>