11-9 展示 30 天趋势图

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;

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 {