feat：【mall 商城】会员统计【antd】40% area-card.vue 修复界面

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
 
 import { onMounted, ref, shallowRef } from 'vue';
@@ -7,10 +8,23 @@ import { onMounted, ref, shallowRef } from 'vue';
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 import { fenToYuan } from '@vben/utils';
 
-import { Card, Table } from 'ant-design-vue';
+import { Card, Spin, Table } from 'ant-design-vue';
 
 import * as MemberStatisticsApi from '#/api/mall/statistics/member';
-// areaReplace 函数定义
+
+import { getAreaChartOptions } from './area-chart-options';
+
+/** 会员地域分布卡片 */
+defineOptions({ name: 'MemberAreaCard' });
+
+const loading = ref(true);
+const areaStatisticsList = shallowRef<MallMemberStatisticsApi.AreaStatistics[]>(
+  [],
+);
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 城市名兼容：ercharts 地名存在差异 */
 function areaReplace(areaName: string) {
   if (!areaName) {
     return areaName;
@@ -23,23 +37,13 @@ function areaReplace(areaName: string) {
     .replace('省', '');
 }
 
-import { getAreaChartOptions } from './area-chart-options';
-
-/** 会员地域分布卡片 */
-defineOptions({ name: 'MemberAreaCard' });
-
-const loading = ref(true);
-const areaStatisticsList = shallowRef<MallMemberStatisticsApi.AreaStatistics[]>([]);
-const chartRef = ref<EchartsUIType>();
-const { renderEcharts } = useEcharts(chartRef);
-
 /** 表格列配置 */
 const columns = [
   {
     title: '省份',
     dataIndex: 'areaName',
     key: 'areaName',
-    width: 120,
+    width: 80,
     sorter: true,
     ellipsis: true,
   },
@@ -47,30 +51,33 @@ const columns = [
     title: '会员数量',
     dataIndex: 'userCount',
     key: 'userCount',
-    width: 120,
+    width: 100,
     sorter: (a: any, b: any) => (a.userCount || 0) - (b.userCount || 0),
   },
   {
     title: '订单创建数量',
     dataIndex: 'orderCreateUserCount',
     key: 'orderCreateUserCount',
-    width: 150,
-    sorter: (a: any, b: any) => (a.orderCreateUserCount || 0) - (b.orderCreateUserCount || 0),
+    width: 120,
+    sorter: (a: any, b: any) =>
+      (a.orderCreateUserCount || 0) - (b.orderCreateUserCount || 0),
   },
   {
     title: '订单支付数量',
     dataIndex: 'orderPayUserCount',
     key: 'orderPayUserCount',
-    width: 150,
-    sorter: (a: any, b: any) => (a.orderPayUserCount || 0) - (b.orderPayUserCount || 0),
+    width: 120,
+    sorter: (a: any, b: any) =>
+      (a.orderPayUserCount || 0) - (b.orderPayUserCount || 0),
   },
   {
     title: '订单支付金额',
     dataIndex: 'orderPayPrice',
     key: 'orderPayPrice',
-    width: 150,
+    width: 120,
     sorter: (a: any, b: any) => (a.orderPayPrice || 0) - (b.orderPayPrice || 0),
-    customRender: ({ record }: any) => `￥${Number(fenToYuan(record.orderPayPrice || 0)).toFixed(2)}`,
+    customRender: ({ record }: any) =>
+      `￥${Number(fenToYuan(record.orderPayPrice || 0)).toFixed(2)}`,
   },
 ];
 
@@ -79,13 +86,20 @@ async function getMemberAreaStatisticsList() {
   loading.value = true;
   try {
     const list = await MemberStatisticsApi.getMemberAreaStatisticsList();
-    areaStatisticsList.value = list.map((item: MallMemberStatisticsApi.AreaStatistics) => ({
-      ...item,
-      areaName: areaReplace(item.areaName),
-    }));
-    
+
+    areaStatisticsList.value = list.map(
+      (item: MallMemberStatisticsApi.AreaStatistics) => ({
+        ...item,
+        areaName: areaReplace(item.areaName),
+      }),
+    );
+
     // 渲染图表
-    await renderEcharts(getAreaChartOptions(areaStatisticsList.value));
+    const chartOptions = getAreaChartOptions(areaStatisticsList.value);
+
+    await renderEcharts(chartOptions);
+  } catch (error) {
+    console.error('地域分布数据获取失败:', error);
   } finally {
     loading.value = false;
   }
@@ -98,21 +112,23 @@ onMounted(() => {
 </script>
 
 <template>
-  <Card :bordered="false" title="会员地域分布" :loading="loading">
-    <div class="flex gap-4">
-      <div class="w-2/5">
-        <EchartsUI ref="chartRef" class="h-[300px] w-full" />
+  <Card :bordered="false" title="会员地域分布" class="h-full">
+    <Spin :spinning="loading">
+      <div class="flex gap-4">
+        <div class="w-2/5">
+          <EchartsUI ref="chartRef" class="h-[300px] w-full" />
+        </div>
+        <div class="w-3/5">
+          <Table
+            :data-source="areaStatisticsList"
+            :columns="columns"
+            :scroll="{ y: 260 }"
+            size="small"
+            :pagination="false"
+            bordered
+          />
+        </div>
       </div>
-      <div class="w-3/5">
-        <Table
-          :data-source="areaStatisticsList"
-          :columns="columns"
-          :scroll="{ y: 260 }"
-          size="small"
-          :pagination="false"
-          bordered
-        />
-      </div>
-    </div>
+    </Spin>
   </Card>
 </template>

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

@@ -1,37 +1,59 @@
-import type { EChartsOption } from 'echarts';
 import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
 
 import { fenToYuan } from '@vben/utils';
 
-// 地图数据由 @vben/plugins/echarts 自动处理
-
 /** 会员地域分布图表配置 */
-export function getAreaChartOptions(data: MallMemberStatisticsApi.AreaStatistics[]): EChartsOption {
-  let min = 0;
-  let max = 0;
-  
+export function getAreaChartOptions(
+  data: MallMemberStatisticsApi.AreaStatistics[],
+) {
+  if (!data || data.length === 0) {
+    return {
+      title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'center',
+        textStyle: {
+          color: '#999',
+          fontSize: 14,
+        },
+      },
+    };
+  }
+
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+
   const mapData = data.map((item) => {
-    min = Math.min(min, item.orderPayUserCount || 0);
-    max = Math.max(max, item.orderPayUserCount || 0);
+    const payUserCount = item.orderPayUserCount || 0;
+    min = Math.min(min, payUserCount);
+    max = Math.max(max, payUserCount);
     return {
       ...item,
       name: item.areaName,
-      value: item.orderPayUserCount || 0,
+      value: payUserCount,
     };
   });
 
+  // 如果所有值都为0，设置合理的最小最大值
+  if (min === max && min === 0) {
+    min = 0;
+    max = 10;
+  }
+
   return {
     tooltip: {
       trigger: 'item',
       formatter: (params: any) => {
-        const data = params?.data;
-        if (!data) return params?.name || '';
-        
-        return `${data.areaName || params.name}<br/>
-会员数量：${data.userCount || 0}<br/>
-订单创建数量：${data.orderCreateUserCount || 0}<br/>
-订单支付数量：${data.orderPayUserCount || 0}<br/>
-订单支付金额：￥${Number(fenToYuan(data.orderPayPrice || 0)).toFixed(2)}`;
+        const itemData = params?.data;
+        if (!itemData) {
+          return `${params?.name || ''}<br/>暂无数据`;
+        }
+
+        return `${itemData.areaName || params.name}<br/>
+会员数量：${itemData.userCount || 0}<br/>
+订单创建数量：${itemData.orderCreateUserCount || 0}<br/>
+订单支付数量：${itemData.orderPayUserCount || 0}<br/>
+订单支付金额：￥${Number(fenToYuan(itemData.orderPayPrice || 0)).toFixed(2)}`;
       },
     },
     visualMap: {
@@ -39,10 +61,11 @@ export function getAreaChartOptions(data: MallMemberStatisticsApi.AreaStatistics
       realtime: false,
       calculable: true,
       top: 'middle',
+      left: 10,
       min,
       max,
       inRange: {
-        color: ['#fff', '#3b82f6'],
+        color: ['#e6f3ff', '#1890ff', '#0050b3'],
       },
     },
     series: [
@@ -52,10 +75,18 @@ export function getAreaChartOptions(data: MallMemberStatisticsApi.AreaStatistics
         map: 'china',
         roam: false,
         selectedMode: false,
+        itemStyle: {
+          borderColor: '#389e0d',
+          borderWidth: 0.5,
+        },
+        emphasis: {
+          itemStyle: {
+            areaColor: '#ffec3d',
+            borderWidth: 1,
+          },
+        },
         data: mapData,
       },
     ],
   };
 }
-
-// 地图数据已在 @vben/plugins/echarts 中自动注册