
@{
    ViewData["Title"] = "OrderSalesGraph";
    Layout = "~/Pages/Shared/_MainLayout.cshtml";
    ViewBag.Nav = new string[] { "统计", "平台销售统计", ViewBag.platform, ViewBag.titlename + "曲线图" };
}

<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" type="text" class="form-control" style="width:130px;" value="@(ViewBag.start)" placeholder="付款开始时间" />
                        <span>至</span>
                        <input id="end" name="end" type="text" class="form-control" style="width:130px;" 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();

            laydate.render({ elem: '#start' });
            laydate.render({ elem: '#end' });

            laydate.render({ elem: '#shipstart' });
            laydate.render({ elem: '#shipend' });

        })

        function list() {
            var start = $('#start').val();
            var end = $('#end').val();

            if (start == '' && end == '') {
                layer.alert('请选择时间进行搜索。');
                return false;
            }
            let load_index = layer.load();
            $.submit({
                type:'POST',
                url: '@Url.Content("~/Reports/Orders/OrderSalesGraphJson")',
                paramData: 'col=@(ViewBag.col)&platform=@(ViewBag.platform)&sellaccount=@(ViewBag.sellaccount)&website=@(ViewBag.website)&skucategoryids=@(ViewBag.skucategoryids)&start=' + start + '&end=' + end +'&warehousetype=@ViewBag.warehousetype&warehousecode=@(ViewBag.warehousecode)&websitegroup=@(ViewBag.websitegroup)',
                func: function (result) {
                    layer.close(load_index);
                    if (result.success) {
                        var arrval = new Array();
                        var arrname = new Array();

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

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

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

            option = {
                title: {
                    text: '@(ViewBag.platform) ' + titlename + '的曲线图'
                },
                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>
}
