layui + ajax +echarts 选日期动态加载图表

效果如上图所示

 1、前端代码

layui.use('laydate', function(){
  var laydate = layui.laydate;
  laydate.render({

//这个是绑定日期控件的ID
    elem: '#order_time'
    ,type: 'month'
    ,done: function(value, date, endDate){
        $.ajax({
                        type: "get",
                        url: "/admin/getnav?month="+value,
                        async:false,
                        dataType : 'json',
                        success: function(data){
                            //console.log(data);
                        
                            var chartDom = document.getElementById('itemcharts');
                            var myChart99 = echarts.init(chartDom);
                            var option99;
                            option99 = {
                              tooltip: {
                                    trigger: 'axis'
                                  },
                              color:['#2974F7'],
                              grid: {
                                    top:'5%',
                                    left: '1%',
                                    right: '8%',
                                    bottom: '3%',
                                    containLabel: true
                                  },
                              xAxis: {
                                type: 'category',
                                data: data.ywy,
                                axisLabel: {
                                //x轴文字的配置
                                show: true,
                                interval: 0,//使x轴文字显示全
                               }

                              },
                              yAxis: {
                                type: 'value'
                              },
                              series: [
                                {
                                  name: "产品数量",
                                  data: data.amountarr,
                                  type: 'bar',
                                  itemStyle:{
                                      normal:{ 
                                        color: '#2937FF',
                                    }
                                  }
                                }
                              ]
                            };
                            option99 && myChart99.setOption(option99);
                        }
        });    
    }
  });
});

2、后端 PHP

public function getnav()
  {

      $month = $this->request->get('month');

      //根据接收来的参数去查询,这些都省略了,查出数组取名叫$list,转一下json字符串,输出。

       $list=array("ywy"=>$ywy,"amountarr"=>$amountarr);
        $list=json_encode($list,JSON_UNESCAPED_UNICODE);
        echo($list);

}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值