Java获取近七天的数据条数，及页面实现折线图(附前后端代码)

我会带着你远行 2022-12-20 08:42 92阅读 0赞

# 页面效果： #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA_size_16_color_FFFFFF_t_70_pic_center]

# 页面代码： #

//div用来实现折线图
     <div class="echarts" id="look" style="width:47%; height:350px;background-color: #4e896f;float: left;margin-left: 10px;display: inline"></div> 
     //引入echarts.js 可以echarts官网进行下载，然后放入项目中即可。如下图所示：
     <script src="admin/plugins/echarts/echarts.min.js"></script>
    <script>
        // 根据div的ID获取实例
        var myChart = echarts.init(document.getElementById('look'));
        option = { 
            tooltip: { 
                trigger: 'axis',
                axisPointer: { 
                    crossStyle: { 
                        color: '#999'
                    }
                }
            },
            toolbox: { 
                feature: { 
                    dataView: { show: true, readOnly: false},
                    magicType: { show: true, type: ['line', 'bar']},
                    restore: { show: true},
                    saveAsImage: { show: true}
                }
            },
            //在折线图正上方设置说明
            legend: { 
                data: ['浏览量']
            },
            //在这里设置x轴 data为x轴上面显示的数据
            xAxis: [
                { 
                    type: 'category',
                    data: [],
                }
            ],
            //在这里设置y轴 
            //name是y轴上面的说明
            //min是y轴最小值
            //max是y轴最大值
            //interval是y轴的区间
            yAxis: [
                { 
                    type: 'value',
                    name: '人数',
                    min: 0,
                    max: 250,
                    interval: 50,
                    axisLabel: { 
                        formatter: '{value} 人'
                    }
                },
    
            ],
            //数据源
            //type为类型，line:折线图,bar:柱状图
            //
            series: [
                { 
                    name: '浏览量',
                    type: 'line',
                    data: []
                },
            ]
        };
        myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
        //声明两个数组，用来临时存放数据
        var weeks1 = [];
        var looks = [];
        $.ajax({ 
            type : "POST",
            async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/article/looklist",
            dataType : "json",
            success : function(data) { 
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (data.status==200) { 
                    var obj = eval(data.data);     //解析后台传来的json数据
                    for (var i = 0; i < obj.length; i++) { 
                        weeks1.push(obj[i].name);
                    }
                    for (var i = 0; i < obj.length; i++) { 
                        looks.push(obj[i].num);
                    }
                    myChart.hideLoading(); //隐藏加载动画
                    myChart.setOption({  //加载数据图表
                        xAxis : { 
                            data : weeks1
                        },
                        series : [ { 
                            // 根据名字对应到相应的系列
                            name : '浏览量',
                            data : looks
                        } ]
                    });
                }else{ 
                    alert("后台数据获取失败!");
                }
            },
            error : function(errorMsg) { 
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        })
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

echarts.js在项目中存放的位置（供参考）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA_size_16_color_FFFFFF_t_70_pic_center 1]

# 后台代码： #

##### 从数据库获取数据，返回给前台 #####

//EchartsEntity 是一个对象 里面有count和time属性
        @PostMapping("/looklist")
        @ResponseBody
        public ResponseVo looklist(){ 
        	//先获取近七天的日期
            List<String> sevenDate = getSevenDate();
            //查询近七天的数据量 sql语句在后面
            List<EchartsEntity>  articleList = articleService.selectWeekLookCount(sevenDate);
            //创建一个新集合 用来存放最终的数据
            List<EchartsEntity> list = new ArrayList<>();
            //遍历七天的日期 
            for(int i = 0; i < sevenDate.size(); i++){ 
                EchartsEntity echartsEntity = new EchartsEntity();
                echartsEntity.setTime(sevenDate.get(i));
                boolean b = false;
                //遍历获取到的数据
                for(int y =- 0; y < articleList.size(); y++){ 
                	//用来判断某一天是否有数据 如果有就存到list中
                    if (sevenDate.get(i).equals(articleList.get(y).getTime())){ 
                        echartsEntity.setNum(articleList.get(y).getNum());
                        list.add(echartsEntity);
                        b = true;
                        break;
                    }
                }
                //如果没有 就设置num为0，再存放到list中
                if(!b){ 
                    echartsEntity.setNum("0");
                    list.add(echartsEntity);
                }
            }
            return ResultUtil.vo(CoreConst.SUCCESS_CODE,"获取浏览量成功",list);
        }

##### 获取近七天的日期(包含今天) #####

//获取近七天日期
        public static List<String> getSevenDate() { 
            List<String> dateList = new ArrayList<>();
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
            for (int i = 0; i < 7; i++) { 
                Date date = DateUtils.addDays(new Date(), -i);
                String formatDate = sdf.format(date);
                dateList.add(formatDate);
            }
            return dateList;
        }

### sql语句 ###

//download_log_time是条件字段
    <select id="selectWeekDownloadCount" resultType="com.puboot.module.admin.model.EchartsEntity">
    		SELECT
    		COUNT(*) AS 'num',  //给条数设置别名为num
    		DATE_FORMAT(download_log_time,'%Y-%m-%d') AS 'time'  //给时间设置别名为time
    		FROM
    		download_log
    		WHERE
    		DATE_FORMAT(download_log_time, '%Y-%m-%d') IN //因为是近七天 所以要in七天的日期
    		<foreach collection="list" item="sevenDate" separator="," open="(" close=")">
    			#{ sevenDate}
    		</foreach>
    		GROUP BY
    		DATE_FORMAT(download_log_time, '%Y-%m-%d')
    		ORDER BY
    		DATE_FORMAT(download_log_time, '%Y-%m-%d') DESC; //排序
    	</select>

##### sql语句执行结果如下： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/56e67df1e0544a2bab395c39d05bf72f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201111155534961.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201111162149998.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA==,size_16,color_FFFFFF,t_70#pic_center