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);

}