<%@ 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/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: 220px;"></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="divChart8" 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="divChart9" style="width: 100%;height: 250px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 width">
                    <div class="row " style="margin-top: 20px;min-height: 160px;">
                        <div class="col-md-3 ">
                            <div class="ibox shortcut">
                                <div class="ibox-content-noline">
                                    <div id="divChart5" onclick="heliuGaikuang()" style="width: 100%;height: 150px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="ibox shortcut">
                                <div class="ibox-content-noline">
                                    <div onclick="jiangyu()" 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 onclick="shangyueyongshui()" id="divChart7" 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="divChart17" onclick="yongshui()" style="width: 100%;height: 150px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" >
                        <div class="col-md-12" style="margin-top: 20px;min-height: 380px;">
                            <button id="jiangyuOrjiangshui" type="button" style="display: none" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#" onclick="jiangyu()">上月各区县降雨详情</a></li>
                                <li><a href="#" onclick="shangyueyongshui()">上月各区县用水详情</a></li>
                            </ul>
                            <br>
                            <div class="col-md-12" style="margin-top: 15px" id="topTitle">
                                <div class="col-md-4 yuanjiao">衡水市主要河流概况</div>
                                <div class="ibox-content-noline">
                                    <div id="divChart13" style="width: 100%;height: 450px;">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12" style="margin-top: 15px" id="topTitle2">
                                <div class="ibox-content-noline">
                                    <div id="divChart18" style="width: 100%;height: 550px;">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 kuang1"  style="margin-top: 15px" id="topTitle3">
                                <div class="col-md-4 yuanjiao">当前各水库用水</div>
                                <div class="ibox-content-noline">
                                    <div id="divChart19" style="width: 100%;height: 225px;">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 kuang1" style="margin-top: 15px" id="topTitle4">
                                <div class="col-md-4 yuanjiao">各水库今年各月用水量</div>
                                <div class="ibox-content-noline">
                                    <div id="divChart20" style="width: 100%;height: 225px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="underId" class="row" style="margin-top: 20px;min-height: 200px;">
                        <div class="col-md-4">
                            <div class="ibox shortcut">
                                <div class="ibox-content-noline">
                                    <div id="divChart14" 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="divChart15" 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="divChart16" style="width: 100%;height: 150px;"></div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="col-md-3">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <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 kuang">
                            <div class="col-md-6 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 kuang">
                            <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>
    </div>
</div>
<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 myChart14 = echarts.init(document.getElementById('divChart14'));
    var myChart15 = echarts.init(document.getElementById('divChart15'));
    var myChart16 = echarts.init(document.getElementById('divChart16'));
    var myChart17 = echarts.init(document.getElementById('divChart17'));
    var myChart18 = echarts.init(document.getElementById('divChart18'));
    var myChart19 = echarts.init(document.getElementById('divChart19'));
    var myChart20 = echarts.init(document.getElementById('divChart20'));
    var colors = ['#87c6b5', 'red'];
    var option1 = {
        color: colors,

        title : {
            text: '',
            subtext:'单位:m',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            left: 'right',
            top:'20',
            textStyle:{
                color:'#fff',
                fontSize:14,
            },
            data:['警戒线']
        },
        xAxis: [
            {
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                type: 'category',
                data: [],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '水量',
                min: 0,
                max: '',
                axisLabel: {
                    formatter: '{value} ',
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            {
                show:false,
                min: 0,
                max: '',
                type: 'value',
                name: ''
            }
        ],
        series: [
            {
                name:'水位',
                type:'bar',
                data:[]
            },
            {
                name:'警戒线',
                type:'line',
                yAxisIndex: 1,
                data:[]
            }
        ]
    }
    myChart5.setOption({
        series: [{
            name: '河湖数量',
            type: 'liquidFill',
            data: [{
                name: ${riverCount!=null?riverCount:0},
                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: ${shangyuejiangyu!=null?shangyuejiangyu:0},
                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: ${shangyueyonghusi!=null?shangyueyonghusi:0} ,
                value: 0.8
            }, 0.7, 0.6, 0.5],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} 立方米',
                    textStyle: {
                        fontSize: 28
                    }
                }
            },
            radius: '90%'
        }]
    }) ;
    myChart17.setOption({
        series: [{
            name: '可用水总量',
            type: 'liquidFill',
            data: [{
                name: ${yongshui!=null?yongshui:0} ,
                value: 0.8
            }, 0.7, 0.6, 0.5],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} 立方米',
                    textStyle: {
                        fontSize: 28
                    }
                }
            },
            radius: '90%'
        }]
    }) ;
    var option8 = {
        color: colors,

        title : {
            text: '',
            subtext:'单位:mm',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            left: 'right',
            top:'20',
            textStyle:{
                color:'#fff',
                fontSize:14,
            },
            data:['警戒线']
        },
        xAxis: [
            {
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                type: 'category',
                data: [],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '水量',
                min: 0,
                max: '',
                axisLabel: {
                    formatter: '{value}',
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            {
                show:false,
                min: 0,
                max: '',
                type: 'value',
                name: ''
            }
        ],
        series: [
            {
                name:'降水量',
                type:'bar',
                data:[]
            },
            {
                name:'警戒线',
                type:'line',
                yAxisIndex: 1,
                data:[]
            }
        ]
    } ;
    myChart14.setOption({
        series: [{
            name: '衡水湖概况',
            type: 'liquidFill',
            data: [{
                name: ${hshmj!=null?hshmj:0},
                value: 0.4
            }, 0.5, 0.4, 0.3],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} km2',
                    textStyle: {
                        fontSize: 28,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '90%'
        }]
    }) ;

    myChart15.setOption({
        series: [{
            name: '衡水湖蓄水量',
            type: 'liquidFill',
            data: [{
                name: ${hshxs!=null?hshxs:0},
                value: 0.4
            }, 0.5, 0.4, 0.3],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} m3',
                    textStyle: {
                        fontSize: 28,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '90%'
        }]
    }) ;

    myChart16.setOption({
        series: [{
            name: '河流总蓄水量',
            type: 'liquidFill',
            data: [{
                name: ${hlxs!=null?hlxs:0},
                value: 0.4
            }, 0.5, 0.4, 0.3],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} m3',
                    textStyle: {
                        fontSize: 28,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '90%'
        }]
    }) ;

    var option9 = {
        title : {
            text: '',
            subtext:'单位: mm',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line',
            smooth: true
        }]
    };
    myChart10.setOption({
        title : {
            text: '',
            subtext:'单位:m3',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
        },
        series: [
            {
                name:'',
                type:'line',
                data:[]
            }
        ]
    });
    myChart11.setOption({
        title : {
            text: '',
            subtext:'单位:m3',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            },
        },
        series: [
            {
                name:'',
                type:'line',
                data:[]
            }
        ]
    });
    var option12 = {
        color: ['#87c6b5', 'red'],

        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 option19 = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'right',
            data: [],
            textStyle:{
                color:'#fff',
                fontSize:14,
            },
        },
        series : [
            {
                name: '当前各水库用水',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[],
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    var option20 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:[],
            textStyle:{
                color:'#fff',
                fontSize:14,
            },
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
        },
        series: []
    };
    //中间切换图片
    var renderFunc = function () {

        $.get('<%=basePath%>/topic/water/home/getxunqiyujing.action').done(function (result) {
            // 填入数据
            option1.xAxis[0].data = result.data.names ;
            option1.yAxis[0].max = result.data.max ;
            option1.yAxis[1].max = result.data.max ;
            option1.series[0].data = result.data.waters ;
            option1.series[1].data = result.data.warnings ;
            myChart1.setOption(option1);
        })

        $.get('<%=basePath%>/topic/water/home/getjinribaoyu.action').done(function (result) {
            // 填入数据
            option8.xAxis[0].data = result.data.names ;
            option8.yAxis[0].max = result.data.max ;
            option8.yAxis[1].max = result.data.max ;
            option8.series[0].data = result.data.rains ;
            option8.series[1].data = result.data.warnings ;
            myChart8.setOption(option8);
        })

        $.get('<%=basePath%>/topic/water/home/getjinrijiangyubianhua.action').done(function (result) {
            // 填入数据
            option9.xAxis.data = result.data.names ;
            option9.series[0].data = result.data.rains ;
            myChart9.setOption(option9);
        })
        $.get('<%=basePath%>/topic/water/home/getNongcunGongcheng.action').done(function (data) {
            // 填入数据
            option12.xAxis[0].data = data.names ;
            option12.series[0].data = data.values ;
            myChart12.setOption(option12);
        })

        $.get('<%=basePath%>/topic/water/home/getGeshuikuYongshui.action').done(function (data) {
            // 填入数据
            option19.legend.data = data.names ;
            option19.series[0].data = data.list ;
            myChart19.setOption(option19);
        })

        $.get('<%=basePath%>/topic/water/home/getYueyongshui.action').done(function (data) {
            // 填入数据
            option20.legend.data = data.titles
            var length = data.datas.length ;
            for (var i =0 ;i<length;i++){
                var serie = {}
                serie.name = data.datas[i].name ;
                serie.data = data.datas[i].value;
                serie.type = 'line' ;
                option20.series.push(serie);

            }
            myChart20.setOption(option20);
        })

        $.get('<%=basePath%>/topic/water/WholeCityWater/getTotleYear.action').done(function (data) {
            // 填入数据
            myChart10.setOption({
                xAxis: {
                    data: data.year
                },
                series: [
                    {
                        data: data.value,

                    }
                ]
            });
        });
        $.get('<%=basePath%>/topic/water/WholeCityWater/getFeiNongYear.action').done(function (data) {
            // 填入数据
            myChart11.setOption({
                xAxis: {
                    data: data.year
                },
                series: [
                    {
                        data: data.value,

                    }
                ]
            });
        });
        heliuGaikuang() ;
    };
    function heliuGaikuang() {
        $("#jiangyuOrjiangshui").hide() ;
        $("#topTitle").show() ;
        $("#topTitle2").hide() ;
        $("#underId").show() ;
        $("#topTitle3").hide() ;
        $("#topTitle4").hide() ;
        $.get('<%=basePath%>/topic/water/home/getHeliuGaikuang.action').done(function (data) {
            var array1 = data.array1;
            var array = array1.reverse();
            var startSopPoint = data.startSopPoint;
            var startSopPoint1 = startSopPoint.reverse();
            var riverImpoundages = data.riverImpoundages;
            var riverImpoundages1 = riverImpoundages.reverse();
            var normals = data.normals;
            var normals1 = normals.reverse();
            var warnings = data.warnings;
            var warnings1 = warnings.reverse();
            var flowThroughs = data.flowThroughs ;
            var flowThroughs1 = flowThroughs.reverse();
            var waterLevels = data.waterLevels ;
            var waterLevels1 = waterLevels.reverse();
            var option13 = {
                tooltip: {
                    show:true,
                    trigger: 'axis',
                    formatter: function (params) {
                        return array1[params[0].dataIndex]+'<br/>'+
                            '长度：'+params[0].data+'km<br/>'+
                            '起止点：'+startSopPoint1[params[0].dataIndex]+'<br/>'+
                            '蓄水量：'+riverImpoundages1[params[0].dataIndex]+'m3<br/>'+
                            '水位：'+waterLevels1[params[0].dataIndex]+'m<br/>'+
                            '正常水位：'+normals1[params[0].dataIndex]+'m<br/>'+
                            '警戒水位：'+warnings1[params[0].dataIndex]+'m<br/>'+
                            '所跨区县：'+flowThroughs1[params[0].dataIndex]+'<br/>' ;
                    },
                },
                grid: {
                    top: '2%',
                    bottom: '1%',
                    left:'5%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            show: false,
                            interval: 1,
                            textStyle: {
                                color: '#fff',
                                fontSize: 12
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }

                    }
                ],
                yAxis:{
                    type: 'category',
                    data: [],
                    axisLabel: {
                        color:"rgba(255,255,255,1)",
                        formatter: function (value) {
                            return '{' + value + '| }{value|'+array[value]+'}';
                        },
                        rich: {
                            value: {
                                align: 'center',
                                padding:[0,0,0,-5],
                                fontSize:14
                            }
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true
                    },
                    zlevel: 99
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: '60%',
                        barCategoryGap: '60%',
                        itemStyle: {
                            normal: {
                                barBorderRadius:[10, 10, 10, 10],
                                color: function(params) {
                                    if(params.data>70){
                                        return '#5cc84d'
                                    }else{
                                        return '#7dfba2'
                                    }

                                },

                                label: {
                                    show: true,
                                    position: 'right',
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: '14'
                                    },
                                    formatter: '{c}km'
                                }
                            }
                        },
                        data:[]
                    }]
            };
            option13.yAxis.data = data.array2 ;
            option13.series[0].data = data.riverLengths ;
            option13.series[0].data.reverse();

            myChart13.setOption(option13) ;
        })
    }
    function jiangyu() {
        myChart18.clear() ;
        $("#jiangyuOrjiangshui").show() ;
        $("#jiangyuOrjiangshui").html('上月各区县降雨详情') ;
        $("#topTitle2").show() ;
        $("#topTitle").hide() ;
        $("#underId").hide() ;
        $("#topTitle3").hide() ;
        $("#topTitle4").hide() ;
        $.get('<%=basePath%>/resource/json/HS.json', function (geoJson) {
            myChart18.hideLoading();
            echarts.registerMap('HK', geoJson);
            $.get('<%=basePath%>/topic/water/home/getGequJiangshui.action', function (data) {
                myChart18.setOption(option = {
                    title: {
                        // text: '各区县供水量 ',
                        textStyle: {
                            color: '#66e1e3',
                            fontSize: 15
                        },
                        top: 25
                    },

                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}<br/>{c} (毫米)'
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    visualMap: {
                        min: 10,
                        max: 70,
                        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
                        }
                    ]
                });
            })

        });
    }

    function shangyueyongshui() {
        myChart18.clear() ;
        $("#jiangyuOrjiangshui").show() ;
        $("#topTitle2").show() ;
        $("#jiangyuOrjiangshui").html('上月各区县用水详情') ;
        $("#topTitle").hide() ;
        $("#underId").hide() ;
        $("#topTitle3").hide() ;
        $("#topTitle4").hide() ;
        $.get('<%=basePath%>/resource/json/HS.json', function (geoJson) {
            myChart18.hideLoading();
            echarts.registerMap('HK', geoJson);
            $.get('<%=basePath%>/topic/water/home/getGequYongshui.action', function (data) {
                myChart18.setOption(option = {
                    title: {
                        // text: '各区县供水量 ',
                        textStyle: {
                            color: '#66e1e3',
                            fontSize: 15
                        },
                        top: 25
                    },

                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}<br/>{c} (立方米)'
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    visualMap: {
                        min: 200,
                        max: 1500,
                        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
                        }
                    ]
                });
            })

        });
    }

    function yongshui() {
        $("#topTitle3").show() ;
        $("#topTitle4").show() ;
        $("#jiangyuOrjiangshui").hide() ;
        $("#topTitle").hide() ;
        $("#topTitle2").hide() ;
        $("#underId").hide() ;
    }
    renderFunc();
</script>
</body>
</html>