@{
    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="40px" class="ltd">至</td>
        <td width="120px" class="rtd"><input id="edt" 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 src="@Url.Content("~/Scripts/echarts.min.js")"></script>
    <script src="@Url.Content("~/Scripts/macarons.js")"></script>
    <script src="@Url.Content("~/Scripts/datetime/WdatePicker.js")"></script>
    <script type="text/javascript">

        var echart;
        $(function () {
            $("#bz").ligerComboBox();
            echart = echarts.init(document.getElementById("chart"), "macarons");
            var sftjoption = {
                title: {
                    text: "慢病时间段发病分析"
                }
            };
            echart.setOption(sftjoption);
            $("#grid").ligerGrid({
                title: "慢病时间段发病分析",
                width: "98%", height: "98%", data: { Rows: [] },
                columns: [
                    { name: "yf", display: "月份", width: 200, align: "left" }
                    , { name: "rs", display: "发病人数", width: 200, align: "right" }
                ], usePager: false

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

                $.ajax({
                    url: "@Url.Action("getmbsjdfx")", type: "post", datatType: "json", data: { bdt: $("#bdt").val(), edt: $("#edt").val(),mb:liger.get("bz").getValue() }
                    , success: function (data) {
                        $.ligerDialog.closeWaitting();
                        data = $.parseJSON(data);
                        liger.get("grid").set("data", data);
                        var x = [];
                        var y = [];

                        for (var i = 0; i < data.Rows.length; i++) {
                            x.push(data.Rows[i].yf);
                            y.push(data.Rows[i].rs);
                        }
                        var op = {
                            title: {
                                text: "慢病时间段发病分析",
                                subtext: $("#bdt").val()+"-"+$("#edt").val()+" "+liger.get("bz").getValue()
                            }
                            ,
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['月份']
                            }, toolbox: {
                                show: true,
                                feature: {
                                    mark: { show: true },
                                    dataView: { show: true, readOnly: false },
                                    magicType: { show: true, type: ['line', 'bar'] },
                                    restore: { show: true },
                                    saveAsImage: { show: true }
                                }
                            },
                            calculable: true, xAxis: [
        {
            type: 'category',
            data: x
        }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '月份',
                                    type: 'bar',
                                    data: y,
                                    markPoint: {
                                        data: [
                                            { type: 'max', name: '最大值' },
                                            { type: 'min', name: '最小值' }
                                        ]
                                    },
                                    markLine: {
                                        data: [
                                            { type: 'average', name: '平均值' }
                                        ]
                                    }
                                }
                            ]
                        };
                        echart.setOption(op);


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

            });
        });
    </script>
}