<%@ 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_two_header.jsp">
    <jsp:param name="title" value="防汛抗旱-旱情分析"/>
    <jsp:param name="falg" value="fh"/>
</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-5 yuanjiao">全市可用水总量</div>
                            <div class="ibox shortcut">
                                <div id="divChart1" style="width: 100%;height: 400px;"></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-6 yuanjiao">全市上游本月来水总量</div>
                            <div class="ibox shortcut">
                                <div id="divChart2" style="width: 100%;height: 400px;"></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-6 yuanjiao">全市下月预计来水总量</div>
                            <div class="ibox shortcut">
                                <div id="divChart3" style="width: 100%;height: 400px;"></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-7 yuanjiao">全市下月预测可用总水量</div>
                            <div class="ibox shortcut">
                                <div id="divChart4" style="width: 100%;height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-md-12">
    <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-5 yuanjiao" style="margin-top: 20px;">本市取水用户</div>
                    <div class="ibox-content-noline">
                        <div id="divChart11" style="margin-top: 30px; width: 100%;height: 680px;"></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-5 yuanjiao" style="margin-top: 20px;">区县用水情况</div>
                    <div class="ibox-content-noline">
                        <div style="margin-top: 30px; width: 100%;height: 680px;">
                            <samp>连续干旱地区排行榜</samp>
                            <table class="table table-bordered " style="margin-top: 50px;">
                                <tbody>
                                <tr id="tr">
                                    <th>地区</th>
                                    <th>降雨量（毫米）</th>
                                </tr>
                                </tbody>
                            </table>
                        </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'));
    option = {
        series: [{
            name: '全市可用水总量',
            type: 'liquidFill',
            data:[],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} 亿立方米',
                    textStyle: {
                        fontSize: 50,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '90%'
        }]
    };
    myChart1.setOption(option);
    var fnChart1=function(){
        $.get('<%=basePath%>/topic/water/floodAndDry/getquanshikeyongzongshuiliang.action').done(function (result) {
            myChart1.setOption({
                series: [{
                    data: [{
                        name:result.data,
                        value: 0.4
                    }, 0.5, 0.4, 0.3]
                }]
            });
        })
    }
    fnChart1();

    /*全市上游本月来水总量*/
    var myChart2 = echarts.init(document.getElementById('divChart2'));
    option = {
        series: [{
            name: '全市可用水总量',
            type: 'liquidFill',
            data:[],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} 亿立方米',
                    textStyle: {
                        fontSize: 50,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '90%'
        }]
    };
    myChart2.setOption(option);
    var fnChart2=function(){
        $.get('<%=basePath%>/topic/water/hanqing/getbenshishangyoubenyuelaishuizongliang.action').done(function (result) {
            myChart2.setOption({
                series: [{
                    data: [{
                        name:result.data,
                        value: 0.4
                    }, 0.5, 0.4, 0.3]
                }]
            });
        })
    }
    fnChart2();

    /*全市下月预计来水总量*/
    var myChart3 = echarts.init(document.getElementById('divChart3'));
    option = {
        series: [{
            name: '全市可用水总量',
            type: 'liquidFill',
            data:[],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} 亿立方米',
                    textStyle: {
                        fontSize: 50,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '90%'
        }]
    };
    myChart3.setOption(option);
    var fnChart3=function(){
        $.get('<%=basePath%>/topic/water/hanqing/getquanshixiayueyujilaishuizongliang.action').done(function (result) {
            myChart3.setOption({
                series: [{
                    data: [{
                        name:result.data,
                        value: 0.4
                    }, 0.5, 0.4, 0.3]
                }]
            });
        })
    }
    fnChart3();

    /*全市下月预测可用总水量*/
    var myChart4 = echarts.init(document.getElementById('divChart4'));
    option = {
        series: [{
            name: '全市可用水总量',
            type: 'liquidFill',
            data:[],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} 亿立方米',
                    textStyle: {
                        fontSize: 50,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '90%'
        }]
    };
    myChart4.setOption(option);
    var fnChart4=function(){
        $.get('<%=basePath%>/topic/water/hanqing/getquanshixiayueyucekeyongzongshuiliang.action').done(function (result) {
            myChart4.setOption({
                series: [{
                    data: [{
                        name:result.data,
                        value: 0.4
                    }, 0.5, 0.4, 0.3]
                }]
            });
        })
    }
    fnChart4();


    /*连续干旱地区排行图*/
    var myChart11 = echarts.init(document.getElementById('divChart11'));
    $.get('<%=basePath%>/topic/water/hanqing/getlianxuganhantu.action').done(function (data) {
        $('#tr').append('');
        var result=data.data.list;
        var html='';
        for(var i=0;i<result.length;i++){
            html+="<tr><th>"+result[i].name+"</th><th>"+result[i].value+"</th></tr>"
        }
        $('#tr').after(html);
        $.get('<%=basePath%>/resource/json/HS.json', function (geoJson) {
            echarts.registerMap('HS', geoJson);
            myChart11.setOption(option = {
                tooltip: {
                    trigger: 'item',
                   /* formatter: '{b}<br/>{c} (mm)'*/
                    formatter:function (params) {
                        var res = '';
                        res+=params.name+'<br/>';
                        res+=(params.value==null||params.value==undefined)?0:params.value+'mm';
                        return res;
                    }
                },

                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: {
                            '安平县': '安平县',
                            '饶阳县': '饶阳县',
                            '深州市': '深州市',
                            '武强县': '武强县',
                            '武邑县': '武邑县',
                            '阜城县': '阜城县',
                            '桃城区': '桃城区',
                            '景县': '景县',
                            '故城县': '故城县',
                            '枣强县': '枣强县',
                            '冀州区': '冀州区'
                        }
                    }

                ]

            });

        });

    })
</script>
</html>