@{
    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 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 type="text/javascript">

        var echart;
        $(function () {
            $("#bdt").ligerDateEditor({ width: 100 });
            $("#edt").ligerDateEditor({ width: 100 });
            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: "dqname", display: "地区名称", width: 200, align: "left" },
                    { name: "fbrs", display: "发病人数", width: 200, align: "right" }
                ], usePager: false

            });
            $("#cx").bind("click", function () {
                $.ligerDialog.waitting("正在分析请稍后……");
                $.ajax({
                    url: "@Url.Action("getzldqfx")", type: "post", datatType: "json", data: { bdt: $("#bdt").val(), edt: $("#edt").val() }
                    , success: function (data) {

                        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].dqname);
                            y.push(data.Rows[i].fbrs);
                        }
                        var op = {
                            title: {
                                text: "肿瘤地区发病分析",
                                subtext: $("#bdt").val() + '-' + $('#edt').val()
                            }
                            ,
                            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);
                    }
                });
                $.ligerDialog.closeWaitting();
            });
        });
    </script>
}