折线图

src/views/data_center/index.vue

@@ -392,6 +392,43 @@
             </div>
           </div>
         </div>
+        <div class="echart-box">
+          <div class="echart-require">
+            <el-cascader
+              size="medium"
+              :props="props"
+              collapse-tags
+              clearable
+              :options="$provinceCityList"
+              v-model="selectedOptions"
+              class="cascader-option"
+            >
+            </el-cascader>
+            <el-date-picker
+              v-model="dataValue"
+              type="daterange"
+              align="right"
+              unlink-panels
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :picker-options="pickerOptions"
+              value-format="yyyy-MM-dd"
+            >
+            </el-date-picker>
+            <el-button type="primary" size="small" @click="searchStatDaily"
+              >查询</el-button
+            >
+          </div>
+          <div class="echart-item-box">
+            <div class="echart-item" id="echart1"></div>
+            <div class="echart-item" id="echart2"></div>
+            <div class="echart-item" id="echart3"></div>
+            <div class="echart-item" id="echart4"></div>
+            <div class="echart-item" id="echart5"></div>
+            <div class="echart-item" id="echart6"></div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -404,6 +441,8 @@ import Header from "../../components/Header.vue";
 import NavMenu from "../../components/NavMenu.vue";
 import { getLogin } from "@/api/ajax";
 import { formatNumber } from "@/utils/defined";
+import { mapState } from "vuex";
+import * as echarts from "echarts";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: { Header, NavMenu },
@@ -419,10 +458,51 @@ export default {
       tableLoading: false,
       queryTime: this.getCurrentDateTime(),
       curDayStatData: null, // 当日统计数据
+      selectedOptions: [],
+      dataValue: [
+        new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)
+          .toISOString()
+          .split("T")[0],
+        new Date(new Date()).toISOString().split("T")[0],
+      ],
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      props: { multiple: true },
     };
   },
   //计算属性 类似于data概念
-  computed: {},
+  computed: {
+    ...mapState(["$provinceCityList"]),
+  },
   //监控data中数据变化
   watch: {},
   //方法集合
@@ -452,56 +532,501 @@ export default {
       getLogin(MethodName2, {
         goods_type: -1,
       }).then((res) => {});
+    },
+    // 获取时间
+    getCurrentDateTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = this.padNumber(now.getMonth() + 1); // 月份是从0开始的
+      const day = this.padNumber(now.getDate());
+      const hours = this.padNumber(now.getHours());
+      const minutes = this.padNumber(now.getMinutes());
+      return `${year}-${month}-${day} ${hours}:${minutes}`;
+    },
+    padNumber(num) {
+      return num < 10 ? "0" + num : num;
+    },
+    // 折线图数据
+    searchStatDaily() {
       // 统计每日人员数量
       let MethodName3 = "/ShopServer/Manager/DataStat/StatDailyPersonCount";
+      let province_id_list = [];
+      let city_id_list = [];
+      this.selectedOptions.forEach((item) => {
+        if (province_id_list.indexOf(item[0]) === -1) {
+          province_id_list.push(item[0]);
+        }
+        city_id_list.push(item[1] ? item[1] : "");
+      });
       let data1 = {
-        province_id_list: ["01", "02"],
-        city_id_list: ["0101", "0202"],
-        begin_date: "2024-01-01",
-        end_date: "2024-02-01",
+        province_id_list: province_id_list,
+        city_id_list: city_id_list,
+        begin_date:
+          this.dataValue && this.dataValue[0] ? this.dataValue[0] : "",
+        end_date: this.dataValue && this.dataValue[1] ? this.dataValue[1] : "",
       };
-      getLogin(MethodName3, data1).then((res) => {});
+      getLogin(MethodName3, data1).then((res) => {
+        let xAxisData = [];
+        let yAxisData = [];
+        if (res.status === 1) {
+          res.date_list.forEach((item) => {
+            xAxisData.push(item.date);
+            yAxisData.push(item.count);
+          });
+        }
+
+        const chartDom = document.getElementById("echart1");
+        const myChart = echarts.init(chartDom);
+        let option = {
+          title: {
+            text: "用户总数",
+          },
+          tooltip: {
+            trigger: "axis",
+          },
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xAxisData,
+            splitLine: {
+              // 设置 y 轴分割线为虚线
+              show: true,
+              lineStyle: {
+                type: "line",
+              },
+            },
+          },
+          yAxis: {
+            type: "value",
+            splitLine: {
+              // 设置 y 轴分割线为虚线
+              show: true,
+              lineStyle: {
+                type: "dashed",
+              },
+            },
+          },
+          series: [
+            {
+              type: "line",
+              data: yAxisData,
+              lineStyle: {
+                color: "#4080FF", // 这里设置为红色
+                width: 2, // 线条宽度
+              },
+              smooth: true, // 可选，是否平滑曲线
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(128, 166, 255, 1)", // 渐变颜色，可以设置多个不同的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(128, 166, 255, 0)", // 渐变颜色
+                  },
+                ]),
+              },
+            },
+          ],
+        };
+        option && myChart.setOption(option);
+      });
       // 统计每日机构数量
       let MethodName4 = "/ShopServer/Manager/DataStat/StatDailyOrgCount";
-      getLogin(MethodName4, data1).then((res) => {});
+      getLogin(MethodName4, data1).then((res) => {
+        let xAxisData = [];
+        let yAxisData = [];
+        if (res.status === 1) {
+          res.date_list.forEach((item) => {
+            xAxisData.push(item.date);
+            yAxisData.push(item.count);
+          });
+        }
+
+        const chartDom = document.getElementById("echart2");
+        const myChart = echarts.init(chartDom);
+        let option = {
+          title: {
+            text: "机构总数",
+          },
+          tooltip: {
+            trigger: "axis",
+          },
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xAxisData,
+            splitLine: {
+              // 设置 y 轴分割线为虚线
+              show: true,
+              lineStyle: {
+                type: "line",
+              },
+            },
+          },
+          yAxis: {
+            type: "value",
+            splitLine: {
+              // 设置 y 轴分割线为虚线
+              show: true,
+              lineStyle: {
+                type: "dashed",
+              },
+            },
+          },
+          series: [
+            {
+              type: "line",
+              data: yAxisData,
+              lineStyle: {
+                color: "#00B2FF", // 这里设置为红色
+                width: 2, // 线条宽度
+              },
+              smooth: true, // 可选，是否平滑曲线
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(3, 186, 226, 1)", // 渐变颜色，可以设置多个不同的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(3, 159, 226, 0)", // 渐变颜色
+                  },
+                ]),
+              },
+            },
+          ],
+        };
+        option && myChart.setOption(option);
+      });
       // 统计每日累计上课人数
       let MethodName5 =
         "/ShopServer/Manager/DataStat/StatDailyAccCoursePlayPersonCount";
-      getLogin(MethodName5, data1).then((res) => {});
+      getLogin(MethodName5, data1).then((res) => {
+        let xAxisData = [];
+        let yAxisData = [];
+        if (res.status === 1) {
+          res.date_list.forEach((item) => {
+            xAxisData.push(item.date);
+            yAxisData.push(item.count);
+          });
+        }
+
+        const chartDom = document.getElementById("echart3");
+        const myChart = echarts.init(chartDom);
+        let option = {
+          title: {
+            text: "累计上课人数",
+          },
+          tooltip: {
+            trigger: "axis",
+          },
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xAxisData,
+            splitLine: {
+              // 设置 y 轴分割线为虚线
+              show: true,
+              lineStyle: {
+                type: "line",
+              },
+            },
+          },
+          yAxis: {
+            type: "value",
+            splitLine: {
+              // 设置 y 轴分割线为虚线
+              show: true,
+              lineStyle: {
+                type: "dashed",
+              },
+            },
+          },
+          series: [
+            {
+              type: "line",
+              data: yAxisData,
+              lineStyle: {
+                color: "#4080FF", // 这里设置为红色
+                width: 2, // 线条宽度
+              },
+              smooth: true, // 可选，是否平滑曲线
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(128, 166, 255, 1)", // 渐变颜色，可以设置多个不同的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(128, 166, 255, 0)", // 渐变颜色
+                  },
+                ]),
+              },
+            },
+          ],
+        };
+        option && myChart.setOption(option);
+      });
       // 统计每日累计阅读时长
       let MethodName6 =
         "/ShopServer/Manager/DataStat/StatDailyAccArticleReadingDuration";
-      getLogin(MethodName6, data1).then((res) => {});
+      getLogin(MethodName6, data1).then((res) => {
+        let xAxisData = [];
+        let yAxisData = [];
+        if (res.status === 1) {
+          res.date_list.forEach((item) => {
+            xAxisData.push(item.date);
+            yAxisData.push(item.duration);
+          });
+        }
+
+        const chartDom = document.getElementById("echart5");
+        const myChart = echarts.init(chartDom);
+        let option = {
+          title: {
+            text: "平台总阅读时长",
+          },
+          tooltip: {
+            trigger: "axis",
+          },
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xAxisData,
+            splitLine: {
+              // 设置 y 轴分割线为虚线
+              show: true,
+              lineStyle: {
+                type: "line",
+              },
+            },
+          },
+          yAxis: {
+            type: "value",
+            splitLine: {
+              // 设置 y 轴分割线为虚线
+              show: true,
+              lineStyle: {
+                type: "dashed",
+              },
+            },
+          },
+          series: [
+            {
+              type: "line",
+              data: yAxisData,
+              lineStyle: {
+                color: "#4080FF", // 这里设置为红色
+                width: 2, // 线条宽度
+              },
+              smooth: true, // 可选，是否平滑曲线
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(128, 166, 255, 1)", // 渐变颜色，可以设置多个不同的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(128, 166, 255, 0)", // 渐变颜色
+                  },
+                ]),
+              },
+            },
+          ],
+        };
+        option && myChart.setOption(option);
+      });
       // 统计每日累计阅读词数
       let MethodName7 =
         "/ShopServer/Manager/DataStat/StatDailyAccArticleReadingWordCount";
-      getLogin(MethodName7, data1).then((res) => {});
+      getLogin(MethodName7, data1).then((res) => {
+        let xAxisData = [];
+        let yAxisData = [];
+        if (res.status === 1) {
+          res.date_list.forEach((item) => {
+            xAxisData.push(item.date);
+            yAxisData.push(item.count);
+          });
+        }
+
+        const chartDom = document.getElementById("echart6");
+        const myChart = echarts.init(chartDom);
+        let option = {
+          title: {
+            text: "平台总阅读词数",
+          },
+          tooltip: {
+            trigger: "axis",
+          },
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xAxisData,
+            splitLine: {
+              // 设置 y 轴分割线为虚线
+              show: true,
+              lineStyle: {
+                type: "line",
+              },
+            },
+          },
+          yAxis: {
+            type: "value",
+            splitLine: {
+              // 设置 y 轴分割线为虚线
+              show: true,
+              lineStyle: {
+                type: "dashed",
+              },
+            },
+          },
+          series: [
+            {
+              type: "line",
+              data: yAxisData,
+              lineStyle: {
+                color: "#00B2FF", // 这里设置为红色
+                width: 2, // 线条宽度
+              },
+              smooth: true, // 可选，是否平滑曲线
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(3, 186, 226, 1)", // 渐变颜色，可以设置多个不同的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(3, 159, 226, 0)", // 渐变颜色
+                  },
+                ]),
+              },
+            },
+          ],
+        };
+        option && myChart.setOption(option);
+      });
       // 统计每日累计上课人次
       let MethodName8 =
         "/ShopServer/Manager/DataStat/StatDailyAccCoursePlayCount";
-      getLogin(MethodName8, data1).then((res) => {});
-    },
-    // 获取时间
-    getCurrentDateTime() {
-      const now = new Date();
-      const year = now.getFullYear();
-      const month = this.padNumber(now.getMonth() + 1); // 月份是从0开始的
-      const day = this.padNumber(now.getDate());
-      const hours = this.padNumber(now.getHours());
-      const minutes = this.padNumber(now.getMinutes());
-      return `${year}-${month}-${day} ${hours}:${minutes}`;
-    },
-    padNumber(num) {
-      return num < 10 ? "0" + num : num;
+      getLogin(MethodName8, data1).then((res) => {
+        let xAxisData = [];
+        let yAxisData = [];
+        if (res.status === 1) {
+          res.date_list.forEach((item) => {
+            xAxisData.push(item.date);
+            yAxisData.push(item.count);
+          });
+        }
+
+        const chartDom = document.getElementById("echart4");
+        const myChart = echarts.init(chartDom);
+        let option = {
+          title: {
+            text: "累计上课人次",
+          },
+          tooltip: {
+            trigger: "axis",
+          },
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xAxisData,
+            splitLine: {
+              // 设置 y 轴分割线为虚线
+              show: true,
+              lineStyle: {
+                type: "line",
+              },
+            },
+          },
+          yAxis: {
+            type: "value",
+            splitLine: {
+              // 设置 y 轴分割线为虚线
+              show: true,
+              lineStyle: {
+                type: "dashed",
+              },
+            },
+          },
+          series: [
+            {
+              type: "line",
+              data: yAxisData,
+              lineStyle: {
+                color: "#00B2FF", // 这里设置为红色
+                width: 2, // 线条宽度
+              },
+              smooth: true, // 可选，是否平滑曲线
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(3, 186, 226, 1)", // 渐变颜色，可以设置多个不同的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(3, 159, 226, 0)", // 渐变颜色
+                  },
+                ]),
+              },
+            },
+          ],
+        };
+        option && myChart.setOption(option);
+      });
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
     this.getTableHeight();
     this.getData();
+    this.searchStatDaily();
   },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
   //生命周期-创建之前
   beforeCreated() {},
   //生命周期-挂载之前
@@ -522,6 +1047,7 @@ export default {
 /* @import url(); 引入css类 */
 .manage-root-contain-right {
   padding-top: 24px;
+  overflow: auto;
 }
 .top {
   border-radius: 6px;
@@ -613,4 +1139,43 @@ export default {
     }
   }
 }
+.echart-box {
+  border-radius: 4px;
+  background: #fff;
+  margin-top: 24px;
+  padding: 16px;
+  .echart-require {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    column-gap: 8px;
+  }
+  .cascader-option {
+    width: 206px;
+    height: 37px;
+    :deep .el-input {
+      width: 206px;
+      height: 37px !important;
+    }
+  }
+  :deep .el-range-editor.el-input__inner {
+    height: 37px;
+  }
+  :deep .el-date-editor .el-range-separator {
+    line-height: 30px;
+  }
+}
+.echart-item-box {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding-top: 16px;
+  .echart-item {
+    width: calc(50% - 8px);
+    height: 420px;
+    border-radius: 4px;
+    background: #f8f9fb;
+    padding: 24px;
+  }
+}
 </style>