<%@ 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();
%>
<html>
<head>
    <jsp:include page="../../../common/dark/head.jsp"></jsp:include>
</head>
<body>
<jsp:include page="../../../common/dark/body_pre.jsp">
    <jsp:param name="title" value="${title}"/>
</jsp:include>
<div class="row clearfix"
     style="background-image: url(<%=basePath%>/resource/images/water/bg-water1.png);background-repeat: no-repeat;background-size:100% 100%;">
    <%--<div class="col-md-12" style="margin: 20px 0;">--%>
    <%--<H1 style="color: #66e1e3;padding: 8px 20px;text-align: center">衡水水务运行情况一览</H1>--%>
    <%--</div>--%>
    <div class="col-md-12" style="margin: 20px 0;">
        <div class="col-md-3">
            <div class="row" style="margin-top: 30px;">
                <div class="col-md-12 kuang1">
                    <div class="col-md-5 yuanjiao">一、二、三产业量</div>
                    <div class="ibox shortcut">
                        <div class="ibox-content-noline">
                            <div id="divChart3" style="width: 100%;height: 220px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 20px;">
                <div class="col-md-12 kuang1">
                    <div class="col-md-4 yuanjiao">城镇化率</div>
                    <div class="ibox shortcut">
                        <div class="ibox-content-noline">
                            <div id="divChart11" style="width: 100%;height: 250px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 20px;">
                <div class="col-md-12 kuang1">
                    <div class="col-md-4 yuanjiao">各区县占比</div>
                    <div class="ibox shortcut">
                        <div class="ibox-content-noline">
                            <div id="divChart5" style="width: 100%;height: 250px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 width">
            <%--<div class="row">--%>
            <%--<div class="col-md-12">--%>
            <%--<H1 style="color: #66e1e3;text-align: center; margin: -24px 0 0 0;">衡水水务运行情况一览</H1>--%>
            <%--</div>--%>
            <%--</div>--%>
            <div class="row" style="margin-top: 20px;min-height: 100px;">
                <input id="value" type="hidden" value="${value}">
                <input id="value1" type="hidden" value="${value1}">
                <input id="value2" type="hidden" value="${value2}">
                <input id="value3" type="hidden" value="${value3}">
                <div class="col-md-3">
                    <div class="ibox shortcut">
                        <%--<div class="ibox-title-noline">--%>
                        <%--<span style="color: #67b168">水资源总量</span>--%>
                        <%--</div>--%>
                        <div class="ibox-content-noline">
                            <div id="divChart6" style="width: 100%;height: 150px;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="ibox shortcut">
                        <div class="ibox-content-noline">
                            <div id="divChart8" style="width: 100%;height: 150px;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="ibox shortcut">
                        <div class="ibox-content-noline">
                            <div id="divChart9" style="width: 100%;height: 150px;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="ibox shortcut">
                        <div class="ibox-content-noline">
                            <div id="divChart10" style="width: 100%;height: 150px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 20px;min-height: 500px;">
                <div class="col-md-12" style="margin-top: 15px">
                    <%--<div class="col-md-4 yuanjiao">各区县用水量</div>--%>
                    <div class="ibox-content-noline">
                        <div id="divChart4" style="width: 100%;height: 550px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="row" style="margin-top: 30px;">
                <div class="col-md-12 kuang1">
                    <div class="col-md-5 yuanjiao">GDP增速变化</div>
                    <div class="ibox shortcut">
                        <div class="ibox-content-noline">
                            <div id="divChart1" style="width: 100%;height: 250px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 20px;">
                <div class="col-md-12 kuang1">
                    <div class="col-md-5 yuanjiao">一、二、三产业增速</div>
                    <div class="ibox shortcut">
                        <div class="ibox-content-noline">
                            <div id="divChart7" style="width: 100%;height: 220px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 20px;">
                <div class="col-md-12 kuang1">
                    <div class="col-md-5 yuanjiao">人均GDP变化</div>
                    <div class="ibox shortcut">
                        <div class="ibox-content-noline">
                            <div id="divChart2" style="width: 100%;height: 250px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<jsp:include page="../../../common/dark/body_post.jsp"></jsp:include>
</body>
<script type="text/javascript" src="<%=basePath%>/resource/plugins/echarts/echarts-liquidfill.js"></script>
<script>
    var value = $("#value").val() ;
    var value1 = $("#value1").val() ;
    var value2 = $("#value2").val() ;
    var value3 = $("#value3").val() ;
    var myChart1 = echarts.init(document.getElementById('divChart1'));
    var myChart2 = echarts.init(document.getElementById('divChart2'));
    var myChart3 = echarts.init(document.getElementById('divChart3'));
    var myChart7 = echarts.init(document.getElementById('divChart7'));
    var myChart4 = echarts.init(document.getElementById('divChart4'));
    var myChart5 = echarts.init(document.getElementById('divChart5'));
    var myChart6 = echarts.init(document.getElementById('divChart6'));
    var myChart11 = echarts.init(document.getElementById('divChart11'));
    var myChart8 = echarts.init(document.getElementById('divChart8'));
    var myChart9 = echarts.init(document.getElementById('divChart9'));
    var myChart10 = echarts.init(document.getElementById('divChart10'));


    myChart6.setOption({
        series: [{
            name: 'GDP总量',
            type: 'liquidFill',
            color: ['#fd3e33'],
            // outline  外边
            outline: {
                // show: false
                itemStyle: {
                    borderWidth: 5,
                    borderColor: '#fd3e33',
                },
            },
            data: [{
                name: value,
                value: 0.4
            }, 0.5, 0.4, 0.3],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} 亿元',
                    textStyle: {
                        fontSize: 28
                    }
                }
            },
            radius: '80%'
        }]
    }) ;
    myChart8.setOption({
        series: [{
            name: '第一产业',
            type: 'liquidFill',
            color: ['#49d088'],
            outline: {
                // show: false
                itemStyle: {
                    borderWidth: 5,
                    borderColor: '#13FDCE',
                },
            },
            data: [{
                name: value1,
                value: 0.4
            }, 0.5],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} 亿元',
                    textStyle: {
                        fontSize: 28
                    }
                }
            },
            radius: '80%'
        }]
    }) ;
    myChart9.setOption({
        series: [{
            name: '第二产业',
            type: 'liquidFill',
            color: ['#fcbf00'],
            outline: {
                // show: false
                itemStyle: {
                    borderWidth: 5,
                    borderColor: '#fcbf00',
                },
            },
            data: [{
                name: value2,
                value: 0.4
            }, 0.5],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} 亿元',
                    textStyle: {
                        fontSize: 28
                    }
                }
            },
            radius: '80%'
        }]
    }) ;
    myChart10.setOption({
        series: [{
            name: '第三产业',
            type: 'liquidFill',
            outline: {
                // show: false
                itemStyle: {
                    borderWidth: 5,
                },
            },
            data: [{
                name: value3,
                value: 0.4
            }, 0.5],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} 亿元',
                    textStyle: {
                        fontSize: 28
                    }
                }
            },
            radius: '80%'
        }]
    }) ;

    myChart11.setOption({
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: [],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
        },
        series: [{
            name:'城镇化率',
            data: [820, 932, 901, 934, 1290],
            type: 'line',

        }]
    });


    myChart1.setOption({
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: [],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff'
                }
            },
        },
        series: [{
            data: [],
            type: 'line',

        }]
    });
    myChart2.setOption({
        // legend: {
        //     orient: 'vertical',
        //     x: 'left',
        //     data:['人均GDP增速','人均GDP数值']
        // },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: [],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff'
                }
            },
        },
        series: [
            {

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

                data: [],
                type: 'line',

            }]
    });


    // var data = [0];
    // var xMax = 0;
     //var axisColor = '#990';
    option = {
        tooltip: {
            trigger: 'axis',
            formatter: '{b}<br/>{c} (%)'
        },
        // legend: {
        //     data: ["第三产业", "第二产业", "第一产业"]
        // },
        yAxis: [{
            min:0,
            max:100,
            position:"left",
            offset:-110,
            axisLine: {
                show: false,
            },
            axisLabel : {
                formatter: '{value}',
                textStyle: {
                    color: '#fff'
                }
            },
            splitLine: {
                show: false,
                // color:'#fff',
            },
            splitNumber :10,
        },
            {
                min:0,
                max:100,
                position:"left",
                offset:-190,
                axisLabel : {
                    formatter: '{value}',
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: true,
                    color:'#091',
                },
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                    // color:'#fff',
                },
                splitNumber :10,
            },
            {
                min:0,
                max:100,
                position:"left",
                offset:-30,
                axisLabel : {
                    formatter: '{value}',
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: true,
                    color:['#FFF'],
                },
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                    //color:'#fff',
                },
                splitNumber :10,
            }
        ],
        xAxis: [{
            type: 'category',

            data: ['第一产业','第二产业','第三产业'],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            axisLine: {
                //color:'#093',
                show: false,
            }

        }],
        series: [
            {
            name: '',
            type: 'bar',
            barWidth: 20,
            silent: true,

            itemStyle: {
                normal: {
                    barBorderRadius:20, //设置圆角角度为0
                }
            },

            barGap: '-100%',

            barCategoryGap: '60%',
            data: [
            ],
        }]
    };

    myChart3.setOption(option);
    $.get('<%=basePath%>/admin/newEconomicDevelopment/getDistrictCounty.action').done(function (data) {
        $.get('<%=basePath%>/resource/json/HS.json', function (geoJson) {

            echarts.registerMap('HS', geoJson);


            myChart4.setOption(option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c} (亿元)'
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                visualMap: {
                    min: 80,
                    max: 220,
                    text: ['高', '低'],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['yellow', 'lightskyblue', 'orangered']
                    },
                    textStyle: {
                        color: '#fff'
                    }
                },

                series: [
                    {
                        name: 'GDP',
                        type: 'map',
                        mapType: 'HS', // 自定义扩展图表类型
                        itemStyle: {
                            normal: {label: {show: true}},
                            emphasis: {label: {show: true}}
                        },
                        data: data.data.list,
                        // 自定义名称映射
                        nameMap: {
                            '安平县': '安平县',
                            '饶阳县': '饶阳县',
                            '深州市': '深州市',
                            '武强县': '武强县',
                            '武邑县': '武邑县',
                            '阜城县': '阜城县',
                            '桃城区': '桃城区',
                            '景县': '景县',
                            '故城县': '故城县',
                            '枣强县': '枣强县',
                            '冀州区': '冀州区'
                        }
                    }

                ]

            });

        });

    })
    myChart5.setOption({
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
            {
                name:'占比',
                type:'pie',
                radius: ['70%', '0'],
                avoidLabelOverlap: false,

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

                ],

            }
        ]
    });


    myChart7.setOption({
        // legend: {
        //     orient: 'vertical',
        //     x: 'left',
        //     data:['第一产业','第二产业','第三产业']
        //
        // },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: [],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff'
                }
            },
        },
        series: [
            {
                type:'line',
                data:[]
            },
            {

                data: [],
                type: 'line',

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

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

        $.get('<%=basePath%>/admin/newEconomicDevelopment/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,
                        itemStyle:{
                            normal:{
                                color:'#ffdb5c'
                            }
                        },
                    }
                ]
            });
        })

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

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

                series: [{
                    data: data.data.list

                }]
            });
            // myChart4.setOption({
            //     // legend: {
            //     //     data: data.names
            //     // },
            //
            //     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--%>
                        <%--}--%>
                    <%--]--%>
                <%--});--%>
            <%--})--%>

        $.get('<%=basePath%>/admin/newEconomicDevelopment/getGdpOccupationRatio.action').done(function (data) {
            // 填入数据
            myChart3.setOption({

                series: [{
                    data: data.data.list

                }]
            });
        })

        $.get('<%=basePath%>/admin/newEconomicDevelopment/getGdpOccupationRatio2.action').done(function (data) {
            // 填入数据
            myChart7.setOption({
                xAxis:{
                    data:data.dataYear
                },
                series: [
                    // 根据名字对应到相应的系列

                    {
                        // 根据名字对应到相应的系列
                        name:'第一产业(%)',
                        type: 'line',
                        data: data.value1,
                        itemStyle:{
                            normal:{
                                color:'#36a3db'
                            }
                        },
                    },
                    {
                        // 根据名字对应到相应的系列
                        name:'第二产业(%)',
                        type: 'line',
                        data: data.value2,
                        itemStyle:{
                            normal:{
                                color:'#ff9f7e'
                            }
                        },
                    }
                    ,
                    {
                        // 根据名字对应到相应的系列
                        name:'第三产业(%)',
                        type: 'line',
                        data: data.value3,
                        itemStyle:{
                            normal:{
                                color:'#d95faa'
                            }
                        }
                    }
                ]
            });
        })





    };
    renderFunc();

</script>
</html>
