<%@ 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-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: 200px; "></div>
                <div id="divChart2" style="width: 100%;height: 200px;"></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 class="col-lg-4 col-md-3">
        <div class="ibox shortcut">
            <div class="ibox-title-noline">
                <span>城乡居民收入占GDP比重</span>
            </div>
            <div class="ibox-content-noline">
                <div id="divChart4" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
    </div>



    <div class="col-lg-8 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-4 col-md-3">
        <div class="ibox shortcut">
            <div class="ibox-title-noline">
                <span>生活质量画像</span>
            </div>
            <div class="ibox-content-noline">
                <div id="divChart6" 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'));
    myChart1.setOption({
        tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '基尼系数',
                type: 'gauge',
                detail: {formatter:'{value}%'},
                data: []
            }
        ]
    });

    // setInterval(function () {
    //     option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    //     myChart.setOption(option, true);
    // },2000);

    myChart2.setOption({
        tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '恩格尔系数',
                type: 'gauge',
                detail: {formatter:'{value}%'},
                data: []
            }
        ]
    });

    // setInterval(function () {
    //     option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    //     myChart.setOption(option, true);
    // },2000);

    myChart3.setOption({
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name:'城镇失业率',
            data: [],
            type: 'line',

        }]
    });
    myChart4.setOption({

        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:[]
        },
        toolbox: {
            show : true,
            feature : {
                // dataView : {show: true, readOnly: false},
                // magicType : {show: true, type: ['line', 'bar']},
                // restore : {show: true},
                // saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : []
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'城乡居民收入',
                type:'bar',
                data:[]
                //
                // markLine : {
                //     data : [
                //         {type : 'average', name: '平均值'}
                //     ]
                // }
            },
            {
                name:'GDP',
                type:'bar',
                data:[]

            }
        ]
    });


    myChart5.setOption({
        backgroundColor:'#fff',
        legend:{data:[]},
        tooltip : {
            trigger: 'axis'
        },
        xAxis: [{
            type: 'value',
            min:-999,max:0,
            gridIndex: 0,
            axisTick:{inside:false},
            axisLabel : {
                formatter: function(v){
                    return -v;
                }
            }
        },{
            type: 'value',
            gridIndex: 1, min:0,max:999,
            axisTick:{inside:false},
            axisLabel : {
                formatter: function(v){
                    return v;
                }
            }
        }],
        yAxis: [{
            type: 'category',gridIndex: 0,
            data: [],
            axisTick:{inside:true},
            axisLabel : {show:false}
        },{
            type: 'category',gridIndex: 1,
            data: [],
        }],
        grid: [{
            top: 50,
            width: '40%',
            left: 45,gridIndex: 0,
        }, {
            top: 50,
            width: '40%',
            left: '50%',gridIndex: 1,
        }],
        color:['#2FACFA','#F5A623'],
        series: [


        ]
    });

    var renderFunc = function () {
        $.get('<%=basePath%>/admin/LivelihoodImprove/getCoefficient.action').done(function (data) {
            myChart1.setOption({

                series: [
                    {
                        data: data
                    }
                ]
            });
        });
        $.get('<%=basePath%>/admin/LivelihoodImprove/getCoefficient1.action').done(function (data) {
            myChart2.setOption({

                series: [
                    {
                        data: data
                    }
                ]
            });
        })
        $.get('<%=basePath%>/admin/LivelihoodImprove/getUnemployment.action').done(function (data) {
            // 填入数据
            myChart3.setOption({
                // legend: {
                //     data:data.spreadType
                // },
                xAxis: {
                    data:data.dataYear
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data:data.number
                    }
                ]
            });
        })

        $.get('<%=basePath%>/admin/LivelihoodImprove/getUrbanRuralGdp.action').done(function (data) {
            // 填入数据
            myChart4.setOption({
                legend: {
                    data:data.name
                },
                xAxis: {
                    data:data.city
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {

                        data:data.urbanRural
                    },
                    {

                        data:data.gdp
                    }
                ]
            });
        })

        $.get('<%=basePath%>/admin/LivelihoodImprove/getUrbanRuralContrast.action').done(function (data) {
            // 填入数据
            myChart5.setOption({
                legend: {
                    data:data.name
                },

                yAxis: [{
                    type: 'category',gridIndex: 0,
                    data: data.dataYear
                },{
                    type: 'category',gridIndex: 1,
                    data: data.dataYear
                }],
                series: [
                    {
                        name: '农村居民收入',
                        type: 'bar',
                        barWidth:'30',gridIndex: 0,
                        label:{
                            show:true,position:'left',
                            formatter:function(v){
                                return -v.value;
                            }
                        },
                        data: (function(){
                            var oriData = data.urbanRural;
                            var len = oriData.length;
                            while(len--) {
                                oriData[len] *= -1;
                            }
                            return oriData;
                        })()
                    },
                    {
                        name: '城市居民收入',
                        type: 'bar',
                        barWidth:'30',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        label:{
                            show:true,position:'right',
                            formatter:function(v){
                                return v.value;
                            }
                        },
                        data: data.gdp
                    }
                ]
            });
        })
        $.get('<%=basePath%>/admin/LivelihoodImprove/getQuality.action').done(function (data) {
            // 填入数据
            myChart6.setOption({
                // title: {
                //     text: '教育画像'
                // },
                tooltip: {},
                legend: {
                    data: data.dataYear
                },
                radar: {
                    // shape: 'circle',
                    name: {
                        textStyle: {
                            color: 'red',

                            borderRadius: 3,
                            padding: [3, 5]
                        }
                    },
                    indicator:data.listName
                    // indicator: [
                    //     { name: '城镇人均可支配收入', max: 6500},
                    //     { name: '平均预期寿命', max: 16000},
                    //     { name: '万人公车辆', max: 30000},
                    //     { name: '互联网普及率', max: 38000},
                    //     { name: '人均住房面积', max: 52000},
                    //     { name: '农村人均纯收入', max: 25000},
                    //     { name: '城镇保障性住房新开工面积占住宅开发年级比率', max: 25000},
                    //     { name: '基尼系数及恩格尔系数', max: 25000}
                    // ]
                },
                series: [{
                    name: '数值',
                    type: 'radar',
                    // areaStyle: {normal: {}},
                    data : [
                        {
                            value : data.value,
                            name : 2016
                        },
                        {
                            value : data.value1,
                            name : 2017
                        },
                        {
                            value : data.value2,
                            name : 2018
                        }
                    ]
                }]
            });
        })

    };
    renderFunc();
</script>
</html>
