echarts + ssm 实现时间范围内柱状图绘制

echarts + ssm 实现时间范围内柱状图绘制

1 数据库配置2 /confirm/iedMapper

接口xml 文件 3 Service

接口实现类 5 JSP6 结果

需求: 这里我需要做的是一个疫情防控管理系统, 需要根据新增确诊人员的数据来获取某个时间段内的新增人员数据的柱状图。也即如果前台输入时间 2021-03-01 和 2021-03-31, 我们就给出日期在此之间的确诊人员新增信息的柱状统计图。

注意: 如果数据库中没有在时间段内的数据,那么该图将不会输出任何信息,也即不会创建当天的数据柱,如下图所示

核心操作数据: date //datetime类型

/confirm/iedMapper.java

//获取日期范围内的确诊信息
List findByTimeRange(Map map);

/confirm/iedMapper.xml

    SELECT * FROM confirmed
    where 1 = 1
    
        AND DATE_FORMAT(date, "%Y-%m-%d")
        BETWEEN DATE_FORMAT(#{startTime,jdbcType=VARCHAR}, "%Y-%m-%d")
        AND DATE_FORMAT(#{endTime,jdbcType=VARCHAR}, "%Y-%m-%d")
    

List findByTimeRange(String startTime, String endTime);

public List findByTimeRange(String startTime, String endTime) {
    Map dateMap = new HashMap();
    dateMap.put("startTime",startTime);
    dateMap.put("endTime",endTime);
    return /confirm/iedMapper.findByTimeRange(dateMap);
}

findByTimeRange

该函数自己可以根据需求进行修改, 只要获取到对象将其封装为 json 格式, 即可返回页面进行图表展示。

package controller;

import bean./confirm/ied;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;
import services.ClosedService;
import services./confirm/iedService;
import utils.DateUtil;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RequestMapping("/statistic")
@Controller
public class StaController {
    @Autowired
    private /confirm/iedService /confirm/iedService;
    @Autowired
    private ClosedService  closedService;

    //获取密接和确诊总人数
    @RequestMapping("/loadData")
    public ModelAndView loadData(@RequestParam(value = "startTime", defaultValue = "2022-03-01")String startTime,
                                 @RequestParam(value = "endTime", defaultValue = "2022-03-31")String endTime) throws JsonProcessingException {
        ModelAndView mv = new ModelAndView();
        //获取饼状图
        int[] sum = new int[2];
        sum[0] = /confirm/iedService.get/confirm/iedSum();
        sum[1] = closedService.getClosedSum();
        mv.addObject("sum", sum);
        System.out.println(sum);

        //获取柱状图
        Map histMap = findByTimeRange(startTime,endTime);
        for (Map.Entry entry : histMap.entrySet()) {
            mv.addObject(entry.getKey(), entry.getValue());
        }
        mv.setViewName("info-statistics");
        return mv;
    }

    //获取密接和确诊总人数
    @RequestMapping("/getIncreaseData")
    public ModelAndView getIncreaseData() {
        ModelAndView mv = new ModelAndView();
        int[] sum = new int[2];
        sum[0] = /confirm/iedService.get/confirm/iedSum();
        sum[1] = closedService.getClosedSum();
        mv.addObject("sum", sum);
        System.out.println(sum);
        mv.setViewName("info-statistics");
        return mv;
    }

    //根据 时间 范围查询
    @RequestMapping("/findByTimeRange")
    public Map findByTimeRange(@RequestParam(value = "startTime", defaultValue = "2022-03-01")String startTime,
                                              @RequestParam(value = "endTime", defaultValue = "2022-03-31")String endTime) throws JsonProcessingException {
        System.out.println(startTime + "  " + endTime);

        ModelAndView mv = new ModelAndView();
        List confirmedList = /confirm/iedService.findByTimeRange(startTime,endTime);
        System.out.println(/confirm/iedList);
        //根据得到的日期间隔内的数据划分 map, 统计不同日期出现的确诊人数
        List dates = new ArrayList();
        List datesCount = new ArrayList();
        for(int i = 0; i < /confirm/iedList.size(); i++){
            int count = 1;  //由于忽略了自身
            //忽略重复的 date
            if(dates.contains(DateUtil.dateToStringNoTime(/confirm/iedList.get(i).getDate())))
                continue;
            for(int j = i + 1; j < /confirm/iedList.size(); j++){
                if(DateUtil.isSameDate(/confirm/iedList.get(i).getDate(),/confirm/iedList.get(j).getDate()))
                    count++;
            }
            dates.add(DateUtil.dateToStringNoTime(/confirm/iedList.get(i).getDate()));
            datesCount.add(count);
        }

        //转换为 json 格式
        ObjectMapper mapper = new ObjectMapper();    //提供java-json相互转换功能的类
        String dateList = mapper.writevalueAsString(dates);
        String dateCount = mapper.writevalueAsString(datesCount);

        //输出信息
        System.out.println(dateList);
        System.out.println(dateCount);

        //转换为 map 格式返回出去
        Map map = new HashMap();
        map.put("dateList", dateList);
        map.put("dateCount", dateCount);
        return map;
    }
}

这里使用了 LayUI 框架进行渲染, 使用了日期选择器接口, 无需自行定义, 如果使用其他的日期选择器, 自行修改即可。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


    
        
        
        
        
        
        
        
        
    
    
        

            

            

            

        

        

            

                时间范围
                

                    
                
                
-
                

                    
                
                提交