<%@ 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 id="divChart1" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut">
                <div id="divChart2" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut">
                <div id="divChart3" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut">
                <div id="divChart4" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
    </div>
    <div class="row hidden-print">
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut">
                <div id="divChart5" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut">
                <div id="divChart6" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut">
                <div id="divChart7" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut">
                <div id="divChart8" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
    </div>
    <jsp:include page="../../../common/admin/body_post.jsp"></jsp:include>
    <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 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('divChart7'));
        var myChart8 = echarts.init(document.getElementById('divChart8'));

        option1to4 = {
            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    name: '业务指标',
                    type: 'gauge',
                    detail: {formatter:'{value}%'},
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:[[0.2, '#91c7ae'], [0.4, '#63869e'],[0.6, 'yellow'],[0.8, 'orange'],[1, '#c23531']]
                        }
                    },
                    data: [{value: 50, name: '完成率'}]
                }
            ]
        };
        option1 = jQuery.extend(true, {title: {text: ''}}, option1to4);
        option2 = jQuery.extend(true, {title: {text: ''}}, option1to4);
        option3 = jQuery.extend(true, {title: {text: ''}}, option1to4);
        option4 = jQuery.extend(true, {title: {text: ''}}, option1to4);
        var fnMyChart1=function(){
            $.get('<%=basePath%>/admin/home/moreindex.action',function(result){
                if(result!=null && result.data.length>0){
                    for(var i=1;i<=result.data.length;i++){
                        eval('option'+i).title.text=result.data[i-1].temp;
                        eval('option'+i).series[0].name=result.data[i-1].temp;
                        eval('option'+i).series[0].data[0]= result.data[i-1];
                        eval('myChart'+i).setOption(eval('option'+i), true);
                    }
                }
            })
        }
        fnMyChart1();
        /*///////////////////////////*/
        option5 = {
            title: {
                text: '城镇绿化率'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                data:['']
            },
            series: [
                {
                    name:'城镇绿化率',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[]
                }
            ]
        };
        myChart5.setOption(option5, true);
        var fnMyChart5=function() {
            $.get('<%=basePath%>/admin/home/citygreening.action', function (result) {
                myChart5.setOption({
                    title:{
                        subtext: "最新同比值:"+result.data.growth +"%"
                    },
                    legend: {
                        data:result.data.names
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        data: result.data.list
                    }]
                });
            })
        }
        fnMyChart5();
        /*////////////////////////*/
        option6 = {
            title: {
                text: '社会安全'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {},
            radar: {
                //shape: 'circle',
                name: {
                    textStyle: {
                        color: '#fff',
                        backgroundColor: '#999',
                        borderRadius: 3,
                        padding: [3, 5]
                    },
                center: ['25%','40%'],
                radius: 80
                },
                indicator: []
            },
            series: [{
                name: '社会安全',
                type: 'radar',
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data : []
            }]
        };
        myChart6.setOption(option6, true);
        var fnMyChart6=function(){
            $.get('<%=basePath%>/admin/home/societysecurity.action', function (result) {
                myChart6.setOption({
                    radar: {
                        indicator: result.data.list
                    },
                    series: [
                        // 根据名字对应到相应的系列
                        {data:[{value: result.data.values}]}
                    ]
                });
            })
        }
        fnMyChart6();
        /*/////////////////////////*/
        function buildOption7(result) {
            return {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                        return [pt[0], '10%'];
                    }
                },
                title: {
                    text: '污染指数',
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: result.data.date
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 10
                }, {
                    start: 0,
                    end: 10,
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '80%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }],
                series: [
                    {
                        name:'result',
                        type:'line',
                        smooth:true,
                        symbol: 'none',
                        sampling: 'average',
                        itemStyle: {
                            normal: {
                                color: 'rgb(255, 70, 131)'
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgb(255, 158, 68)'
                                }, {
                                    offset: 1,
                                    color: 'rgb(255, 70, 131)'
                                }])
                            }
                        },
                        data: result.data.data
                    }
                ]
            };
        };
        var fnMyChart7=function(){
            $.get('<%=basePath%>/admin/home/pollutionindex.action', function (result) {
                option7 = buildOption7(result);
                myChart7.setOption(option7, true);
            })
        }
        fnMyChart7();
        /*////////////////////*/
        option8 = {
            tooltip: {
                trigger: 'axis'
            },
            title: {
                text: '社会发展',
                subtext:''
            },
            legend: {
                orient:'vertical',
                data: [{
                    name:'人均GDP(万元)',
                    icon:'circle'
                },{
                    name:'人均可支配收入(万元)',
                    icon:'circle'
                }],
                itemGap:3,
                align: 'right',
                textStyle:{
                    fontSize:10
                },
                left: 'right'
            },
            xAxis: {
                type: 'category',
                data: [],
                axisPointer: {
                    type: 'shadow'
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name:'人均GDP(万元)',
                data: [],
                type: 'bar'
            },
            {
                name:'人均可支配收入(万元)',
                data: [],
                type: 'bar'
            }]
        };
        myChart8.setOption(option8, true);
        var fnMyChart8=function(){
            $.get('<%=basePath%>/admin/home/societydevelop.action', function (result) {
                myChart8.setOption({
                    title: {
                        subtext:"基尼系数： ("+result.data.gdbDegree+")  恩格尔系数： ("+result.data.perDegreer+")"
                    },
                    xAxis: {
                        data: result.data.years
                    },
                    series: [
                        // 根据名字对应到相应的系列
                        {data: result.data.gdpAmount},
                        {data: result.data.perIncomeAmount}
                    ]
                });
            })
        }
        fnMyChart8();
        var renderFunc = function () {
            option1.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            myChart1.setOption(option1, true);
            option2.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            myChart2.setOption(option2, true);
            option3.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            myChart3.setOption(option3, true);
            option4.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            myChart4.setOption(option4, true);
            myChart5.setOption(option5, true);
            myChart6.setOption(option6, true);
            myChart7.setOption(option7, true);
            myChart8.setOption(option8, true);
        };
       // renderFunc();
    </script>
</body>
</html>