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

import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';

import { fenToYuan } from '@vben/utils';

/** 会员地域分布图表配置 */
export function getAreaChartOptions(
  data: MallMemberStatisticsApi.AreaStatistics[],
): 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 || ''}<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: {
      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,
      },
    ],
  };
}