feat：【mall 商城】会员统计【antd】45% area-card.vue 优化代码风格

apps/web-antd/src/views/mall/statistics/member/modules/area-card.vue

@@ -86,20 +86,15 @@ async function getMemberAreaStatisticsList() {
   loading.value = true;
   try {
     const list = await MemberStatisticsApi.getMemberAreaStatisticsList();
-
     areaStatisticsList.value = list.map(
       (item: MallMemberStatisticsApi.AreaStatistics) => ({
         ...item,
         areaName: areaReplace(item.areaName),
       }),
     );
-
     // 渲染图表
     const chartOptions = getAreaChartOptions(areaStatisticsList.value);
-
     await renderEcharts(chartOptions);
-  } catch (error) {
-    console.error('地域分布数据获取失败:', error);
   } finally {
     loading.value = false;
   }
@@ -116,7 +111,7 @@ onMounted(() => {
     <Spin :spinning="loading">
       <div class="flex gap-4">
         <div class="w-2/5">
-          <EchartsUI ref="chartRef" class="h-[300px] w-full" />
+          <EchartsUI ref="chartRef" />
         </div>
         <div class="w-3/5">
           <Table

apps/web-antd/src/views/mall/statistics/member/modules/area-chart-options.ts

@@ -5,7 +5,7 @@ import { fenToYuan } from '@vben/utils';
 /** 会员地域分布图表配置 */
 export function getAreaChartOptions(
   data: MallMemberStatisticsApi.AreaStatistics[],
-) {
+): any {
   if (!data || data.length === 0) {
     return {
       title: {
@@ -20,9 +20,9 @@ export function getAreaChartOptions(
     };
   }
 
+  // 计算 min 和 max 值
   let min = Number.POSITIVE_INFINITY;
   let max = Number.NEGATIVE_INFINITY;
-
   const mapData = data.map((item) => {
     const payUserCount = item.orderPayUserCount || 0;
     min = Math.min(min, payUserCount);
@@ -33,13 +33,13 @@ export function getAreaChartOptions(
       value: payUserCount,
     };
   });
-
+  // 如果所有值都为 0，设置合理的 min 和 max 值
-  // 如果所有值都为0，设置合理的最小最大值
   if (min === max && min === 0) {
     min = 0;
     max = 10;
   }
 
+  // 返回图表配置
   return {
     tooltip: {
       trigger: 'item',
@@ -48,7 +48,6 @@ export function getAreaChartOptions(
         if (!itemData) {
           return `${params?.name || ''}<br/>暂无数据`;
         }
-
         return `${itemData.areaName || params.name}<br/>
 会员数量：${itemData.userCount || 0}<br/>
 订单创建数量：${itemData.orderCreateUserCount || 0}<br/>

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

@@ -39,6 +39,7 @@ async function getMemberSexStatisticsList() {
         value: userCount || 0,
       };
     });
+    // 更新 Echarts 数据
     await renderEcharts(getSexChartOptions(chartData));
   } finally {
     loading.value = false;

apps/web-antd/src/views/mall/statistics/member/modules/terminal-card.vue

@@ -34,6 +34,7 @@ const getMemberTerminalStatisticsList = async () => {
         value: userCount || 0,
       };
     });
+    // 更新 Echarts 数据
     await renderEcharts(getTerminalChartOptions(chartData));
   } finally {
     loading.value = false;

apps/web-ele/src/views/mall/statistics/member/index.vue

@@ -8,9 +8,9 @@ import { DocAlert, Page } from '@vben/common-ui';
 import { fenToYuan } from '@vben/utils';
 
 import * as MemberStatisticsApi from '#/api/mall/statistics/member'; // 会员统计数据
-import AnalysisOverviewIcon from '#/views/mall/home/components/analysis-overview-icon.vue';
+// import AnalysisOverviewIcon from '#/views/mall/home/components/analysis-overview-icon.vue';
-import MemberFunnelCard from '#/views/mall/home/components/member-funnel-card.vue';
+// import MemberFunnelCard from '#/views/mall/home/components/member-funnel-card.vue';
-import MemberTerminalCard from '#/views/mall/home/components/member-terminal-card.vue';
+// import MemberTerminalCard from '#/views/mall/home/components/member-terminal-card.vue';
 
 import MemberRegionCard from './components/member-region-card.vue';
 import MemberSexCard from './components/member-sex-card.vue';