import type { VxeTableGridOptions } from '#/adapter/vxe-table'; import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member'; import { fenToYuan } from '@vben/utils'; /** 会员地域分布图表配置 */ export function getAreaChartOptions( data: MallMemberStatisticsApi.AreaStatisticsRespVO[], ): any { if (!data || data.length === 0) { return { title: { text: '暂无数据', left: 'center', top: 'center', textStyle: { color: '#999', fontSize: 14, }, }, }; } // 计算 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); max = Math.max(max, payUserCount); return { ...item, name: item.areaName, value: payUserCount, }; }); // 如果所有值都为 0,设置合理的 min 和 max 值 if (min === max && min === 0) { min = 0; max = 10; } // 返回图表配置 return { tooltip: { trigger: 'item', formatter: (params: any) => { const itemData = params?.data; if (!itemData) { return `${params?.name || ''}
暂无数据`; } return `${itemData.areaName || params.name}
会员数量:${itemData.userCount || 0}
订单创建数量:${itemData.orderCreateUserCount || 0}
订单支付数量:${itemData.orderPayUserCount || 0}
订单支付金额:¥${Number(fenToYuan(itemData.orderPayPrice || 0)).toFixed(2)}`; }, }, visualMap: { text: ['高', '低'], realtime: false, calculable: true, top: 'middle', left: 10, min, max, inRange: { color: ['#e6f3ff', '#1890ff', '#0050b3'], }, }, series: [ { name: '会员地域分布', type: 'map', map: 'china', roam: false, selectedMode: false, itemStyle: { borderColor: '#389e0d', borderWidth: 0.5, }, emphasis: { itemStyle: { areaColor: '#ffec3d', borderWidth: 1, }, }, data: mapData, }, ], }; } /** VXE Grid 表格列配置 */ export function getAreaTableColumns(): VxeTableGridOptions['columns'] { return [ { field: 'areaName', title: '省份', minWidth: 80, sortable: true, showOverflow: 'tooltip', }, { field: 'userCount', title: '会员数量', minWidth: 100, sortable: true, }, { field: 'orderCreateUserCount', title: '订单创建数量', minWidth: 120, sortable: true, }, { field: 'orderPayUserCount', title: '订单支付数量', minWidth: 120, sortable: true, }, { field: 'orderPayPrice', title: '订单支付金额', minWidth: 120, sortable: true, formatter: 'formatFenToYuanAmount', }, ]; }