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
    评论
很高兴为您提供帮助。下面是一个基于SpringBoot、Layui、MySQL和Ajax技术实现用户登录的示例: 1. 创建SpringBoot项目,添Layui、MyBatis、MySQL等依赖。 2. 在application.properties文件中配置MySQL连接信息: ``` spring.datasource.driver-class-name=com.mysql.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/dbname?useUnicode=true&characterEncoding=utf-8&useSSL=false spring.datasource.username=root spring.datasource.password=password ``` 3. 创建User表,包含id、username和password字段。 4. 创建User类,使用Lombok注解简化代码: ``` @Data public class User { private Long id; private String username; private String password; } ``` 5. 创建UserMapper接口,使用MyBatis注解实现对User表的基本操作: ``` @Mapper public interface UserMapper { @Select("SELECT * FROM user WHERE username = #{username}") User findByUsername(String username); } ``` 6. 在UserController中编写处理用户登录请求的方法,并使用Ajax提交登录表单: ``` @Controller public class UserController { @Autowired private UserMapper userMapper; @PostMapping("/login") @ResponseBody public Result login(User user) { User loginUser = userMapper.findByUsername(user.getUsername()); if (loginUser == null) { return Result.fail("该用户不存在"); } if (!loginUser.getPassword().equals(user.getPassword())) { return Result.fail("密码不正确"); } return Result.ok(); } } ``` 7. 在前端页面中使用Layui的form组件实现登录表单,并使用jQuery和Ajax发送登录请求: ``` <form class="layui-form" action="#"> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="password" required lay-verify="required" autocomplete="off" placeholder="请输入密码" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="login">登录</button> </div> </div> </form> <script> layui.use(['form'], function(){ var form = layui.form, $ = layui.jquery; //监听提交 form.on('submit(login)', function(data){ $.ajax({ url: '/login', type: 'POST', data: data.field, success: function(res) { if (res.code === 0) { layer.msg('登录成功'); } else { layer.msg(res.msg); } } }); return false; }); }); </script> ``` 这样,用户登录功能就完成了。用户输入用户名和密码后,前端使用Ajax向后端发送登录请求,后端根据用户名和密码查询User表,如果查询到了该用户,则返回登录成功的消息。如果查询不到该用户或密码不正确,则返回相应的错误消息。前端接收并提示用户。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值