{layout name="layout1" /}
<style>
     .flex{
         display: flex;
         align-items: center;
     }
    .flexc{
         display: flex;
         align-items: center;
         justify-content: center;
    }
    .t1{
        background: #4A70F4;
    }
    .t2{
         background: #F6A23F;
    }
    .t3{
         background: #6DD047;
    }
    .t4{
         background: #F07AAF;
    }
    .t-i{
        background: #fff;
        padding:20px 15px;
    }
    .t-i-img{
         width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 20px;
    }
    .t-i-img img{
        width: 30px;
        height: 30px;
    }
    .h2{
        font-weight: bold;
        font-size: 28px;
        color: #000;
    }
    .span{
        color: #666;
        font-size: 12px;
    }
    .c-i{
        background: #fff;
        padding: 15px;
        height: 500px;
    }
    
</style>
<div class="layui-fluid" style="">
 
    <div class="layui-row layui-col-space15">
        
         <div class="layui-col-sm12">
             <div class="t-i" style="padding:15px 0;">
              <label class="layui-form-label" style="padding:5px 15px;width:auto">按年统计</label>
              <div class="layui-input-inline">
                <input style="height:30px" type="text" value="2025" class="layui-input" id="test2" placeholder="yyyy">
              </div>
            </div>
        </div>
    
    
        <div class="layui-col-sm3">
            <div class="t-i flex">
                <div class="t-i-img flexc t1">
                    <img src="/img/chart/t1.png" alt="" />
                </div>
                <div>
                    <div class="h2" id="zdd">0</div>
                    <span class="span">总订单量</span>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 ">
             <div class="t-i flex">
                <div class="t-i-img flexc t2">
                    <img src="/img/chart/t1.png" alt="" />
                </div>
                <div>
                    <div class="h2" id="xse">0</div>
                    <span class="span">销售额</span>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 ">
            <div class="t-i flex">
                <div class="t-i-img flexc t3">
                    <img src="/img/chart/t1.png" alt="" />
                </div>
                <div>
                    <div class="h2" id="ys">0</div>
                    <span class="span">已收账款</span>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 ">
             <div class="t-i flex">
                <div class="t-i-img flexc t4">
                    <img src="/img/chart/t1.png" alt="" />
                </div>
                <div>
                    <div class="h2" id="ys2">0</div>
                    <span class="span">应收账款</span>
                </div>
            </div>
        </div>

      

        <!--表格-->
        <div class="layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-row">
                        年销售额
                        <div class="layadmin-dataview">
                            <div id="sale-charts" style="width: 100%;height: 100%">
                                <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="layui-col-sm12">
              <div class="layui-col-sm6">
                  <div class="c-i" style="margin-right:7px">
                     <div id="c1" style="height:100%"> </div> 
                  </div>
              </div> 
              <div class="layui-col-sm6">
                   <div class="c-i" style="margin-left:7px">
                       <div id="c2" style="height:100%"> </div>  
                    </div>
              </div>
        </div>

    </div>
</div> 
<script type="text/javascript" charset="utf-8" src="/static/webjs/echarts.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/webjs/jquery.min.js"></script>
<script>

    var sale_option  = {
         tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10','11月','12月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [0,0,0,0,0,0,0,0,0,0,0,0],
          type: 'bar'
        }
      ]
    };
   
    var c1_option = {
      title: {
        text: '销售占比', 
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        { 
          type: 'pie',
          radius: '50%',
          data: [
            { value: 0, name: '' },
            { value: 0, name: '' },
            { value: 0, name: '' },
            { value: 0, name: '' },
            { value: 0, name: '' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    
    var c1_charts= echarts.init(document.getElementById('c1'));
    c1_charts.setOption(c1_option, true);
    
    
    var c2_option  = {
      title: {
        text: '销量排行'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['', '', '', '', '', '']
      },
      series: [
        { 
          type: 'bar',
          data: [0, 0, 0, 0, 0, 0]
        }
      ]
    };
        
    var c2_charts= echarts.init(document.getElementById('c2'));
    c2_charts.setOption(c2_option, true);

    
    
    function getyear(year = null){
         $.post('order_chart',{date:year},function(e){
             var d = e.data
             $('#zdd').html(d.zdd) 
             $('#xse').html(d.xse)
             $('#ys').html(d.ys)
             $('#ys2').html(d.ys2)
                
             sale_option.series[0].data = d.yxse.data
             var sale_charts= echarts.init(document.getElementById('sale-charts'));
             sale_charts.setOption(sale_option, true);
             
             
             c2_option.series[0].data = d.xlph.data.data.reverse()
             c2_option.yAxis.data = d.xlph.data.goods.reverse()
             var c2_charts= echarts.init(document.getElementById('c2'));
             c2_charts.setOption(c2_option, true);
             
             c1_option.series[0].data = d.xszb.data
             var c1_charts= echarts.init(document.getElementById('c1'));
             c1_charts.setOption(c1_option, true);
             
         })
    }
    getyear()
    
    layui.config({
        version:"{$front_version}",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'like','form','element','laydate'], function () {
        var $ = layui.$
            ,like = layui.like 
        var laydate = layui.laydate;
        
        //年选择器
      laydate.render({
        elem: '#test2'
        ,type: 'year'
         ,done: function(value, date){ 
             getyear(value) 
        }
      });
  

        let bgColor = "#fff";
        let color = [
            "#0090FF",
            "#36CE9E",
            "#FFC005",
            "#FF515A",
            "#8B5CFF",
            "#00CA69"
        ];
        const hexToRgba = (hex, opacity) => {
            let rgbaColor = "";
            let reg = /^#[\da-f]{6}$/i;
            if (reg.test(hex)) {
                rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                    "0x" + hex.slice(3, 5)
                )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
            }
            return rgbaColor;
        }



        like.ajax({
            url: '{:url("index/stat")}',
            type: "get",
            success: function (res) {
                
                var dates = res.data.dates,
                    echarts_order_amount  = res.data.echarts_order_amount,
                    echarts_user_visit = res.data.echarts_user_visit;

               

                var user_option = {
                    backgroundColor: bgColor,
                    color: color,
                    legend: {
                        right: 10,
                        top: 10
                    },
                    tooltip: {
                        trigger: "axis",
                        formatter: function(params) {
                            let html = '';
                            params.forEach(v => {
                                html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                ${v.name}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                人`;
                            })
                            return html
                        },
                        extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                        axisPointer: {
                            type: 'shadow',
                            shadowStyle: {
                                color: '#ffffff',
                                shadowColor: 'rgba(225,225,225,1)',
                                shadowBlur: 5
                            }
                        }
                    },
                    grid: {
                        top: 100,
                        containLabel: true
                    },
                    xAxis: [{
                        type: "category",
                        boundaryGap: false,
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: "#333"
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#D9D9D9"
                            }
                        },
                        data: dates
                    }],
                    yAxis: [{
                        type: "value",
                        name: '用户访问量',
                        axisLabel: {
                            textStyle: {
                                color: "#666"
                            }
                        },
                        nameTextStyle: {
                            color: "#666",
                            fontSize: 12,
                            lineHeight: 40
                        },
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#E9E9E9"
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    }],
                    series: [{
                        type: "line",
                        smooth: true,
                        symbolSize: 8,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[0],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[0], 0.5),
                                shadowOffsetY: 8
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                        offset: 0,
                                        color: hexToRgba(color[0], 0.3)
                                    },
                                        {
                                            offset: 1,
                                            color: hexToRgba(color[0], 0.1)
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: hexToRgba(color[0], 0.1),
                                shadowBlur: 10
                            }
                        },
                        data: echarts_user_visit
                    }]
                };


                

                

            }
        });




    });
</script>