页面效果：

页面代码：

//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在项目中存放的位置（供参考）

后台代码：

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

//EchartsEntity 是一个对象 里面有count和time属性@PostMapping("/looklist")@ResponseBodypublic 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">SELECTCOUNT(*) AS 'num',  //给条数设置别名为numDATE_FORMAT(download_log_time,'%Y-%m-%d') AS 'time'  //给时间设置别名为timeFROMdownload_logWHEREDATE_FORMAT(download_log_time, '%Y-%m-%d') IN //因为是近七天 所以要in七天的日期<foreach collection="list" item="sevenDate" separator="," open="(" close=")">#{sevenDate}</foreach>GROUP BYDATE_FORMAT(download_log_time, '%Y-%m-%d')ORDER BYDATE_FORMAT(download_log_time, '%Y-%m-%d') DESC; //排序</select>

sql语句执行结果如下：

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

java后台使用opencsv生成csv文件，并返回给前端下载（附前后端代码）
最近有一个需求,需要前端页面选择相应条件,后端根据条件查询数据库,将查出的实体类集合转换为csv文件返回给前端,随后前端进行下载. 找了挺多的资料,现在进行一个整理和分享. 1.Controller ...
Java 获取近七天、近六个月（包含今天，本月）
获取近七天 List<String> dateList = new ArrayList<>();SimpleDateFormat sdf = new SimpleDateFor ...
微信小程序云函数获取近七天或近一个月的数据，使用云开发已修复时区的问题
使用了云开发的微信小程序,就不能方便地用mysql的to_days函数处理,获取关于时间的数据思路: 查询微信小程序文档后考虑使用聚合操作不可能只是去获取一个固定时间,而是一个区间的时间段 Com ...
数据库查询近七天的数据
1.查询近七天的数据 SELECT * FROM agentclass WHERE platformid = 1 AND unionname = '联盟1' AND levelname = '级别1' ...
Spring Rdbms操作（二）——SqlFunction 获取表数据条数
SqlFunction:获取单行结果集.默认返回int. import javax.sql.DataSource; import org.springframework.jdbc.object.Sql ...
MySQL获取近12个月数据SQL
##获取近12个月数据 SELECT TYEAR,TMONTH,CONCAT(SUBSTRING(TYEAR,3),'/',TMONTH) AS T_TIME,MARKETNAME,SJJY_WGDL ...
js获取对象里数据条数
js获取对象里数据条数对象无法使用length获取长度,需要使用js原生方法里的Object.keys方法进行获取,具体用法如下: let obj = {'a1': {'name': '张三''}, ...
HBase查询一张表的数据条数的方法
HBase查询一张表的数据条数的方法文章目录 HBase查询一张表的数据条数的方法 0.写在前面 1.HBase-Shell的count命令 2.Scan操作获取数据条数 3.执行Mapreduce ...
MyBatis Plus 的 Service 统计数据条数
MyBatis Plus 的 Service 统计数据条数 1. 简单介绍 2. 接口说明 3. 参数说明 4. 实例代码 4.1 无条件,查询整个数据表记录总数 4.2 有条件,查询整个数据表记录总 ...

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

页面效果：

页面代码：

后台代码：

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

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

sql语句

sql语句执行结果如下：

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

最新文章

热门文章