{% 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"> {% trans "图表数据" %} > {% trans "月销量分析" %}  </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: '0%',
                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-sm2 input-group' style='margin-left:20px;'>
        <span class='input-group-btn'>
            <a type="button" class='btn btn-primary btn-qry'>
                <span class='glyphicon glyphicon-search' style='padding-right:5px;'></span>{% trans '查看' %}
            </a>
        </span>
    </div>
</form>
<div class="clearfix"></div>
<div class="charts">   
    <div id='qty'></div>
    <div class='pie-charts'>
        <div id='agt'></div>
        <div id='prd'></div>        
    </div>
</div>



