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

}

推荐文章

 您阅读本篇文章共花了：