vision2

library-management/vue/src/views/home/HomeView.vue

@@ -1,20 +1,19 @@
 <template>
   <div>
-    <el-card style="margin: 20px 0; font-size: 18px">
-      <div style="margin-bottom: 10px">
-        B站关注：程序员青戈，手把手带你做毕设！
-      </div>
-     <div style="margin: 10px">
-       毕设、课设项目定制加up微信：xia_qing2012。代码纯手撸，安全靠谱！
-     </div>
-    </el-card>
     <div style="margin: 20px 0">
-      <el-select class="input" v-model="timeRange" placeholder="请选择" @change="load">  <!--  从后台加载最新的数据 -->
+      <el-select
+        class="input"
+        v-model="timeRange"
+        placeholder="请选择"
+        @change="load"
+      >
+        <!--  从后台加载最新的数据 -->
         <el-option
-            v-for="item in options"
+          v-for="item in options"
-            :key="item.value"
+          :key="item.value"
-            :label="item.label"
+          :label="item.label"
-            :value="item.value">
+          :value="item.value"
+        >
         </el-option>
       </el-select>
     </div>
@@ -25,89 +24,90 @@
 </template>
 
 <script>
-import Cookies from 'js-cookie'
+import Cookies from "js-cookie";
 import request from "@/utils/request";
-import * as echarts from 'echarts'
+import * as echarts from "echarts";
 
 const option = {
   title: {
-    text: '图书借还统计'
+    text: "图书借还统计",
   },
   tooltip: {
-    trigger: 'axis'
+    trigger: "axis",
   },
   legend: {
-    data: ['借书数量', '还书数量']
+    data: ["借书数量", "还书数量"],
   },
   grid: {
-    left: '3%',
+    left: "3%",
-    right: '4%',
+    right: "4%",
-    bottom: '3%',
+    bottom: "3%",
-    containLabel: true
+    containLabel: true,
   },
   toolbox: {
     feature: {
-      saveAsImage: {}
+      saveAsImage: {},
-    }
+    },
   },
   xAxis: {
-    type: 'category',
+    type: "category",
     boundaryGap: false,
-    data: []  // 从后台动态获取
+    data: [], // 从后台动态获取
   },
   yAxis: {
-    type: 'value'
+    type: "value",
   },
   series: [
     {
-      name: '借书数量',
+      name: "借书数量",
-      type: 'line',
+      type: "line",
-      stack: 'Total',
+      stack: "Total",
       smooth: true,
-      data: []     // 从后台动态获取
+      data: [], // 从后台动态获取
     },
     {
-      name: '还书数量',
+      name: "还书数量",
-      type: 'line',
+      type: "line",
-      stack: 'Total',
+      stack: "Total",
       smooth: true,
-      data: []     // 从后台动态获取
+      data: [], // 从后台动态获取
-    }
+    },
-  ]
+  ],
-}
+};
 
-  export default {
+export default {
-    data() {
+  data() {
-      return {
+    return {
-        admin: Cookies.get('admin') ? JSON.parse(Cookies.get('admin')) : {},
+      admin: Cookies.get("admin") ? JSON.parse(Cookies.get("admin")) : {},
-        lineBox: null,
+      lineBox: null,
-        timeRange: 'week',
+      timeRange: "week",
-        options: [
+      options: [
-          {label: '最近一周', value: 'week'},
+        { label: "最近一周", value: "week" },
-          {label: '最近一个月', value: 'month'},
+        { label: "最近一个月", value: "month" },
-          {label: '最近两个月', value: 'month2'},
+        { label: "最近两个月", value: "month2" },
-          {label: '最近三个月', value: 'month3'},
+        { label: "最近三个月", value: "month3" },
-        ]
+      ],
+    };
+  },
+  mounted() {
+    // 等页面元素全部初始化好
+    this.load();
+  },
+  methods: {
+    load() {
+      if (!this.lineBox) {
+        this.lineBox = echarts.init(document.getElementById("line")); // 初始化echarts容器
       }
+      // 从后台获取数据
+      request.get("/borrow/lineCharts/" + this.timeRange).then((res) => {
+        option.xAxis.data = res.data.date;
+        option.series[0].data = res.data.borrow;
+        option.series[1].data = res.data.retur;
+        this.lineBox.setOption(option); // 设置容器的属性值，当你的数据发生变化的时候，一定要重新setOption
+      });
     },
-    mounted() {  // 等页面元素全部初始化好
+  },
-      this.load()
+};
-    },
-    methods: {
-      load() {
-        if (!this.lineBox) {
-          this.lineBox = echarts.init(document.getElementById('line'))  // 初始化echarts容器
-        }
-        // 从后台获取数据
-        request.get('/borrow/lineCharts/' + this.timeRange).then(res => {
-          option.xAxis.data = res.data.date
-          option.series[0].data = res.data.borrow
-          option.series[1].data = res.data.retur
-          this.lineBox.setOption(option)  // 设置容器的属性值，当你的数据发生变化的时候，一定要重新setOption
-        })
-      }
-    }
-  }
 </script>
 
 <style>