頁面效果：

頁面代碼：

//div用來實現(xiàn)折線圖<div class="echarts" id="look" style="width:47%; height:350px;background-color: #4e896f;float: left;margin-left: 10px;display: inline"></div> //引入echarts.js 可以echarts官網(wǎng)進行下載，然后放入項目中即可。如下圖所示：<script src="admin/plugins/echarts/echarts.min.js"></script> <script>// 根據(jù)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}}},//在折線圖正上方設(shè)置說明legend: {data: ['瀏覽量']},//在這里設(shè)置x軸 data為x軸上面顯示的數(shù)據(jù)xAxis: [{type: 'category',data: [],}],//在這里設(shè)置y軸 //name是y軸上面的說明//min是y軸最小值//max是y軸最大值//interval是y軸的區(qū)間yAxis: [{type: 'value',name: '人數(shù)',min: 0,max: 250,interval: 50,axisLabel: {formatter: '{value} 人'}},],//數(shù)據(jù)源//type為類型，line:折線圖,bar:柱狀圖//series: [{name: '瀏覽量',type: 'line',data: []},]};myChart.showLoading(); //數(shù)據(jù)加載完之前先顯示一段簡單的loading動畫//聲明兩個數(shù)組，用來臨時存放數(shù)據(jù)var weeks1 = [];var looks = [];$.ajax({type : "POST",async : true, //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執(zhí)行）url : "/article/looklist",dataType : "json",success : function(data) {//請求成功時執(zhí)行該函數(shù)內(nèi)容，result即為服務(wù)器返回的json對象if (data.status==200) {var obj = eval(data.data); //解析后臺傳來的json數(shù)據(jù)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({ //加載數(shù)據(jù)圖表xAxis : {data : weeks1},series : [ {// 根據(jù)名字對應(yīng)到相應(yīng)的系列name : '瀏覽量',data : looks} ]});}else{alert("后臺數(shù)據(jù)獲取失敗!");}},error : function(errorMsg) {//請求失敗時執(zhí)行該函數(shù)alert("圖表請求數(shù)據(jù)失敗!");myChart.hideLoading();}})// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。myChart.setOption(option); </script>

echarts.js在項目中存放的位置（供參考）

后臺代碼：

從數(shù)據(jù)庫獲取數(shù)據(jù)，返回給前臺

//EchartsEntity 是一個對象 里面有count和time屬性@PostMapping("/looklist")@ResponseBodypublic ResponseVo looklist(){//先獲取近七天的日期List<String> sevenDate = getSevenDate();//查詢近七天的數(shù)據(jù)量 sql語句在后面List<EchartsEntity> articleList = articleService.selectWeekLookCount(sevenDate);//創(chuàng)建一個新集合 用來存放最終的數(shù)據(jù)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;//遍歷獲取到的數(shù)據(jù)for(int y =- 0; y < articleList.size(); y++){//用來判斷某一天是否有數(shù)據(jù) 如果有就存到list中if (sevenDate.get(i).equals(articleList.get(y).getTime())){echartsEntity.setNum(articleList.get(y).getNum());list.add(echartsEntity);b = true;break;}}//如果沒有 就設(shè)置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', //給條數(shù)設(shè)置別名為numDATE_FORMAT(download_log_time,'%Y-%m-%d') AS 'time' //給時間設(shè)置別名為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語句執(zhí)行結(jié)果如下：

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的Java获取近七天的数据条数，及页面实现折线图(附前后端代码)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。