<%@ 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>GDP</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>人均GDP</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>GDP占比</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>全社会劳动生产率</span>
            </div>
            <div class="ibox-content-noline">
                <div id="divChart4" 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="divChart5" 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'));
    myChart1.setOption({
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['GDP增速','GDP数值']
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {

                type:'line',
                data:[]
            },
            {

                data: [],
                type: 'line',

            }]
    });
    myChart2.setOption({
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['人均GDP增速','人均GDP数值']
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: ['2014年', '2015年', '2016年', '2017年', '2018年']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {

                type:'line',
                data:[]
            },
            {

                data: [],
                type: 'line',

        }]
    });

    myChart3.setOption({
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data: ["服务业", "居民消费", "财政收入", "其他"]
        },
        series: [
            {
                name:'占比',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,

                data:[
                    // {value:335, name:'服务业'},
                    // {value:310, name:'居民消费'},
                    // {value:234, name:'财政收入'},
                    // {value:135, name:'其他'},

                ],

            }
        ]
    });

    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 : [],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'人均产值',
                type:'bar',
                barWidth: '60%',
                data:[]
            }
        ]
    });
    myChart5.setOption({
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: ['2014年', '2015年', '2016年', '2017年', '2018年']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name:'城镇化率',
            data: [820, 932, 901, 934, 1290],
            type: 'line',

        }]
    });
        var renderFunc = function () {
        $.get('<%=basePath%>/admin/EconomicDevelopment/getGDP.action').done(function (data) {
            // 填入数据
            myChart1.setOption({
                xAxis:{
                    data:data.dataYear
                },
                series: [
                    {
                        // 根据名字对应到相应的系列
                        name:'GDP增速',
                        type: 'line',
                        data: data.growthRate
                    },
                    {
                        // 根据名字对应到相应的系列
                        name:'GDP数值',
                        type: 'line',
                        data: data.number
                    }
                ]
            });
        })

        $.get('<%=basePath%>/admin/EconomicDevelopment/getPerCapitaGdp.action').done(function (data) {
            // 填入数据
            myChart2.setOption({
                xAxis:{
                    data:data.dataYear
                },
                series: [
                    {
                        // 根据名字对应到相应的系列
                        name:'人均GDP增速',
                        type: 'line',
                        data: data.growthRate
                    },
                    {
                    // 根据名字对应到相应的系列
                    name:'人均GDP数值',
                        type: 'line',
                    data: data.number
                }]
            });
        })

        $.get('<%=basePath%>/admin/EconomicDevelopment/getGdpOccupationRatio.action').done(function (data) {
            // 填入数据
            myChart3.setOption({
                legend: {
                    data: ["第三产业", "第二产业", "第一产业", "其他"]
                },

                series: [{
                    data: data.data.list
                }]
            });
        })
        $.get('<%=basePath%>/admin/EconomicDevelopment/getLaborProduction.action').done(function (data) {
            // 填入数据
            myChart4.setOption({
                xAxis:{
                    data:data.dataYear
                },
                series : [
                    {

                        data:data.growthRate
                    }
                ]
            });
        })
        $.get('<%=basePath%>/admin/EconomicDevelopment/getUrbanization.action').done(function (data) {
            // 填入数据
            myChart5.setOption({
                xAxis:{
                    data:data.dataYear
                },
                series : [
                    {

                        data:data.number
                    }
                ]
            });
        })

    };
    renderFunc();

</script>
</html>
