<%@ 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/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-4 yuanjiao">水资源总量</div>
                    <div class="ibox shortcut">
                        <div class="ibox-content-noline">
                            <div id="divChart1" 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="divChart8" 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="divChart9" style="width: 100%;height: 250px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 width">s
            <%--<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="shuiziyuan" type="hidden" value="${shuiziyuan.total}">
                <input id="xushui" type="hidden" value="${xushui.total}">
                <input id="jiangshui" type="hidden" value="${jiangshui.total}">
                <div class="col-md-4">
                    <div class="ibox shortcut">
                        <%--<div class="ibox-title-noline">--%>
                            <%--<span style="color: #67b168">水资源总量</span>--%>
                        <%--</div>--%>
                        <div class="ibox-content-noline">
                            <div id="divChart5" style="width: 100%;height: 150px;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="ibox shortcut">
                        <div class="ibox-content-noline">
                            <div id="divChart6" style="width: 100%;height: 150px;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="ibox shortcut">
                        <div class="ibox-content-noline">
                            <div id="divChart7" 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="divChart13" 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">降水总量</div>
                    <div class="ibox shortcut">
                        <div class="ibox-content-noline">
                            <div id="divChart10" 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="divChart11" 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">人均供水量</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>
<jsp:include page="../../../common/dark/body_post.jsp"></jsp:include>
<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 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'));
    var myChart13 = echarts.init(document.getElementById('divChart13'));
    var shuiziyuan = $("#shuiziyuan").val() ;
    var xushui = $("#xushui").val() ;
    var jiangshui = $("#jiangshui").val() ;
    myChart1.setOption({
        tooltip: {
            trigger: 'axis',
            formatter: '{c} (亿立方米)'
        },

        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            }
        },
        series: [
            {
                name:'总量',
                type:'line',
                stack: '总量',
                data:[]
            }
        ]
    });
    myChart5.setOption({
        series: [{
            name: '水资源总量',
            type: 'liquidFill',
            data: [{
                name: shuiziyuan,
                value: 0.4
            }, 0.5, 0.4, 0.3],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} 亿立方米',
                    textStyle: {
                        fontSize: 28,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '90%'
        }]
    }) ;
    myChart6.setOption({
        series: [{
            name: '蓄水总量',
            type: 'liquidFill',
            data: [{
                name: xushui,
                value: 0.4
            }, 0.5, 0.4, 0.3],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} 亿立方米',
                    textStyle: {
                        fontSize: 28
                    }
                }
            },
            radius: '90%'
        }]
    }) ;
    myChart7.setOption({
        series: [{
            name: '降水总量',
            type: 'liquidFill',
            data: [{
                name: jiangshui,
                value: 0.8
            }, 0.7, 0.6, 0.5],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} mm',
                    textStyle: {
                        fontSize: 28
                    }
                }
            },
            radius: '90%'
        }]
    }) ;
    myChart8.setOption({
        tooltip: {
            formatter: '{b}:\n\n{c} (亿立方米)'
        },
        xAxis: {
            data: [],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                },
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                },
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: [{
            data: [],
            type: 'bar',
            itemStyle:{
                normal:{
                    color:'#73c8b4'
                }
            },
        }
        ]
    });
    myChart11.setOption( {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} (万立方米)"
        },
        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: []
            }
        ]
    });
    myChart9.setOption({
        tooltip : {
            trigger: 'axis'
        },
        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 : [],
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            }
        ],
        series : []
    });
    myChart10.setOption({
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            },
            formatter: "{a} <br/>{b}: {c} (mm)"
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            }
        },
        dataZoom: [{
            type: 'inside',
            start: 0,
            end: 100
        }, {
            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:'降水总量',
                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: []
            }
        ]
    }) ;
    myChart12.setOption({
        tooltip: {
            trigger: 'item',
            formatter: "{b}: {c} (立方米)"
        },
        xAxis: {
            type: 'category',
            data: [],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: true,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            }
        },
        series: [{
            data: [],
            type: 'line',
            smooth: true
        }]
    }) ;
    myChart13.showLoading();
    $.get('<%=basePath%>/resource/json/HS.json', function (geoJson) {
        myChart13.hideLoading();
        echarts.registerMap('HK', geoJson);
        $.get('<%=basePath%>/admin/waterThing/getWaterAllCounty.action', function (data) {
            myChart13.setOption(option = {
                title: {
                    text: '各区县供水量 ',
                    textStyle: {
                        color: '#66e1e3',
                        // textBorderColor: '#f7fa56',
                        // textBorderWidth: 5,
                        fontSize: 15
                    },
                    top: 25
                    // subtext: '人口密度数据来自Wikipedia',
                    // sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
                },

                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c} (万立方米)'
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                visualMap: {
                    min: 5000,
                    max: 30000,
                    text:['高','低'],
                    realtime: false,
                    calculable: true,
                    //show: false,
                    inRange: {
                        color: ['lightskyblue','yellow', 'orangered']
                    },
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '衡水市各地区用水量',
                        type: 'map',
                        mapType: 'HK', // 自定义扩展图表类型
                        itemStyle:{
                            normal:{label:{show:true}},
                            emphasis:{label:{show:true}}
                        },
                        data: data
                    }
                ]
            });
        })

    });
    var renderFunc = function () {

        $.get('<%=basePath%>/admin/waterThing/getChangeWaterStorageAggregate.action').done(function (data) {
            // 填入数据
            myChart1.setOption({
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.categories
                },
                series: [
                    {
                        name: '总量',
                        type: 'line',
                        stack: '总量',
                        data: data.value
                    }
                ]
            })
        })

        $.get('<%=basePath%>/admin/waterThing/getWaterSupplyAggregate.action').done(function (data) {
            // 填入数据
            myChart11.setOption({
                series: [{
                    // 根据名字对应到相应的系列
                    name: '供水量',
                    data: data
                }]
            });
        })

        $.get('<%=basePath%>/admin/waterThing/getChangeWaterStorageAggregate.action').done(function (data) {
            // 填入数据
            myChart8.setOption({
                xAxis: {
                    data: data.categories
                },
                series: [{
                    // 根据名字对应到相应的系列
                    data: data.value
                }]
            });
        })

        $.get('<%=basePath%>/admin/waterThing/getWaterSupplyMain.action').done(function (data) {
            // 填入数据
            myChart9.setOption({
                xAxis : [
                    {
                        type : 'category',
                        data : data.years
                    }
                ],
                series : data.series
            });
        })
        $.get('<%=basePath%>/admin/waterThing/getPrecipitationAggregate.action').done(function (data) {
            // 填入数据
            myChart10.setOption({
                xAxis: {
                    data: data.categories
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '降水总量',
                    data: data.value
                }]
            });
        })
        $.get('<%=basePath%>/admin/waterThing/getWaterConsumptionPerCapita.action').done(function (data) {
            // 填入数据
            myChart12.setOption({
                xAxis: {
                    data: data.categories
                },
                series: [{
                    // 根据名字对应到相应的系列
                    data: data.value
                }]
            });
        })
    };
    renderFunc();
</script>
</body>
</html>