feat：【mall 商城】交易统计【antd】30%：优化 trend-card.vue 的实现

2025-10-20 13:16:41 +08:00
parent 49b2b40210
commit 7ed34921bc
3 changed files with 64 additions and 83 deletions
--- a/apps/web-antd/src/views/mall/statistics/trade/modules/trend-chart-options.ts
+++ b/apps/web-antd/src/views/mall/statistics/trade/modules/trend-chart-options.ts
@@ -0,0 +1,115 @@
+import type { EChartsOption } from 'echarts';
+
+import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
+
+/** 交易趋势折线图配置 */
+export function getTradeTrendChartOptions(
+  data: MallTradeStatisticsApi.TradeTrendSummary[],
+): EChartsOption {
+  return {
+    dataset: {
+      dimensions: [
+        'time',
+        'turnoverPrice',
+        'orderPayPrice',
+        'rechargePrice',
+        'expensePrice',
+      ],
+      source: data,
+    },
+    grid: {
+      left: 20,
+      right: 20,
+      bottom: 20,
+      top: 80,
+      containLabel: true,
+    },
+    legend: {
+      top: 50,
+    },
+    series: [
+      {
+        name: '营业额',
+        type: 'line',
+        smooth: true,
+        itemStyle: { color: '#1890FF' },
+      },
+      {
+        name: '商品支付金额',
+        type: 'line',
+        smooth: true,
+        itemStyle: { color: '#722ED1' },
+      },
+      {
+        name: '充值金额',
+        type: 'line',
+        smooth: true,
+        itemStyle: { color: '#FAAD14' },
+      },
+      {
+        name: '支出金额',
+        type: 'line',
+        smooth: true,
+        itemStyle: { color: '#52C41A' },
+      },
+    ],
+    toolbox: {
+      feature: {
+        // 数据区域缩放
+        dataZoom: {
+          yAxisIndex: false, // Y轴不缩放
+        },
+        brush: {
+          type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
+        },
+        saveAsImage: {
+          show: true,
+          name: '交易状况',
+        }, // 保存为图片
+      },
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+      },
+      padding: [5, 10],
+      formatter(params: any) {
+        let result = `<div><strong>${params[0].data.time}</strong></div>`;
+        params.forEach((item: any) => {
+          result += `<div style="margin: 4px 0;">
+            <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${item.color};"></span>
+            ${item.seriesName}: ￥${item.data[item.dimensionNames[item.encode.y[0]]]}
+          </div>`;
+        });
+        return result;
+      },
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        formatter: '￥{value}',
+        color: '#7F8B9C',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#F5F7F9',
+        },
+      },
+    },
+  };
+}