{% load i18n %}






<script src="/static/js/echarts.min.js"></script>


<style>
    .charts{
        height:86%;
        width:100%;
    }
    #qty{
        height:40%;
        margin-bottom:20px;
    }
    .pie-charts{
        height:60%;
        width:100%;
    }
    #prd{
        display:inline-block;
        width:49%;
        height:100%;
    }
    #agt{
        display:inline-block;
        width:49%;
        height:100%;
    }

</style>


<div class="subtitle">
    <ol class="breadcrumb">
        <li>{% trans "图表数据" %}</li>
        <li>{% trans "时间段内销量分析" %} </li>
    </ol>
</div>

<script type="text/javascript">
    $(document).ready(function(){

        $('.datepicker').datepicker({dateFormat: 'yy-mm-dd'});
        $('.datepicker').datepicker('setDate',new Date());
        setDatePickerZh();

        $('#date_from').val('{{date_from}}');
        $('#date_to').val('{{date_to}}');        


        var cht_qty=echarts.init(document.getElementById('qty'));
        var qty_option={
            grid: {
                left: '60px',
                right: '1%',
                top: '10%',
                bottom: '10%'
            },
            title : {
                text: '售量曲线图',
                x:'left'
            },
            xAxis: {
                type: 'category',
                data: {{quantitys.category|safe}}
            },
            yAxis: {
                type: 'value'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b} 销售出库: {c} (箱) "
            },
            series: [{
                data: {{quantitys.data|safe}},
                type: 'line',
                smooth: true
            }]
        };
        cht_qty.setOption(qty_option);


        var cht_prd=echarts.init(document.getElementById('prd'));
        var prd_option={
            grid: {
                left: '0%',
                right: '0%',
                top: '20%',
                bottom: '0%'
            },
            title : {
                text: '销量排名前10产品：',
                x:'left'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b} : {c} "
            },
            series: [{
                data: {{products.data|safe}},
                type: 'pie',
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]

        };
        cht_prd.setOption(prd_option);


        var cht_agt=echarts.init(document.getElementById('agt'));
        var agt_option={
            grid: {
                left: '0%',
                right: '0%',
                top: '20%',
                bottom: '0%'
            },
            title : {
                text: '销量排名前10经销商：',
                x:'left'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b} : {c} "
            },
            series: [{
                data: {{agents.data|safe}},
                type: 'pie',
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        cht_agt.setOption(agt_option);

        $('.btn-qry').click(function(){
            var date_from=$('#date_from').val();
            var date_to=$('#date_to').val();
            $.RefreshContent('{{request.path}}?date_from='+date_from+'&date_to='+date_to);
        });

    });
</script>


<form role="form"  class="form-inline" >
    <div class='col-sm-2 input-group'>

        <span class="input-group-addon"> {% trans "开始日期" %} </span>
        <input class="datepicker form-control" id="date_from" />

    </div>
    <div class='col-sm-2 input-group'>
        <span class="input-group-addon"> {% trans "结束日期" %} </span>
        <input class="datepicker form-control" id="date_to" />

    </div>
    <div class='col-sm-2 input-group' style='margin-left:20px;'>
        <span>
            <a type="button" class='btn btn-primary btn-qry'>
                <span class='glyphicon glyphicon-search' style='padding-right:15px;'></span>{% trans '查看' %}
            </a>
        </span>
    </div>
</form>
<div class="clearfix"></div>
<div class="charts" style='height:750px;'>   
    <div id='qty'></div>
    <div class='pie-charts'>
        <div id='agt'></div>
        <div id='prd'></div>        
    </div>
</div>



