thinkphp5 使用百度ECharts 柱形图

 

/**
* 后端查询
*/
    public function get_order()
    {
        $types = input('param.types');
        if($types == 1 || $types == 2){
            //订单统计
            if($types == 1){
                $todays = date("Y-m-d 00:00:00"); //今日
                $todaye = date("Y-m-d 23:59:59"); //今日
                $now = date('Y-m-d');
            }

            if($types == 2){
                $todays = date("Y-m-d 00:00:00",strtotime('-1 hour')); //今日
                $todaye = date("Y-m-d 23:59:59",strtotime('-1 hour')); //今日
                 $now = date('Y-m-d',strtotime('-1day'));
            }

            $today = array();
            $todayjfs = array(); //积分
            $todaysps = array(); //商品

            for($i = 1;$i<=24;$i++){
                array_push($today,$i > 9 ? $i : '0'.$i);
                array_push($todayjfs,'');
                array_push($todaysps,'');
            }
            $todayss = $today;

            $spwhere['create_time'] = array(array('egt',$todays),array('lt',$todaye));
            $todaysp = OrderGoods::where($spwhere)->select();

            $jfwhere['create_time'] = array(array('egt',$todays),array('lt',$todaye));
            $todayjf = IntegralOrderGoods::where($jfwhere)->select();

            foreach ($today as $kss => $vss) {

              $hour = $vss > 9 ? $vss : '0'.$vss;
              $thour = date('H'.$hour);

              $jf_m = 0;
              $sp_m = 0;

              foreach ($todaysp as $k => $v) {
                $createtime = date('H',strtotime($v['create_time']));
                if($thour == $createtime){
                  $sp_m += 1;
                }
              }

              foreach ($todayjf as $k => $v) {
                $createtime = date('H',strtotime($v['create_time'])); 
                if($thour == $createtime){
                  $jf_m += 1;
                }
              }

              $rmn = array();
              $rmn['sp_m'] = $sp_m;
              $rmn['jf_m'] = $jf_m;
              $rmn['item'] = $kss;
              $today[$kss] = $rmn;
            }
              
            foreach ($today as $kt => $vt) {
              $sp = array_splice($todaysps, $vt['item'], 1, $vt['sp_m'] ? $vt['sp_m'] : 0);
              $jf = array_splice($todayjfs, $vt['item'], 1, $vt['jf_m'] ? $vt['jf_m'] : 0);
            }

            $today['sps'] = $todaysps;
            $today['jfs'] = $todayjfs;
            $datetoso['date'] = $todayss;

            return json_encode(['datetoso'=>$datetoso,'jfspdata'=>$today,'now'=>$now]);
        }
        if($types == 3){
            //周开始             
            $toweek = date("Y-m-d H:i:s",mktime(0, 0 , 0,date("m"),date("d")-date("w")+1,date("Y"))); //一周的开始时间
            $soweek = date("Y-m-d H:i:s",mktime(23,59,59,date("m"),date("d")-date("w")+7,date("Y"))); //一周的结束时间   
            
            $now = $toweek.'--'.$soweek;
            $twt = strtotime($toweek);
            $sws = strtotime($soweek);

            $weekjfs = array('','','','','','',''); //一周积分订单
            $weeksps = array('','','','','','',''); //一周商品订单

            //获取一周日期
            $time = mktime(0, 0 , 0,date("m"),date("d")-date("w")+1,date("Y"));
            $wk = $this->get_week($time);

            $spwhere['create_time'] = array(array('egt',$toweek),array('lt',$soweek));
            $weeksp = OrderGoods::where($spwhere)->select();

            $jfwhere['create_time'] = array(array('egt',$toweek),array('lt',$soweek));
            $weekjf = IntegralOrderGoods::where($jfwhere)->select();

            $weeks = array();
            foreach ($wk as $kss => $vss) { //一周的一天

              $wjf = 0; //积分
              $wsp = 0; //商品

              foreach ($weeksp as $k => $v) {
                $createtime = date('Ymd',strtotime($v['create_time']));
                //每一天
                if($vss['date'] == $createtime){
                  $wsp += 1;
                }
              }

              foreach ($weekjf as $k => $v) {
                $createtime = date('Ymd',strtotime($v['create_time']));
                if($vss['date'] == $createtime){
                  $wjf += 1;
                }
              }

              $wk[$kss]['wsp'] = $wsp;
              $wk[$kss]['wjf'] = $wjf;
              $weeks[] = $wk[$kss]['week'];
            }
         
            foreach ($wk as $kt => $vt) {
              $jf = array_splice($weekjfs, $vt['item'], 1, $vt['wjf'] ? $vt['wjf'] : 0);
              $sp = array_splice($weeksps, $vt['item'], 1, $vt['wsp'] ? $vt['wsp'] : 0);
            }
            $wkdata['jfs'] = $weekjfs;//implode(',', $weekjfs);
            $wkdata['sps'] = $weeksps;//implode(',', $weeksps);
            //周结束
 
            $datetoso['toweek'] = $toweek;
            $datetoso['soweek'] = $soweek;
            $datetoso['date'] = $weeks;
            return json_encode(['datetoso'=>$datetoso,'jfspdata'=>$wkdata,'now'=>$now]);
        }
        if($types == 4){
            //月开始
            $date =  date('t',strtotime(date('Y-m'))); //获取当前月天数

            $monthday = array();
            $monthjfs = array(); //积分
            $monthsps = array(); //商品

            for($i = 1;$i<=$date;$i++){
                array_push($monthday,$i);
                array_push($monthjfs,'');
                array_push($monthsps,'');
            }
            $monthdays = $monthday;//implode(',', $monthday); //当前月天数
            
            $tomonths = date("Y-m-d H:i:s",mktime(0, 0 , 0,date("m"),1,date("Y")));   //当前月开始日期
            $somonths = date("Y-m-d H:i:s",mktime(23,59,59,date("m"),date("t"),date("Y")));  //当前月结束日期

            $tmt = strtotime($tomonths);
            $sms = strtotime($somonths);

            $spwhere['create_time'] = array(array('egt',$tomonths),array('lt',$somonths));
            $monthsp = OrderGoods::where($spwhere)->select();

            $jfwhere['create_time'] = array(array('egt',$tomonths),array('lt',$somonths));
            $monthjf = IntegralOrderGoods::where($jfwhere)->select();

            foreach ($monthday as $kss => $vss) {

              $days = $vss > 9 ? $vss : '0'.$vss;
              $tdays = date('Ym'.$days);

              $jf_m = 0;
              $sp_m = 0;

              foreach ($monthsp as $k => $v) {
                $createtime = date('Ymd',strtotime($v['create_time'])); 
                if($tdays == $createtime){
                  $sp_m += 1;
                }
              }

              foreach ($monthjf as $k => $v) {
                $createtime = date('Ymd',strtotime($v['create_time']));
                if($tdays == $createtime){ 
                  $jf_m += 1;
                }
              }

              $rmn = array();
              $rmn['sp_m'] = $sp_m;
              $rmn['jf_m'] = $jf_m;
              $rmn['item'] = $kss;
              $monthday[$kss] = $rmn;
            }
              
            foreach ($monthday as $kt => $vt) {
              $sp = array_splice($monthsps, $vt['item'], 1, $vt['sp_m'] ? $vt['sp_m'] : 0);
              $jf = array_splice($monthjfs, $vt['item'], 1, $vt['jf_m'] ? $vt['jf_m'] : 0);
            }

            $monthday['sps'] = $monthsps; //implode(',', $monthsps);
            $monthday['jfs'] = $monthjfs; //implode(',', $monthjfs);
            //月结束
            $datetoso['date'] = $monthdays;
            return json_encode(['datetoso'=>$datetoso,'jfspdata'=>$monthday,'now'=>date('Y-m')]);
        }
    }

/**
* 获取一周日期
* $time 时间戳
* $format 转换格式
*/
function get_week($time, $format = "Ymd") {
    $week = date('w',$time);
    $weekname=array('星期一','星期二','星期三','星期四','星期五','星期六','星期日');
    //星期日排到末位
    if(empty($week)){
        $week=7;
    }
    $data = array();
    for ($i=0;$i<=6;$i++){
        $data[$i]['item'] = $i;
        $data[$i]['date'] = date($format,strtotime( '+'. $i+1-$week .' days',$time)); 
        $data[$i]['week'] = $weekname[$i]; 
    }
    return $data;
}

 

/**
* 前端 进入初始化为当前日期
*/

<!--html  使用了前端框架 http://adminlte.la998.com/index2.html 仪表盘v1中的销量html-->

<!--订单总数统计-->
    <div class="nav-tabs-custom">
      <ul class="nav nav-tabs pull-right">
        <li class=""><a href="#revenue-chart" data-toggle="tab" οnclick="getOrder('4')">本月</a></li>
        <li class=""><a href="#revenue-chart" data-toggle="tab" οnclick="getOrder('3')">本周</a></li>
        <li class=""><a href="#revenue-chart" data-toggle="tab" οnclick="getOrder('2')">昨日</a></li>
        <li class="active"><a href="#revenue-chart" data-toggle="tab" οnclick="getOrder('1')">今日</a></li>
        <li class="pull-left header"><i class="fa fa-bar-chart"></i>订单总数统计</li>
      </ul>
      <div class="tab-content no-padding">
        <!-- Morris chart - Sales -->
        <div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 400px;">
         <div class="row" id="main" style="width:100%;margin:0;height:400px;background: #ffffff"></div>
       </div>
     </div>
   </div>

<!--js 下载的js 放在了 public里面新建的公共 common--js-->

<!--百度图表 ECharts  自行下载js   https://echarts.baidu.com/download.html-->
<script src="__common__/js/echarts.js"></script> 
<script src="__common__/js/wonderland.js"></script>

<script> 

//初始化调用
  $(function(){ 
    getOrder(1);
  });


  // 基于准备好的dom,初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  function getOrder(types='1') {

    var date= '';
    var jfs = '';
    var sps = '';
    $.post('get_order', {types:types}, function(data, textStatus, xhr) {
      console.log(data,'返回的数据');
      var datas = JSON.parse(data);
      var date = datas['datetoso']['date'];
      var jfs = datas['jfspdata']['jfs'];
      var sps = datas['jfspdata']['sps'];
      console.log(jfs,sps);
      var posin = {
        color:['#FFDB5C', '#53C4DF'],
        title : {
          text: '',
          subtext:  '日期:'+datas['now'],
        },
        tooltip : {
          trigger: 'axis'
        },
        legend: {
         data:['积分','商品']
       },
       toolbox: {
        show : true,
        feature : {
          dataView : {show: true, readOnly: false},
          magicType : {show: true, type: ['line', 'bar']},
          restore : {show: true},
          saveAsImage : {show: true}
        }
      },
      calculable : true,
      xAxis : [
      {
        type : 'category',
        data : date
      }
      ],
      yAxis : [
      {
        type : 'value'
      }
      ],
      series : [
      {
        name:'积分',
        type:'bar',
        data: jfs,
        markPoint : {
          data : [
          {type : 'max', name: '最大值'},
          {type : 'min', name: '最小值'}
          ]
        },
        markLine : {
          data : [
          {type : 'average', name : '平均值'}
          ]
        }
      },
      {
        name:'商品',
        type:'bar',
        data: sps,
        markPoint : {
          data : [
          {type : 'max', name: '最大值'},
          {type : 'min', name: '最小值'}
          ]
        },
        markLine : {
          data : [
          {type : 'average', name : '平均值'}
          ]
        }
      },
      ]
    };
    myChart.setOption(posin);
  });
  }
</script>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
### 回答1: ThinkPHP5是一款使用PHP语言开发的Web开发框架,Echarts是一款基于JavaScript的数据可视化库,而Ajax是一种基于JavaScript的前端技术,用于实现异步请求和数据交互。结合这三者,我们可以实现在ThinkPHP5中使用Ajax动态赋值Echarts图表的功能。 首先,我们需要在前端页面中引入Echarts和相关的JavaScript库。然后,通过Ajax发送请求到后端的ThinkPHP5控制器中。在控制器中,我们可以根据请求的参数进行数据处理和查询,最后将处理好的数据返回给前端。 接下来,在前端的JavaScript中,我们可以通过Ajax的回调函数获取到后端返回的数据,并使用Echarts的API将数据动态填充到图表中。 具体的步骤如下: 1. 在前端页面中引入Echarts的JavaScript文件和相关的库文件,确保Echarts和Ajax的对象可用。 2. 编写一个Ajax请求的函数,通过该函数发送请求到后端的ThinkPHP5控制器。 3. 在控制器中,接收Ajax请求的参数,进行数据处理和查询,并将处理后的数据返回给前端。 4. 在前端的Ajax回调函数中,获取到后端返回的数据,并使用Echarts的API将数据填充到图表中。 需要注意的是,在控制器中,我们可以使用ThinkPHP5提供的模型来处理数据,并使用相关的查询方法来查询数据库。在返回数据给前端时,可以将数据转换为JSON格式,方便在前端进行处理和使用。 总的来说,通过ThinkPHP5、Echarts和Ajax的配合,我们可以实现使用Ajax动态赋值Echarts图表的功能,方便地进行数据可视化展示。 ### 回答2: 使用ThinkPHP5结合Echarts和Ajax实现动态赋值的步骤如下: 1. 在项目中安装并引入Echarts库,可以通过CDN或者本地文件方式引入,并在页面中创建一个div用于显示图表。 2. 在ThinkPHP5中创建一个控制器,用于处理请求和返回数据。例如创建一个Test控制器,编写一个方法用于处理Ajax请求,并返回需要的数据。 3. 在方法中使用ThinkPHP5的查询方法获取需要的数据,例如从数据库中查询数据并进行处理。 4. 在控制器方法中使用Echarts提供的方法生成需要的图表数据格式。可以使用Echarts提供的示例代码或者自定义生成图表所需的数据。 5. 将生成的图表数据返回给前端页面,可以通过JSON格式的数据进行返回。 6. 在前端页面中使用Javascript编写一个Ajax请求,向后端发送请求并获取返回的数据。 7. 在Ajax的回调函数中使用Echarts提供的方法将获取到的数据进行解析并渲染到页面中的图表上。 8. 在页面加载时调用Ajax请求的方法,即可实现动态赋值的效果。 需要注意的是,前端页面需要引入Echarts的相关文件,并根据Echarts的API文档对图表进行配置和渲染。在ThinkPHP5中,可以通过返回JSON格式的数据来实现数据的传递和渲染。同时,需要处理好前后端的数据传递和格式转换,确保数据的准确性和一致性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值