统计：会员统计

src/api/mall/statistics/member.ts

+import request from '@/config/axios'
+import dayjs from 'dayjs'
+import { TradeStatisticsComparisonRespVO } from '@/api/mall/statistics/trade'
+import { formatDate } from '@/utils/formatTime'
+
+/** 会员分析 Request VO */
+export interface MemberAnalyseReqVO {
+  times: [dayjs.ConfigType, dayjs.ConfigType]
+}
+
+/** 会员分析 Response VO */
+export interface MemberAnalyseRespVO {
+  visitorCount: number
+  orderUserCount: number
+  payUserCount: number
+  atv: number
+  comparison: TradeStatisticsComparisonRespVO<MemberAnalyseComparisonRespVO>
+}
+
+/** 会员分析对照数据 Response VO */
+export interface MemberAnalyseComparisonRespVO {
+  userCount: number
+  activeUserCount: number
+  rechargeUserCount: number
+}
+
+/** 会员地区统计 Response VO */
+export interface MemberAreaStatisticsRespVO {
+  areaId: number
+  areaName: string
+  userCount: number
+  orderCreateCount: number
+  orderPayCount: number
+  orderPayPrice: number
+}
+
+/** 会员性别统计 Response VO */
+export interface MemberSexStatisticsRespVO {
+  sex: number
+  userCount: number
+}
+
+/** 会员统计 Response VO */
+export interface MemberSummaryRespVO {
+  userCount: number
+  rechargeUserCount: number
+  rechargePrice: number
+  expensePrice: number
+}
+
+/** 会员终端统计 Response VO */
+export interface MemberTerminalStatisticsRespVO {
+  terminal: number
+  userCount: number
+}
+
+// 查询会员统计
+export const getMemberSummary = () => {
+  return request.get<MemberSummaryRespVO>({
+    url: '/statistics/member/summary'
+  })
+}
+
+// 查询会员分析数据
+export const getMemberAnalyse = (params: MemberAnalyseReqVO) => {
+  return request.get<MemberAnalyseRespVO>({
+    url: '/statistics/member/analyse',
+    params: { times: [formatDate(params.times[0]), formatDate(params.times[1])] }
+  })
+}
+
+// 按照省份，查询会员统计列表
+export const getMemberAreaStatisticsList = () => {
+  return request.get<MemberAreaStatisticsRespVO[]>({
+    url: '/statistics/member/get-area-statistics-list'
+  })
+}
+
+// 按照性别，查询会员统计列表
+export const getMemberSexStatisticsList = () => {
+  return request.get<MemberSexStatisticsRespVO[]>({
+    url: '/statistics/member/get-sex-statistics-list'
+  })
+}
+
+// 按照终端，查询会员统计列表
+export const getMemberTerminalStatisticsList = () => {
+  return request.get<MemberTerminalStatisticsRespVO[]>({
+    url: '/statistics/member/get-terminal-statistics-list'
+  })
+}

src/plugins/echarts/index.ts

@@ -18,7 +18,8 @@ import {
   AriaComponent,
   AriaComponent,
   ParallelComponent,
   ParallelComponent,
   LegendComponent,
   LegendComponent,
-  ToolboxComponent
+  ToolboxComponent,
+  VisualMapComponent
 } from 'echarts/components'
 } from 'echarts/components'
 
 
 import { CanvasRenderer } from 'echarts/renderers'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -32,6 +33,7 @@ echarts.use([
   PolarComponent,
   PolarComponent,
   AriaComponent,
   AriaComponent,
   ParallelComponent,
   ParallelComponent,
+  VisualMapComponent,
   BarChart,
   BarChart,
   LineChart,
   LineChart,
   PieChart,
   PieChart,

src/views/mall/statistics/trade/components/TradeStatisticValue.vue

 <template>
 <template>
-  <div class="bg flex flex-col gap-2 p-6">
+  <div class="flex flex-col gap-2 bg-[var(--el-bg-color-overlay)] p-6">
     <div class="flex items-center justify-between text-gray-500">
     <div class="flex items-center justify-between text-gray-500">
       <span>{{ title }}</span>
       <span>{{ title }}</span>
       <el-tooltip :content="tooltip" placement="top-start" v-if="tooltip">
       <el-tooltip :content="tooltip" placement="top-start" v-if="tooltip">
@@ -34,8 +34,3 @@ defineProps({
   percent: propTypes.oneOfType([Number, String]).def(0)
   percent: propTypes.oneOfType([Number, String]).def(0)
 })
 })
 </script>
 </script>
-<style scoped>
-.bg {
-  background-color: var(--el-bg-color-overlay);
-}
-</style>

src/views/mall/statistics/trade/components/TradeTrendValue.vue

 <template>
 <template>
-  <div class="mb-8 flex flex-row items-center gap-3">
+  <div class="flex flex-row items-center gap-3 rounded bg-[var(--el-bg-color-overlay)] p-4">
     <div
     <div
       class="h-12 w-12 flex flex-shrink-0 items-center justify-center rounded-1"
       class="h-12 w-12 flex flex-shrink-0 items-center justify-center rounded-1"
       :class="`${iconColor} ${iconBgColor}`"
       :class="`${iconColor} ${iconBgColor}`"
     >
     >
       <Icon :icon="icon" class="!text-6" />
       <Icon :icon="icon" class="!text-6" />
     </div>
     </div>
-    <div class="bg flex flex-col gap-1">
+    <div class="flex flex-col gap-1">
       <div class="flex items-center gap-1 text-gray-500">
       <div class="flex items-center gap-1 text-gray-500">
         <span class="text-3.5">{{ title }}</span>
         <span class="text-3.5">{{ title }}</span>
         <el-tooltip :content="tooltip" placement="top-start" v-if="tooltip">
         <el-tooltip :content="tooltip" placement="top-start" v-if="tooltip">
@@ -17,7 +17,10 @@
         <div class="text-7">
         <div class="text-7">
           <CountTo :prefix="prefix" :end-val="value" :decimals="decimals" />
           <CountTo :prefix="prefix" :end-val="value" :decimals="decimals" />
         </div>
         </div>
-        <span :class="toNumber(percent) > 0 ? 'text-red-500' : 'text-green-500'">
+        <span
+          v-if="percent != undefined"
+          :class="toNumber(percent) > 0 ? 'text-red-500' : 'text-green-500'"
+        >
           <span class="text-sm">{{ Math.abs(toNumber(percent)) }}%</span>
           <span class="text-sm">{{ Math.abs(toNumber(percent)) }}%</span>
           <Icon
           <Icon
             :icon="toNumber(percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'"
             :icon="toNumber(percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'"
@@ -44,11 +47,6 @@ defineProps({
   prefix: propTypes.string.def(''),
   prefix: propTypes.string.def(''),
   value: propTypes.number.def(0),
   value: propTypes.number.def(0),
   decimals: propTypes.number.def(0),
   decimals: propTypes.number.def(0),
-  percent: propTypes.oneOfType([Number, String]).def(0)
+  percent: propTypes.oneOfType([Number, String]).def(undefined)
 })
 })
 </script>
 </script>
-<style scoped>
-.bg {
-  background-color: var(--el-bg-color-overlay);
-}
-</style>

src/views/mall/statistics/trade/index.vue

@@ -218,7 +218,7 @@
           />
           />
         </el-col>
         </el-col>
       </el-row>
       </el-row>
-      <!-- 拆线图 -->
+      <!-- 折线图 -->
       <el-skeleton :loading="trendLoading" animated>
       <el-skeleton :loading="trendLoading" animated>
         <Echart :height="500" :options="lineChartOptions" />
         <Echart :height="500" :options="lineChartOptions" />
       </el-skeleton>
       </el-skeleton>