From 63fa5681decee282ebbe27d043d1dd3510e317ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=8F?= <1978476055@qq.com>
Date: Wed, 10 Jul 2024 14:05:37 +0800
Subject: [PATCH] 1

---
 .../daily-statistics/components/DayData.vue   | 761 ++++++++++--------
 src/views/daily-statistics/index.vue          |   1 +
 2 files changed, 412 insertions(+), 350 deletions(-)

diff --git a/src/views/daily-statistics/components/DayData.vue b/src/views/daily-statistics/components/DayData.vue
index 62d2f4e..cb6ec2b 100644
--- a/src/views/daily-statistics/components/DayData.vue
+++ b/src/views/daily-statistics/components/DayData.vue
@@ -1,358 +1,419 @@
 <template>
-    <div class="box-card statistics">
-        <el-tabs stretch v-model="activeName">
-            <el-tab-pane label="用户分析图" name="first">
-                <echarts-from v-if="activeName=='first'" ref="optionUserData" :option-data="optionUserData" :styles="style" height="100%" width="100%" />
-            </el-tab-pane>
-            <el-tab-pane label="订单数量分析图" name="second">
-                <echarts-from v-if="activeName=='second'" ref="optionOrderData" :option-data="optionOrderData" :styles="style" height="100%" width="100%" />
-            </el-tab-pane>
-            <el-tab-pane label="订单金额分析图" name="third">
-                <echarts-from v-if="activeName=='third'" ref="optionOrderNumber" :option-data="optionOrderNumber" :styles="style" height="100%" width="100%" />
-            </el-tab-pane>
-        </el-tabs>
-    </div>
-    </template>
-    
-    <script>
-    import echartsFrom from '@/components/echarts/index'
-    import { roterPre } from '@/settings'
-    export default {
-        name: 'DayData',
-        components: {
-            echartsFrom
+  <div class="box-card statistics">
+    <el-tabs stretch v-model="activeName">
+      <el-tab-pane label="用户分析图" name="first">
+        <echarts-from
+          v-if="activeName == 'first'"
+          ref="optionUserData"
+          :option-data="optionUserData"
+          :styles="style"
+          height="100%"
+          width="100%"
+        />
+      </el-tab-pane>
+      <el-tab-pane label="订单数量分析图" name="second">
+        <echarts-from
+          v-if="activeName == 'second'"
+          ref="optionOrderData"
+          :option-data="optionOrderData"
+          :styles="style"
+          height="100%"
+          width="100%"
+        />
+      </el-tab-pane>
+      <el-tab-pane label="订单金额分析图" name="third">
+        <echarts-from
+          v-if="activeName == 'third'"
+          ref="optionOrderNumber"
+          :option-data="optionOrderNumber"
+          :styles="style"
+          height="100%"
+          width="100%"
+        />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import echartsFrom from "@/components/echarts/index";
+import { roterPre } from "@/settings";
+export default {
+  name: "DayData",
+  components: {
+    echartsFrom,
+  },
+  props: {
+    tableData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      roterPre: roterPre,
+      optionUserData: {},
+      optionOrderData: {},
+      optionOrderNumber: {},
+      listLoading: true,
+      activeName: "first",
+      style: {
+        height: "360px",
+      },
+    };
+  },
+  watch: {
+    tableData() {
+      this.getList();
+    },
+  },
+  methods: {
+    getLine(newUserList, userList, timer, activeCountList) {
+      const seriesData = [
+        {
+          name: "新增用户(人)",
+          type: "line",
+          stack: "用户量",
+          itemStyle: {
+            normal: {
+              color: "#5AD8A6",
+              lineStyle: {
+                color: "#5AD8A6",
+              },
+            },
+          },
+          data: newUserList,
+          smooth: false,
         },
-        props:{
-            tableData: {
-                type: Array,
-                default: () => []
-            }
+        {
+          name: "活跃人数(人)",
+          type: "line",
+          stack: "用户量",
+          itemStyle: {
+            normal: {
+              color: "#5D7092",
+              lineStyle: {
+                color: "#5D7092",
+              },
+            },
+          },
+          data: activeCountList,
+          smooth: false,
         },
-        data() {
-          return {
-            statisticsData: [],
-            roterPre: roterPre,
-            optionUserData:{},
-            optionOrderData:{},
-            optionOrderNumber:{},
-            newUserList:[],
-            order_amount:[],
-            order_coupon:[],
-            refund_amount:[],
-            pay_count:[],
-            order_count:[],
-            userList:[],
-            timer:[],
-            listLoading:true,
-            activeName:'first',
-            style:{
-                height: '360px'
-            }
+        {
+          name: "累计用户(人)",
+          type: "line",
+          stack: "用户量",
+          yAxisIndex: 1,
+          itemStyle: {
+            normal: {
+              color: "#5B8FF9",
+              lineStyle: {
+                color: "#5B8FF9",
+              },
+            },
+          },
+          data: userList,
+          smooth: false,
+        },
+      ];
+      this.optionUserData = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+        },
+        legend: {
+          data: ["新增用户(人)", "累计用户(人)", "活跃人数(人)"],
+          orient: "vertical",
+          x: "right",
+          y: "center",
+          align: "left",
+        },
+        grid: {
+          top: "8%",
+          left: "2%",
+          right: "8%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        axisLine: {
+          show: false,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              alignWithLabel: true,
+              lineStyle: {
+                color: "#D7DDE4",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              interval: 0,
+              rotate: 50,
+              textStyle: {
+                color: "#7F8B9C",
+              },
+            },
+            data: Array.from(new Set(timer)),
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            inverse: false,
+          },
+          {
+            type: "value",
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        series: seriesData,
+      };
+    },
+    getOrderLine(order_amount, order_coupon, refund_amount, timer) {
+      this.optionOrderData = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+        },
+        legend: {
+          data: [
+            "实付订单金额(含运费/元)",
+            "抵扣券使用数量",
+            "退订单退款金额(元)",
+          ],
+          orient: "vertical",
+          x: "right",
+          y: "center",
+          align: "left",
+        },
+        grid: {
+          left: "3%",
+          right: "12%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              alignWithLabel: true,
+              lineStyle: {
+                color: "#D7DDE4",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              interval: 0,
+              rotate: 50,
+              textStyle: {
+                color: "#7F8B9C",
+              },
+            },
+            data: Array.from(new Set(timer)),
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+          },
+        ],
+        series: [
+          {
+            name: "实付订单金额(含运费/元)",
+            type: "line",
+            stack: "Total",
+            areaStyle: {},
+            emphasis: {
+              focus: "series",
+            },
+            data: order_amount,
+          },
+          {
+            name: "抵扣券使用数量",
+            type: "line",
+            stack: "Total",
+            areaStyle: {},
+            emphasis: {
+              focus: "series",
+            },
+            data: order_coupon,
+          },
+          {
+            name: "退订单退款金额(元)",
+            type: "line",
+            stack: "Total",
+            label: {
+              show: true,
+              position: "top",
+            },
+            areaStyle: {},
+            emphasis: {
+              focus: "series",
+            },
+            data: refund_amount,
+          },
+        ],
+      };
+    },
+    getBar(order_count, pay_count, timer) {
+      this.optionOrderNumber = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "12%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        legend: {
+          data: ["支付人数(人)", "支付订单数(单)"],
+          orient: "vertical",
+          x: "right",
+          y: "center",
+          align: "left",
+        },
+        xAxis: [
+          {
+            type: "category",
+            // boundaryGap: false,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              alignWithLabel: true,
+              lineStyle: {
+                color: "#D7DDE4",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              interval: 0,
+              rotate: 50,
+              textStyle: {
+                color: "#7F8B9C",
+              },
+            },
+            data: Array.from(new Set(timer)),
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
           }
-        },
-        watch:{
-            tableData(){
-                this.getList()
-            }
-        },
-        methods: {
-            getLine(newUserList,userList,timer){
-                const seriesData = [
-                        {
-                            name: "新增用户(人)",
-                            type: "line",
-                            stack: "用户量",
-                            itemStyle: {
-                            normal: {
-                                color: "#5AD8A6",
-                                lineStyle: {
-                                color: "#5AD8A6"
-                                }
-                            }
-                            },
-                            data: newUserList,
-                            smooth: false
-                        },
-                        {
-                            name: "累计用户(人)",
-                            type: "line",
-                            stack: "用户量",
-                            yAxisIndex: 1,
-                            itemStyle: {
-                            normal: {
-                                color: "#5B8FF9",
-                                lineStyle: {
-                                color: "#5B8FF9"
-                                }
-                            }
-                            },
-                            data: userList,
-                            smooth: false
-                        }
-                        ];
-                        this.optionUserData = {
-                        tooltip: {
-                            trigger: "axis",
-                            axisPointer: {
-                            type: "cross",
-                            label: {
-                                backgroundColor: "#6a7985"
-                            }
-                            }
-                        },
-                        legend: {
-                            data: ["新增用户(人)", "累计用户(人)"],
-                            orient: "vertical",
-                            x:'right',
-                            y:'center',
-                            align:'left'
-                        },
-                        grid: {
-                            top:'8%',
-                            left: "2%",
-                            right: "8%",
-                            bottom: "3%",
-                            containLabel: true
-                        },
-                        axisLine: {
-                            show: false
-                        },
-                        xAxis: [
-                            {
-                            type: "category",
-                            boundaryGap: false,
-                            axisLine: {
-                                show: false
-                            },
-                            axisTick: {
-                                alignWithLabel: true,
-                                lineStyle: {
-                                color: "#D7DDE4"
-                                }
-                            },
-                            splitLine: {
-                                show: false
-                            },
-                            axisLabel: {
-                                interval: 0,
-                                rotate: 50,
-                                textStyle: {
-                                color: "#7F8B9C"
-                                }
-                            },
-                            data: Array.from(new Set(timer))
-                            }
-                        ],
-                        yAxis: [
-                            {
-                            type: "value",
-                            inverse: false,
-                            },
-                            {
-                            type: "value",
-                            splitLine: {
-                                show: false
-                            }
-                            }
-                        ],
-                            series: seriesData
-                        };
+        ],
+        series: [
+          {
+            name: "支付人数(人)",
+            type: "bar",
+            // barGap: 0,
+            itemStyle: {
+                normal: {
+                    color: "#ff9900",
+                    lineStyle: {
+                        color: "#ff9900",
+                    },
+                },
             },
-            getOrderLine(order_amount,order_coupon,refund_amount,timer){
-                this.optionOrderData = {
-                    tooltip: {
-                        trigger: 'axis',
-                        axisPointer: {
-                        type: 'cross',
-                        label: {
-                            backgroundColor: '#6a7985'
-                        }
-                        }
-                    },
-                    legend: {
-                        data: ['实付订单金额(含运费/元)', '抵扣券使用数量', '退订单退款金额(元)'],
-                        orient: "vertical",
-                            x:'right',
-                            y:'center',
-                            align:'left'
-                    },
-                    grid: {
-                        left: '3%',
-                        right: '12%',
-                        bottom: '3%',
-                        containLabel: true
-                    },
-                    xAxis: [
-                            {
-                            type: "category",
-                            boundaryGap: false,
-                            axisLine: {
-                                show: false
-                            },
-                            axisTick: {
-                                alignWithLabel: true,
-                                lineStyle: {
-                                color: "#D7DDE4"
-                                }
-                            },
-                            splitLine: {
-                                show: false
-                            },
-                            axisLabel: {
-                                interval: 0,
-                                rotate: 50,
-                                textStyle: {
-                                color: "#7F8B9C"
-                                }
-                            },
-                            data: Array.from(new Set(timer))
-                            }
-                        ],
-                    yAxis: [
-                        {
-                        type: 'value'
-                        }
-                    ],
-                    series: [
-                        {
-                            name: '实付订单金额(含运费/元)',
-                            type: 'line',
-                            stack: 'Total',
-                            areaStyle: {},
-                            emphasis: {
-                                focus: 'series'
-                            },
-                            data: order_amount
-                        },
-                        {
-                            name: '抵扣券使用数量',
-                            type: 'line',
-                            stack: 'Total',
-                            areaStyle: {},
-                            emphasis: {
-                                focus: 'series'
-                            },
-                            data: order_coupon
-                        },
-                        {
-                            name: '退订单退款金额(元)',
-                            type: 'line',
-                            stack: 'Total',
-                            label: {
-                                show: true,
-                                position: 'top'
-                            },
-                            areaStyle: {},
-                            emphasis: {
-                                focus: 'series'
-                            },
-                            data: refund_amount
-                        }
-                    ]
-                    };
+            emphasis: {
+              focus: "series",
             },
-            getBar(order_count,pay_count,timer){
-                this.optionOrderNumber = {
-                    tooltip: {
-                        trigger: 'axis',
-                        axisPointer: {
-                        type: 'cross',
-                        label: {
-                            backgroundColor: '#6a7985'
-                        }
-                        }
+            data: pay_count,
+          },
+          {
+            name: "支付订单数(单)",
+            type: "bar",
+            itemStyle: {
+                normal: {
+                    color: "#20894d",
+                    lineStyle: {
+                        color: "#20894d",
                     },
-                    legend: {
-                        data: ['支付人数(人)', '支付订单数(单)'],
-                        orient: "vertical",
-                            x:'right',
-                            y:'center',
-                            align:'left'
-                    },
-                    xAxis: [
-                            {
-                            type: "category",
-                            boundaryGap: false,
-                            axisLine: {
-                                show: false
-                            },
-                            axisTick: {
-                                alignWithLabel: true,
-                                lineStyle: {
-                                color: "#D7DDE4"
-                                }
-                            },
-                            splitLine: {
-                                show: false
-                            },
-                            axisLabel: {
-                                interval: 0,
-                                rotate: 50,
-                                textStyle: {
-                                color: "#7F8B9C"
-                                }
-                            },
-                            data: Array.from(new Set(timer))
-                            }
-                        ],
-                    yAxis: [
-                        {
-                        type: 'value'
-                        }
-                    ],
-                    series: [
-                        {
-                            name: '支付人数(人)',
-                            type: 'bar',
-                            barGap: 0,
-                            emphasis: {
-                                focus: 'series'
-                            },
-                            data: order_count
-                        },
-                        {
-                            name: '支付订单数(单)',
-                            type: 'bar',
-                            emphasis: {
-                                focus: 'series'
-                            },
-                            data: pay_count
-                        }
-                        ]
-                    }
+                },
             },
-            getList(){
-                this.newUserList= []
-                this.userList= []
-                this.timer= []
-                this.order_coupon= []
-                this.refund_amount= []
-                this.order_count= []
-                this.pay_count= []
-                this.order_amount = []//订单金额
-                this.tableData.map(item => {
-                    this.newUserList.push(item.reg_count);
-                    this.userList.push(item.user_count);
-                    this.timer.push(item.date);
-                    this.order_amount.push(item.order_amount) //订单金额
-                    this.order_coupon.push(item.order_coupon) //优惠券
-                    this.refund_amount.push(item.refund_amount) //退款
-                    this.order_count.push(item.order_count)
-                    this.pay_count.push(item.pay_count)
-                });
-                this.getLine(this.newUserList,this.userList,this.timer);
-                this.getOrderLine(this.order_amount,this.order_coupon,this.refund_amount,this.timer);
-                this.getBar(this.order_count,this.pay_count,this.timer)
-            }
-        }
-    }
-    </script>
-    
-    <style lang="scss" scoped>
-    .statistics {
-      min-width: 700px;
-      margin-top: 0;
-      background: #fff;
-    }
-    </style>
-    
\ No newline at end of file
+            emphasis: {
+              focus: "series",
+            },
+            data: order_count,
+          },
+        ],
+      };
+    },
+    getList() {
+      let newUserList = [];
+      let userList = [];
+      let timer = [];
+      let order_coupon = [];
+      let refund_amount = [];
+      let order_count = [];
+      let pay_count = [];
+      let order_amount = []; //订单金额
+      let activeCountList = [];
+      let Daydata = [...this.tableData]
+      // 对日期数组进行排序
+      Daydata.sort((a, b) => {
+        let dateA = new Date(a.date);
+        let dateB = new Date(b.date);
+        return dateA - dateB;
+      });
+      Daydata.map((item) => {
+        newUserList.push(item.reg_count);
+        userList.push(item.user_count);
+        timer.push(item.date);
+        order_amount.push(item.order_amount); //订单金额
+        order_coupon.push(item.order_coupon); //优惠券
+        refund_amount.push(item.refund_amount); //退款
+        order_count.push(item.order_count);
+        pay_count.push(item.pay_count);
+        activeCountList.push(item.active_count);
+      });
+      this.getLine(newUserList, userList, timer, activeCountList);
+      this.getOrderLine(order_amount, order_coupon, refund_amount, timer);
+      this.getBar(order_count, pay_count, timer);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.statistics {
+  min-width: 700px;
+  margin-top: 0;
+  background: #fff;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/daily-statistics/index.vue b/src/views/daily-statistics/index.vue
index ccb41cb..ddfb575 100644
--- a/src/views/daily-statistics/index.vue
+++ b/src/views/daily-statistics/index.vue
@@ -32,6 +32,7 @@
         <el-table-column label="id" min-width="130" prop="id"></el-table-column>
         <el-table-column label="时间" min-width="130" prop="date"></el-table-column>
         <el-table-column label="新增用户(人)" min-width="130" prop="reg_count"></el-table-column>
+        <el-table-column label="活跃人数(人)" min-width="130" prop="active_count"></el-table-column>
         <el-table-column label="累计用户(人)" min-width="130" prop="user_count"></el-table-column>
         <el-table-column label="支付人数(人)" min-width="130" prop="pay_count"></el-table-column>
         <el-table-column label="支付订单数(单)" min-width="130" prop="order_count"></el-table-column>