README.md

 # Fairy Wiki
 
-![Fairy Wiki](https://gitee.com/yubinCloud/my-imgs-repo/raw/main/img/image-20210429230142271.png)
+![](https://img.shields.io/badge/license-MIT-000000.svg) ![](https://img.shields.io/badge/language-Java-orange.svg) ![](https://img.shields.io/badge/language-TypeScript-green.svg)
+
+![Fairy2_small](https://gitee.com/yubinCloud/my-imgs-repo/raw/main/img/Fairy2_small.png)
+
 
-![](https://img.shields.io/badge/license-MIT-000000.svg) ![](https://img.shields.io/badge/language-Java-orange.svg) ![](https://img.shields.io/badge/language-TypeScript-green.svg)
\ No newline at end of file

src/main/java/io/github/yubincloud/fairywiki/controller/EbookSnapshotController.java

@@ -23,9 +23,16 @@ public class EbookSnapshotController {
     private EbookSnapshotService ebookSnapshotService;
 
     @GetMapping("/get-statistic")
-    @ApiOperation(value = "从电子书快照中获取统计数据")
+    @ApiOperation(value = "从电子书快照中昨天和今天的获取统计数据")
     public RestfulModel<List<StatisticRespDto>> getStatistic() {
         List<StatisticRespDto> statisticRespDtoList = ebookSnapshotService.getStatistic();
         return new RestfulModel<>(ErrorCode.SUCCESS, "", statisticRespDtoList);
     }
+
+    @GetMapping("/get-30-statistic")
+    @ApiOperation(value = "从电子书快照中获取近30天的统计数据")
+    public RestfulModel<List<StatisticRespDto>> get30DayStatistic() {
+        List<StatisticRespDto> statisticRespDtoList = ebookSnapshotService.get30DayStatistic();
+        return new RestfulModel<>(ErrorCode.SUCCESS, "", statisticRespDtoList);
+    }
 }

src/main/java/io/github/yubincloud/fairywiki/dto/resp/StatisticRespDto.java

 package io.github.yubincloud.fairywiki.dto.resp;
 
+import com.fasterxml.jackson.annotation.JsonFormat;
 import lombok.Data;
 
 import java.util.Date;
 
 @Data
 public class StatisticRespDto {
+
+    @JsonFormat(pattern="MM-dd", timezone = "GMT+8")
     private Date date;
 
     private int viewCount;

src/main/java/io/github/yubincloud/fairywiki/mapper/EbookSnapshotMapperCustom.java

@@ -8,4 +8,6 @@ public interface EbookSnapshotMapperCustom {
     void genSnapshot();
 
     List<StatisticRespDto> getStatistic();
+
+    List<StatisticRespDto> get30DayStatistic();
 }

src/main/java/io/github/yubincloud/fairywiki/service/EbookSnapshotService.java

@@ -32,4 +32,11 @@ public class EbookSnapshotService {
         }
         return statisticDataList;
     }
+
+    /**
+     * 30天数值统计
+     */
+    public List<StatisticRespDto> get30DayStatistic() {
+        return ebookSnapshotMapperCustom.get30DayStatistic();
+    }
 }

src/main/resources/mapper/EbookSnapshotMapperCustom.xml

@@ -54,4 +54,20 @@
             t1.`date` ASC;
     </select>
 
+    <select id="get30DayStatistic" resultType="io.github.yubincloud.fairywiki.dto.resp.StatisticRespDto">
+        SELECT
+            t1.`date` AS `date`,
+            SUM(t1.view_count) AS viewCount,
+            SUM(t1.vote_count) AS voteCount
+        FROM
+            ebook_snapshot t1
+        WHERE
+            t1.`date` >= date_sub(curdate(), INTERVAL 30 DAY)
+        GROUP BY
+            t1.`date`
+        ORDER BY
+            t1.`date` ASC;
+    </select>
+
+
 </mapper>
\ No newline at end of file

web/src/components/the-welcome.vue

@@ -136,7 +136,10 @@ export default defineComponent({
     const statistic = ref();
     statistic.value = {};
 
-    const getStatistic = () => {
+    /**
+     * 生成昨天和今天的数据统计表格
+     */
+    const genTwoDayStatisticTable = () => {
       axios.get('/ebook-snapshot/get-statistic').then((response) => {
         const respData = response.data;
         if (respData.code === 0) {
@@ -158,28 +161,89 @@ export default defineComponent({
       });
     };
 
-    const testEcharts = () => {
-      const chart = echarts.init(document.getElementById('chart') as HTMLCanvasElement);
-      chart.setOption({
+    const init30DayEcharts = (list: any) => {
+      // 基于准备好的dom，初始化echarts实例
+      const statisticChart = echarts.init(document.getElementById('chart') as HTMLCanvasElement);
+
+      const xAxis = [];
+      const seriesView = [];
+      const seriesVote = [];
+      for (let i = 0; i < list.length; i++) {
+        const record = list[i];
+        xAxis.push(record.date);
+        seriesView.push(record.viewIncrease);
+        seriesVote.push(record.voteIncrease);
+      }
+
+      // 指定图表的配置项和数据
+      const option = {
         title: {
-          text: 'ECharts 入门示例'
+          text: '30天趋势图'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['总阅读量', '总点赞量']
+        },
+        grid: {
+          left: '1%',
+          right: '3%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
         },
-        tooltip: {},
         xAxis: {
-          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+          type: 'category',
+          boundaryGap: false,
+          data: xAxis
         },
-        yAxis: {},
-        series: [{
-          name: '销量',
-          type: 'bar',
-          data: [5, 20, 36, 10, 10, 20]
-        }]
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: '总阅读量',
+            type: 'line',
+            // stack: '总量', 不堆叠
+            data: seriesView,
+            smooth: true
+          },
+          {
+            name: '总点赞量',
+            type: 'line',
+            // stack: '总量', 不堆叠
+            data: seriesVote,
+            smooth: true
+          }
+        ]
+      };
+
+      // 使用刚指定的配置项和数据显示图表。
+      statisticChart.setOption(option);
+    };
+
+    /**
+     * 生成近30天的数据统计图
+     */
+    const gen30DayStatisticChart = () => {
+      axios.get('/ebook-snapshot/get-30-statistic').then((response) => {
+        const respData = response.data;
+        if (respData.code === 0) {
+          const statisticList = respData.data;
+          init30DayEcharts(statisticList);
+        }
       });
-    }
+    };
+
 
     onMounted(() => {
-      getStatistic();
-      testEcharts();
+      genTwoDayStatisticTable();
+      gen30DayStatisticChart();
     });
 
     return {