樣式如下：

折線圖頁面所需程式碼：

function bind1(result) {
            var arr1 = [];  //這三個陣列是之後js返回的所需要的資料
            var arr2 = [];
            var arr3 = [];
            for(var i = 0; i <result.length; i++)
            {
               arr1[i] = result[i].outNumber;
               arr2[i] = result[i].inNumber;
               
 
arr3[i] = result[i].out_time;
            }
            var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
            var lineoption = {
                title: {
                    text: '借閱歸還資料(最多近七天)'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['借出數','歸還數']
                },
                grid: {
                    x: 40,
                    x2: 40,
                    y2: 24
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: arr3
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} °C'
                        }
                    }
                ],
                series: [
                    {
                        name: '借出數',
                        type: 'line',
                        data: arr1 ,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                    ,{
                        name: '歸還數',
                        type: 'line',
                        data: arr2 ,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            lineChart.setOption(lineoption);
            $(window).resize(lineChart.resize);
        }
 

JS程式碼：

 //折型圖
        $.ajax({
            type: 'get',
            async: false, //同步執行
            url: ctx + 'system/borrower/listTime', //後臺地址
            data: {}, //無引數
            dataType: 'json', //返回資料形式為json
            success: function (result) {
                if (result) {
                    //把result(即Json資料)以引數形式放入Echarts程式碼中
                    var arr = [];
                    for (var i = 0; i 
 
<result.data.length; i++) {
                        arr[i] = result.data[i];
                    }
                    bind1(arr);
                }
            },
            error: function (errorMsg) {
                alert("載入資料失敗");
            }
        }); //ajax

後臺Contrller程式碼：

    /**
     * 查詢近七天的借閱和歸還量
     */
    @GetMapping("/listTime")
    @ResponseBody
    public AjaxResult listTime()
    {
        List<Map<String, Object>> list = borrowerInfoService.selectBorrowerlistTime();
        return AjaxResult.success(list);
    }

返回的JSON格式：

資料難點：

因為設計沒有設計好，導致我是根據借出時間和歸回時間來判斷借出和歸還量，所以在sql處理花了點時間，大致處理如下圖：

把上面兩組資料合併，得到如下：

解決思路就是，先利用union把兩次資料的時間合併在一起，再去填入number的數量

mybatis程式碼如下：查詢書籍七天以內的借閱和借出的數量

    <select id="selectBorrowerlistTime" parameterType="BorrowerInfo" resultType="java.util.Map">
        SELECT a.time out_time,(SELECT COUNT(out_time)  FROM borrower_info
                       WHERE out_time = a.time) outNumber,(SELECT COUNT(in_time)  FROM borrower_info
                                                           WHERE in_time = a.time) inNumber
        FROM
            (SELECT in_time AS TIME FROM `borrower_info` WHERE
                DATE_SUB(CURDATE(), INTERVAL 7 DAY ) &lt;= date ( out_time )
                                                           AND in_time IS NOT NULL
             UNION
             SELECT `out_time` AS TIME FROM `borrower_info` WHERE
                 DATE_SUB(CURDATE(), INTERVAL 7 DAY ) &lt;= date ( out_time )
            )a

        ORDER BY a.TIME
    </select>