<%@ page import="org.apache.commons.lang.StringUtils" %>
<%@ page import="com.lightinit.hsdatashow.dictionary.DicWaterWorks" %>
<%@ 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 lang="en">
<head>
    <jsp:include page="../../../../common/newDark/head.jsp"></jsp:include>
</head>
<body>
<jsp:include page="../../../../common/newDark/body_header.jsp">
    <jsp:param name="title" value="农村水利概况"/>
</jsp:include>

<div class="layout">
    <div class="container-fluid">
        <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;">
                <div class="col-md-3">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">农村供水总人口</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 kuang">
                            <div class="col-md-4 yuanjiao">农村集中供水工程总量</div>
                            <div class="ibox shortcut">
                                <div class="ibox-content-noline">
                                    <div id="divChart4" style="width: 100%;height: 250px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">集中供水受益人口总数</div>
                            <div class="ibox shortcut">
                                <div class="ibox-content-noline">
                                    <div id="divChart7" style="width: 100%;height: 250px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">今年投资总额</div>
                            <div class="ibox shortcut">
                                <div class="ibox-content-noline">
                                    <div id="divChart10" style="width: 100%;height: 250px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-9">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12"style="padding: 0">
                            <div class="col-md-6" style="padding: 0;width:49%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-4 yuanjiao">各区县人口</div>
                                    <div class="ibox shortcut">
                                        <div class="ibox-content-noline">
                                            <div id="divChart2" style="width: 100%;height: 250px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6"style="padding: 0;width:49%;margin-left: 2%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-4 yuanjiao">各区县贫困人口</div>
                                    <div class="ibox shortcut">
                                        <div class="ibox-content-noline">
                                            <div id="divChart3" style="width: 100%;height: 250px;"></div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12"style="padding: 0">
                            <div class="col-md-6" style="padding: 0;width:49%">
                                <div class="col-md-12 kuang" >
                                    <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 class="col-md-6"style="padding: 0;width:49%;margin-left: 2%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-4 yuanjiao">各区县构成</div>
                                    <div class="ibox shortcut">
                                        <div class="ibox-content-noline">
                                            <div id="divChart6" style="width: 100%;height: 250px;"></div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12"style="padding: 0">
                            <div class="col-md-6" style="padding: 0;width:49%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-4 yuanjiao">受益人口</div>
                                    <div class="ibox shortcut">
                                        <div class="ibox-content-noline">
                                            <div id="divChart8" style="width: 100%;height: 250px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6"style="padding: 0;width:49%;margin-left: 2%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-4 yuanjiao">各区县构成</div>
                                    <div class="ibox shortcut">
                                        <div class="ibox-content-noline">
                                            <div id="divChart9" style="width: 100%;height: 250px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12"style="padding: 0">
                            <div class="col-md-6" style="padding: 0;width:49%">
                                <div class="col-md-12 kuang" >
                                    <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="col-md-6"style="padding: 0;width:49%;margin-left: 2%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-4 yuanjiao">各区县构成</div>
                                    <div class="ibox shortcut">
                                        <div class="ibox-content-noline">
                                            <div id="divChart12" style="width: 100%;height: 250px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="<%=basePath%>/resource/plugins/echarts/echarts-liquidfill.js"></script>
<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'));
    var myChart9 = echarts.init(document.getElementById('divChart9'));
    var myChart10 = echarts.init(document.getElementById('divChart10'));
    var myChart11 = echarts.init(document.getElementById('divChart11'));
    var myChart12 = echarts.init(document.getElementById('divChart12'));

    myChart1.setOption({
        series: [{
            name: '农村供水总人口',
            type: 'liquidFill',
            data: [{
                name: ${gongshuiRenkou!=null?gongshuiRenkou:0},
                value: 0.4
            }, 0.5, 0.4, 0.3],
            label: {
                normal: {
                    formatter: '{a}\n\n{b}万',
                    textStyle: {
                        fontSize: 28,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '90%'
        }]
    }) ;
    myChart4.setOption({
        series: [{
            name: '农村集中供水工程总量',
            type: 'liquidFill',
            data: [{
                name: ${gongchengZongliang!=null?gongchengZongliang:0},
                value: 0.4
            }, 0.5, 0.4, 0.3],
            label: {
                normal: {
                    formatter: '{a}\n\n{b}',
                    textStyle: {
                        fontSize: 28,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '90%'
        }]
    }) ;
    myChart7.setOption({
        series: [{
            name: '集中供水受益人口总数',
            type: 'liquidFill',
            data: [{
                name: ${shouyiRenkou!=null?shouyiRenkou:0},
                value: 0.4
            }, 0.5, 0.4, 0.3],
            label: {
                normal: {
                    formatter: '{a}\n\n{b}',
                    textStyle: {
                        fontSize: 28,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '90%'
        }]
    }) ;
    myChart10.setOption({
        series: [{
            name: '当年投资总额',
            type: 'liquidFill',
            data: [{
                name: ${touzizongshu!=null?touzizongshu:0},
                value: 0.4
            }, 0.5, 0.4, 0.3],
            label: {
                normal: {
                    formatter: '{a}\n\n{b}',
                    textStyle: {
                        fontSize: 28,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '90%'
        }]
    }) ;
    var option2 = {
        color: ['#94c4b8'],

        title : {
            text: '',
            subtext:'单位:万人',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999'
                }
            }
        },
        xAxis: [
            {
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                type: 'category',
                data: [],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '水量',
                axisLabel: {
                    formatter: '{value} ',
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            {
                show:false,
                type: 'value',
                name: ''
            }
        ],
        series: [
            {
                type:'bar',
                data:[]
            }
        ]
    }
    var option3 = {
        color: ['#d6a296'],

        title : {
            text: '',
            subtext:'单位:人',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999'
                }
            }
        },
        xAxis: [
            {
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                type: 'category',
                data: [],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '水量',
                axisLabel: {
                    formatter: '{value} ',
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            {
                show:false,
                type: 'value',
                name: ''
            }
        ],
        series: [
            {
                type:'bar',
                data:[]
            }
        ]
    }
    var option5 = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} 个"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: []
        },
        series : [
            {
                name: '各类工程分布',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    var option6 = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} 个"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: []
        },
        series : [
            {
                name: '各类工程分布',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    var option11 = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} "
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: []
        },
        series : [
            {
                name: '各类工程分布',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    var option12 = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} "
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: []
        },
        series : [
            {
                name: '各类工程分布',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    var option8 = {
        color: ['#87c6b5'],
        title : {
            text: '',
            subtext:'单位:人',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999'
                }
            }
        },
        xAxis: [
            {
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                type: 'category',
                data: ['总人数','贫困','学生'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '水量',
                axisLabel: {
                    formatter: '{value} ',
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            {
                show:false,
                type: 'value',
                name: ''
            }
        ],
        series: [
            {
                type:'bar',
                data:[]
            }
        ]
    }
    var option9 = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} "
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: []
        },
        series : [
            {
                name: '各区县构成',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    var renderFunc = function () {
        $.get('<%=basePath%>/topic/water/works/getGequxianRenkou.action?type=<%=DicWaterWorks.RENKOU%>').done(function (data) {
            option2.xAxis[0].data = data.names ;
            option2.series[0].data = data.values ;
            myChart2.setOption(option2);
        })

        $.get('<%=basePath%>/topic/water/works/getGequxianRenkou.action?type=<%=DicWaterWorks.PINKUN%>').done(function (data) {
            option3.xAxis[0].data = data.names ;
            option3.series[0].data = data.values ;
            myChart3.setOption(option3);
        })

        $.get('<%=basePath%>/topic/water/works/getShouyiRenkouFenlei.action').done(function (data) {
            option8.series[0].data = [data.allValue,data.pkValue,data.xsValue] ;
            myChart8.setOption(option8);
            myChart8.on('click', function (params) {
                shouyiGoucheng(params.name) ;
            });
        })

        $.get('<%=basePath%>/topic/water/works/getGongchengFenbu.action').done(function (data) {
            option5.series[0].data = data ;
            myChart5.setOption(option5);
            myChart5.on('click', function (params) {
                gongchengGexian(params.name) ;
            });
        })

        $.get('<%=basePath%>/topic/water/works/getTouziGoucheng.action').done(function (data) {
            option11.series[0].data = data ;
            myChart11.setOption(option11);
            myChart11.on('click', function (params) {
                touziGoucheng(params.name) ;
            });
        })

        gongchengGexian('集中式千人以上') ;
        touziGoucheng('中央财政') ;
        shouyiGoucheng('总人数')
    };
    function gongchengGexian(type) {
        $.get('<%=basePath%>/topic/water/works/getGongchengGexian.action?type='+type).done(function (data) {
            option6.series[0].data = data ;
            myChart6.setOption(option6);
        })
    }

    function touziGoucheng(type) {
        $.get('<%=basePath%>/topic/water/works/getTouziQuxian.action?type='+type).done(function (data) {
            option12.series[0].data = data ;
            myChart12.setOption(option12);
        })
    }

    function shouyiGoucheng(type) {
        $.get('<%=basePath%>/topic/water/works/getShouyiRenkouFenbu.action?type='+type).done(function (data) {
            option9.series[0].data = data ;
            myChart9.setOption(option9);
        })
    }

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