@{
    ViewBag.Title = "传染病数据地图";
}

<table style="width:100%" class="t1">
    <tr>
        <td width="100px" class="ltd">开始日期：</td>
        <td width="120px" class="rtd"><input id="bdt" /></td>
        <td width="100px" class="ltd">结束日期：</td>
        <td width="120px" class="rtd"><input id="edt" /></td>
        <td width="100px" class="ltd">病种：</td>
        <td width="120px" class="rtd"><input id="bz" type="text" /></td>
        <td class="rtd"><input id="cx" value="查询" type="button" class="l-button" /></td>
    </tr>
</table>
<div style="width:800px;float:left;height:250px;    background-color: #ffffff;
    box-shadow: 0px 4px 12px rgba(34, 25, 25, 0.2);
    margin: 0.25rem;
    margin-top: 0.5rem;" id="chart"></div>
<div style="clear:both"></div>
<div id="grid"></div>
@section scripts{
    <script type="text/javascript" src="@Url.Content("~/Scripts/echarts.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/bmap.js")"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=b7SC7Zn2Zw9kmxnycqPt4xeH"></script>
    <script src="@Url.Content("~/Scripts/macarons.js")"></script>
    <script type="text/javascript">

        var echart;
        var geoCoordMap = {};
        $(function () {
            $("#bz").ligerComboBox({url:"@Url.Action("getbz")",valueField : 'bzmc', textField: 'bzmc'
        });
            $("#bdt").ligerDateEditor({ width: 100 });
            $("#edt").ligerDateEditor({ width: 100 });
            echart = echarts.init(document.getElementById("chart"), "macarons");
            var sftjoption = {
                title: {
                    text: "传染病地区发病分析"
                }
            };
            $.ajax({
                url: "@Url.Action("getxzgeo")", type: "post", dataType: "json",
                success: function (data) {
                    geoCoordMap = data;
                }
            });
            echart.setOption(sftjoption);
            $("#grid").ligerGrid({
                title: "传染病地区发病分析",
                width: "98%", height: "98%", data: { Rows: [] },
                columns: [
                    { name: "dqname", display: "地区名称", width: 200, align: "left" },
                    { name: "fbrs", display: "发病人数", width: 200, align: "right" }
                ], usePager: false

            });
            $("#cx").bind("click", function () {

                $.ajax({
                    url: "@Url.Action("getcrbdqfx")", type: "post", datatType: "json", data: { bdt: $("#bdt").val(), edt: $("#edt").val(), bz: liger.get("bz").getValue() }
                    , success: function (data) {
                        $.ligerDialog.closeWaitting();
                        data = $.parseJSON(data);
                        liger.get("grid").set("data", data);
                        var x = [];
                        var y = [];
                        var datas = [];
                        for (var i = 0; i < data.Rows.length; i++) {
                            x.push(data.Rows[i].dqname);
                            y.push(data.Rows[i].fbrs);
                            datas.push({ name: data.Rows[i].dqname, value: data.Rows[i].fbrs });
                        }
                        var convertData = function (datas) {
                            var res = [];
                            for (var i = 0; i < datas.length; i++) {
                                var geoCoord = geoCoordMap[datas[i].name];
                                if (geoCoord) {
                                    res.push({
                                        name: datas[i].name,
                                        value: geoCoord.concat(datas[i].value)
                                    });
                                }
                            }
                            return res;
                        };
                        var op = {
                            title: {
                                text: "传染病地区发病分析",
                                subtext: $("#bdt").val() + '-' + $('#edt').val()
                            }
                            ,

                            tooltip: {
                                trigger: 'item'
                            },
                            bmap: {
                                center: [116.310048, 37.464326],
                                zoom: 10,
                                roam: true
                            },

                            series: [
                                {

                                    type: 'effectScatter',
                                    coordinateSystem: 'bmap',
                                    data: convertData(datas.sort(function (a, b) {
                                        return b.value - a.value;
                                    })),//前5位
                                    symbolSize: function (val) {
                                        return val[2]/4;//点扩散的大小
                                    },
                                    rippleEffect: {
                                        brushType: 'stroke'
                                    },
                                    hoverAnimation: true,
                                    label: {
                                        normal: {
                                            formatter: '{b}',
                                            position: 'right',
                                            show: true
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#555',
                                            shadowBlur: 10,
                                            shadowColor: '#333'
                                        }
                                    },
                                    zlevel: 1

                                }
                            ]
                        };
                        echart.setOption(op);


                    }
                    , error: function (d) {
                        $.ligerDialog.closeWaitting();
                        $.ligerDialog.alert(d.responseText);
                    }
                    , beginSend: function () {
                        $.ligerDialog.waitting("正在分析请稍后……");
                    }
                });

            });
        });
    </script>
}