feat：【mall 商城】会员统计【ele】100% 全部完成

apps/web-ele/src/views/mall/statistics/member/modules/sex-card.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+
+import { onMounted, ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { ElCard } from 'element-plus';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+
+import { getSexChartOptions } from './sex-chart-options';
+
+/** 会员性别比例卡片 */
+defineOptions({ name: 'MemberSexCard' });
+
+const loading = ref(true);
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 按照性别，查询会员统计列表 */
+async function getMemberSexStatisticsList() {
+  loading.value = true;
+  try {
+    const list = await MemberStatisticsApi.getMemberSexStatisticsList();
+    const dictDataList = getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number');
+    dictDataList.push({ label: '未知', value: null } as any);
+    const chartData = dictDataList.map((dictData: any) => {
+      const userCount = list.find(
+        (item: MallMemberStatisticsApi.SexStatistics) =>
+          item.sex === dictData.value,
+      )?.userCount;
+      return {
+        name: dictData.label,
+        value: userCount || 0,
+      };
+    });
+    // 更新 Echarts 数据
+    await renderEcharts(getSexChartOptions(chartData));
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  getMemberSexStatisticsList();
+});
+</script>
+
+<template>
+  <ElCard class="h-full">
+    <template #header>
+      <span>会员性别比例</span>
+    </template>
+    <div v-loading="loading">
+      <EchartsUI ref="chartRef" />
+    </div>
+  </ElCard>
+</template>