SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图_随笔

SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图场景

若依前后端分离版本地搭建开发环境并运行项目的教程：

若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面搭建架构的基础上，实现使用ElementUI的el-date-picker选择一段时间范围，

统计后台数据库中对应时间内的记录数并在柱状图中显示。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、后台设计数据库，新建带时间字段的表

DROp TABLE IF EXISTS `bus_blog`;
CREATE TABLE `bus_blog`  (
  `id` int(0) NOT NULL AUTO_INCREMENT COMMENT 'id',
  `add_time` datetime(0) NOT NULL COMMENT '添加时间',
  `blog_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '名称',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '博客表' ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

然后表中添加几条带时间的数据

2、使用若依自带的代码生成工具生成前后端代码和菜单数据。

在实体类中添加开始时间和结束时间两个字段，用来接收和传递时间范围字段

package com.ruoyi.system.domain;

import java.util.Date;
import com.fasterxml.jackson.annotation.JsonFormat;
import org.apache.commons.lang3.builder.ToStringBuilder;
import org.apache.commons.lang3.builder.ToStringStyle;
import com.ruoyi.common.annotation.Excel;
import com.ruoyi.common.core.domain.baseEntity;


public class BusBlog extends baseEntity
{
    private static final long serialVersionUID = 1L;

    
    private Long id;

    
    @JsonFormat(pattern = "yyyy-MM-dd")
    @Excel(name = "添加时间", width = 30, dateFormat = "yyyy-MM-dd")
    private Date addTime;

    
    @Excel(name = "名称")
    private String blogName;

    //开始时间
    private String beginDate;

    //结束时间
    private String endDate;

    public String getBeginDate() {
        return beginDate;
    }

    public void setBeginDate(String beginDate) {
        this.beginDate = beginDate;
    }

    public String getEndDate() {
        return endDate;
    }

    public void setEndDate(String endDate) {
        this.endDate = endDate;
    }

    public void setId(Long id)
    {
        this.id = id;
    }

    public Long getId()
    {
        return id;
    }
    public void setAddTime(Date addTime)
    {
        this.addTime = addTime;
    }

    public Date getAddTime()
    {
        return addTime;
    }
    public void setBlogName(String blogName)
    {
        this.blogName = blogName;
    }

    public String getBlogName()
    {
        return blogName;
    }

    @Override
    public String toString() {
        return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)
            .append("id", getId())
            .append("addTime", getAddTime())
            .append("blogName", getBlogName())
            .toString();
    }
}

3、修改Controller层的获取数据的接口

    @GetMapping("/list")
    public AjaxResult list(BusBlog busBlog)
    {
        BusBlog indexModel=new BusBlog();
        //构造返回数据，注意这里需要用linkedHashMap
        Map resultMap = new linkedHashMap();
        if(null!= busBlog.getBeginDate() && null!= busBlog.getEndDate()) {
            //获取请求参数，开始时间和结束时间
            indexModel.setBeginDate(busBlog.getBeginDate());
            indexModel.setEndDate(busBlog.getBeginDate());
            List rangeData = new ArrayList();
            //查询数据库获取指定时间内的数据
            rangeData = busBlogService.selectBlogCountByDate(busBlog);
            if (rangeData.size() >= 0) {
                // 日期格式化
                SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
                try {
                    // 起始日期
                    Date d1 = sdf.parse(busBlog.getBeginDate());
                    // 结束日期
                    Date d2 = sdf.parse(busBlog.getEndDate());
                    Date tmp = d1;
                    Calendar dd = Calendar.getInstance();
                    dd.setTime(d1);
                    while (tmp.getTime() < d2.getTime()) {
                        int dayCount = 0;
                        tmp = dd.getTime();
                        //获取查询的数据每天的档案数量
                        for (String oneDay:rangeData) {
                            Date oneDayDate = sdf.parse(oneDay);
                            if(oneDayDate.toString().equals(tmp.toString()))
                            {
                                dayCount++;
                            }
                        }
                        resultMap.put(sdf.format(tmp),dayCount);
                        // 天数加上1
                        dd.add(Calendar.DAY_OF_MONTH, 1);
                    }
                    System.out.println(resultMap);
                } catch (ParseException e) {
                    e.printStackTrace();
                }
            }
        }
        return AjaxResult.success(resultMap);
    }

4、Service层和mapper略过

都是如下返回格式和请求数据格式

public List selectBlogCountByDate(BusBlog queryParam);

5、mapper.xml具体查询sql实现