SpringBoot專案實戰雜貨鋪之登錄訪問量可視化條形圖（六）

前言

在我們的雜貨鋪實戰專案中，用到了如圖所示的統計圖，那么鑒于有同學問到了這個是怎么制作的，那這里就針對我們的平臺訪問量的條形圖以及后臺的邏輯實作，做一個簡單的介紹，

平臺訪問量邏輯

那么針對平臺訪問量的后臺處理邏輯就是，當有人訪問我們的雜貨鋪的時候，就針對資料庫中的訪問量做一個+1的操作，

那么如果是當天第一個訪問平臺的，我們就做一個判斷，資料庫中是否存在今天的訪問資料，如果存在，做+1操作，如果不存在，我們就創建一條當天訪問量為1的資料，

以下是次統計圖的主要代碼：

    /**
     * 訪問量生成
     *
     * @param
     * @return
     */
    @Override
    synchronized public void insertCountVisit() {
        // 查詢是否存在今天的統計資料
        Count todayCount = countMapper.selectTodayCount();
        
        if(todayCount == null){
            // 執行插入，今天的第一條訪問量資料
            Count countPram = new Count();
            // 時間為今天
            Date date = new Date();
            countPram.setCountTime(date);
            // 訪問量
            countPram.setVisit("1");
            // 執行插入
            countMapper.insertTodayCountVisit(countPram);
        } else if(todayCount != null){
            // 執行修改，訪問量+1操作
            String count = todayCount.getVisit();
            String countAdd = String.valueOf(Integer.valueOf(count) + 1);

            Count countPram = new Count();
            // 訪問量
            countPram.setVisit(countAdd);
            // 執行修改
            countMapper.updateCount(countPram);
        }
    }

具體實作

官網也有許多的其他型別的圖示，大叫可以任意挑選，強大至極，恐怖如斯：

我們來講一講Echarts怎么使用：
一、你可以下載相應的JS檔案，放到本地路徑，然后在頁面引入對應的JS檔案就可以使用了，
二、這種方法方便快捷，寫在HTML檔案中即用，前提是你有網路，如下：

<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>

資料庫（mysql）查詢陳述句：

    <select id="selectAllCount" resultType="com.gantiexia.count.entity.Count">
        select
            id id,
            visit visit,
            str_to_date(count_time,'%Y-%m-%d') countTimeText
        from
            t_count
        where
            date(count_time) >= DATE_SUB(CURDATE(), INTERVAL 6 DAY)
    </select>

這里簡單說一下我們的查詢條件，和Oracle一樣，有各自的查詢陳述句以及相應的函式運算式，時間格式的寫法也是不同的，此處CURDATE()代表的是當天的時間格式為YYYY-MM-DD的時間格式的日期，INTERVAL 6 DAY表示的就是查詢當前資料庫中存在的最近六天的資料，

條形圖代碼：

// 最近七天平臺訪問量條形圖
    $.ajax({
        type:"post",
        url : "/count/recentlyCount",
        async:false,
        success:function (data) {
            // X軸資料
            var x = [];
            // y軸資料
            var y = [];

            for(var i=0;i<data.length;i++){
                x.push(data[i].countTimeText);
                y.push(data[i].visit);
            }

            var myChart = echarts.init(document.getElementById('EchartOrder'));
            // 指定圖表的配置項和資料
            var option = {
                title: {
                    text: '最近七天平臺訪問量'
                },
                tooltip: {},
                toolbox: {
                    feature: {
                        saveAsImage: {},
                        left: 'center'
                    }
                },
                xAxis: {
                    data: x
                },
                yAxis: {},
                series: [{
                    name: '訪問量',
                    type: 'bar',
                    data: y
                }]
            };
            // 渲染
            myChart.setOption(option);
        }
    })

由以上代碼可以看出我們只需要在對應的data上對應我們相應的坐標軸的陣列即可，使用非常方便，

我們看一下平臺今天自動生成的訪問量：

如圖可以看出，中間時間有間隔，那是因為我們當天沒有訪問量的生成，所以這里展示的就是平臺最近七天產生訪問量的資料，

滑鼠移動到對應的柱子上，顯示當天的訪問量：

具體的專案代碼已經上傳到了GitHub，有興趣的同學可以私聊博主獲取地址，