• 19983297340
登 陆 注 册
登 陆 注 册

Fastadmin

后台统计 集成柱状图 带时间区间搜索layui+ echarts
2023-08-31

如图

html代码


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>he4966</title>
    <!-- ECharts 文件 -->
    <script src="/assets/js/echarts.min2.js"></script>
    <script src="/assets/js/jq.js" charset="UTF-8"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">



  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->                                      

    <!-- 青色分割线 -->
    <hr class="layui-border-cyan" style="opacity: 0.5;">
  <form action="" id="myForm" method="post">

      <div class="layui-form">
        <div class="layui-inline">
          <label class="layui-form-label">开始日期</label>
          <div class="layui-inline" id="date-range" >
            <div style="display: flex;">
            
              <input type="text" id="startDate" name="startDate" class="layui-input" required lay-verify="required"  placeholder="开始日期" value="{$startDate}" style="width: 120px;">
              <label class="layui-form-label">结束日期</label>
              <input type="text" id="endDate" name="endDate" class="layui-input" required lay-verify="required" placeholder="结束日期" value="{$endDate}" style="width: 120px;">

              <button type="submit" class="layui-btn layui-btn-primary layui-border-green">查询</button>
            </div>
           
          </div>
        </div>
      </div>
    </form> 

    <!-- 蓝色分割线 -->
    <hr class="layui-border-blue">

    <div id="main" style="width: auto;height:450px;"></div>
  <script type="text/javascript">



      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '用户统计'
        },
        tooltip: {},
        legend: {
          data: ['数量']
        },
        xAxis: {
          data: [ {volist name="list" id="v"}
              { value: "{$key}", name: '{$key}' },
              {/volist}
            ]
        },
        yAxis: {},


        series: [
          {
            name: '统计',

            type: 'bar',//柱状
            label: {
              show: true,
              rotate: 10,//旋转
              position: 'top',//在上面显示
              distance: 15,// 距离图形元素的距离

            },
            itemStyle: {
              color: function(params) {
                // 随机生成颜色
                return 'rgb(' + [
                  Math.round(Math.random() * 255),
                  Math.round(Math.random() * 255),
                  Math.round(Math.random() * 255)
                ].join(',') + ')';
              }
            },
            fontSize: 12,
            data: [ {volist name="list" id="v"}
              { value: {$v}, name: '{$key}' },
              {/volist}]
          }
        ],
      };

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



 


  <script>
    layui.use(function(){
      var layer = layui.layer
      ,form = layui.form
      ,laypage = layui.laypage
      ,element = layui.element
      ,laydate = layui.laydate
      ,util = layui.util;
      
      // //欢迎信息
      // layer.msg('QQ496631085');
      
      // //输出版本号
      // lay('#version').html(layui.v);
        //时间选择器
      laydate.render({ 
        elem: '#date-range' //开始时间和结束时间所在 input 框的父选择器
        //设置开始日期、日期日期的 input 选择器
        ,range: ['#startDate', '#endDate'] //数组格式为 layui 2.6.6 开始新增
        ,format: 'yyyy-MM-dd' //可任意组合
        ,done: function(value, date, endDate){

          //点击日期确定后自动提交表单
          $('#myForm').submit();
    
          console.log(value); //得到日期生成的值，如：2023-08-31
          console.log(date); //得到日期时间对象：{year: 2023, month: 8, date: 31, hours: 0, minutes: 0, seconds: 0}
          console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
        }
      });

    });
  </script>

  </body>
</html>


php代码



    protected $layout = null;

    public function _initialize()
    {
        if($this->request->action()=='index'){
            $this->layout = 'default';
        }
        parent::_initialize();        

    }


    public function users($startDate=null,$endDate=null){
  
        if(!$startDate){
            $startDate = date('Y-m-d',strtotime('-7 day'));
        }
        if(!$endDate){
            $endDate = date('Y-m-d');
        }
        $startTime = strtotime($startDate);
        $endTime = strtotime($endDate);

        $this->view->assign('startDate',$startDate);
        $this->view->assign('endDate',$endDate);


        $user_count = Db::name('user')->count();


        $list['总用户数'] =  $user_count;
        $list['新用户'] =  Db::name('user')
            ->where('jointime','>=',$startTime)
            ->where('jointime','<=',$endTime)
            ->count();

        $list['充值用户'] =  Db::name('money_order')
            ->where('pay_time','>=',$startTime)
            ->where('pay_time','<=',$endTime)
            ->count();
        $list['未充值用户'] =  $user_count - $list['充值用户'];

            

        $this->view->assign('list',$list);


        return $this->view->fetch();
    }


    上一篇：phpSpreadsheet操作Excel表格的基本使用
    下一篇：imi-admin后台示例代码