feat: 新增会员统计组件和优化数据展示

- 在会员统计页面中新增会员地域分布和性别分布组件
- 更新会员统计 API，支持获取会员汇总和地区统计数据
- 优化数据加载逻辑，提升用户体验
- 引入分析概览组件以展示关键统计信息

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

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+import type { DictDataType } from '#/utils/dict';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { AnalysisChartCard } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { DICT_TYPE, getIntDictOptions } from '#/utils/dict';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+const sexChartOptions = reactive({
+  tooltip: {
+    trigger: 'item' as const,
+    confine: true,
+    formatter: '{a} <br/>{b} : {c} ({d}%)',
+  },
+  legend: {
+    orient: 'vertical' as const,
+    left: 'right',
+  },
+  roseType: 'area',
+  series: [
+    {
+      name: '会员性别',
+      type: 'pie' as const,
+      label: {
+        show: false,
+      },
+      labelLine: {
+        show: false,
+      },
+      data: [] as any[],
+    },
+  ],
+});
+
+/** 按照性别，查询会员统计列表 */
+const getMemberSexStatisticsList = async () => {
+  const list = await MemberStatisticsApi.getMemberSexStatisticsList();
+  const dictDataList = getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX);
+  dictDataList.push({ label: '未知', value: null } as any);
+  sexChartOptions.series![0].data = dictDataList.map(
+    (dictData: DictDataType) => {
+      const userCount = list.find(
+        (item: MallMemberStatisticsApi.SexStatistics) =>
+          item.sex === dictData.value,
+      )?.userCount;
+      return {
+        name: dictData.label,
+        value: userCount || 0,
+      };
+    },
+  );
+};
+
+onMounted(async () => {
+  await getMemberSexStatisticsList();
+  renderEcharts(sexChartOptions);
+});
+</script>
+
+<template>
+  <AnalysisChartCard title="会员性别分布">
+    <EchartsUI ref="chartRef" />
+  </AnalysisChartCard>
+</template>