@{
    ViewBag.Title = "慢病地图分析";
}

<table style="width:100%" class="t1">
    <tr>
        <td width="100px" class="ltd">选择月份：</td>
        <td width="120px" class="rtd"><input id="bdt" onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM'})" class="Wdate" /></td>
        <td width="100px" class="ltd">病种：</td>
        <td width="120px" class="rtd">
            <select id="bz" name="bz">
                <option value="肿瘤">肿瘤</option>
                <option value="脑卒中">脑卒中</option>
                <option value="冠心病">冠心病</option>
            </select>
        </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 src="@Url.Content("~/Scripts/datetime/WdatePicker.js")"></script>
    <script type="text/javascript">

        var echart;
        var geoCoordMap = {};
        $(function () {
            $("#bz").ligerComboBox();
            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: "fl", display: "分类", width: 200, align: "left" }
                    , { name: "bq", display: "本期人数", width: 200, align: "right" }
                    , { name: "nl", display: "去年同期人数", width: 200, align: "right" }
                    , { name: "sy", display: "上月人数", width: 200, align: "right" }
                ], usePager: false

            });
            $("#cx").bind("click", function () {
                if (!$("#bdt").val()) {
                    $.ligerDialog.alert("月份不能为空!");
                    return;
                }
                $.ajax({
                    url: "@Url.Action("getmbyddqfx")", type: "post", datatType: "json", data: { bdt: $("#bdt").val(), mb: liger.get("bz").getValue() }
                    , success: function (data) {
                        $.ligerDialog.closeWaitting();
                        data = $.parseJSON(data);
                        liger.get("grid").set("data", data);
                        var x = [];
                        var y = [];
                        var y1 = [];
                        var y2 = [];
                        var datas = [];
                        for (var i = 0; i < data.Rows.length; i++) {
                            x.push(data.Rows[i].fl);
                            y.push(data.Rows[i].bq);
                            y1.push(data.Rows[i].nl);
                            y2.push(data.Rows[i].sy);
                            datas.push({name:data.Rows[i].fl,value:data.Rows[i].bq});
                        }
                        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()
                            }
                            ,

                            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]/2 ;//点扩散的大小
                                    },
                                    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>



}