
@{
    ViewData["Title"] = "仓库数据趋势图";
    Layout = "~/Pages/Shared/_MainLayout.cshtml";
    ViewBag.Nav = new string[] { "逻辑仓库", "仓库数据趋势图" };
}

<div class="row">
    <div class="col-sm-12">
        <div class="ibox-content m-b-sm border-bottom">
            <form id="toolbar">
                <div class="form-inline" style="line-height:40px;">
                    <div class="form-group">
                        <label>日期：</label>
                        <input id="start" name="start" class="form-control" value="@(ViewBag.start)" placeholder="请选择开始日期" />至
                        <input id="end" name="end" class="form-control" value="@(ViewBag.end)" placeholder="请选择结束日期" />
                    </div>
                    <div class="form-group">
                        <label>&nbsp;</label>
                        <button type="button" class="btn btn-primary" onclick="list();"><i class="fa fa-search"></i>&nbsp;查询</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="ibox-content m-b-sm border-bottom">
            <div id="echart-contain" style="width:100%;height:480px;">

            </div>
        </div>
    </div>
</div>

@section scripts{
    <script src="~/js/echarts.min.js"></script>
    <script type="text/javascript">
        var titlename = '@ViewBag.titlename';

        $(document).ready(function () {
            list();
        })

        function list() {
            if ($('#start').val() == '' || $('#end').val() == '') {
                alert('请选择日期');
                return;
            }
            
            $.submit({
                type:'POST',
                url: '@Url.Content("~/Reports/Warehouse/WarehouseTrendChartJson")',
                paramData: 'warehouse_code=@(ViewBag.warehouse_code)&key=@(ViewBag.key)&' + $("#toolbar").serialize()+'&category=@(ViewBag.category)',
                func: function (result) {
                    if (result.success) {
                        var arrval = new Array();
                        var arrname = new Array();

                        for (var i = 0; i < result.val.length;i++)
                        {
                            arrval.push(result.val[i]);
                            arrname.push(result.dates[i]);
                        }

                        showchart(arrval, arrname);
                    }
                    else {
                        alert(result.msg);
                    }
                }
            })
        }

        function showchart(arrval, arrname) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echart-contain'));

            option = {
                title: {
                    text: '趋势图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: [titlename]
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: arrname
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: titlename,
                        type: 'line',
                        stack: '总量',
                        data: arrval
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        }
    </script>
}
