src/pages/finance/reports/index.module.less

@@ -101,10 +101,10 @@
     font-size: 14px;
   }
 
-  // ===== 柱状图（echarts） =====
+  // ===== 组合图（echarts） =====
   .chartEcharts {
     width: 100%;
-    height: 300px;
+    height: 320px;
   }
 
   // ===== 明细表卡（按内容自适应高度，不被压缩） =====

src/pages/finance/reports/index.tsx

@@ -10,7 +10,7 @@ import styles from './index.module.less';
  * 页面结构：
  *   1. 顶部标题 + 时间范围选择
  *   2. 三张统计卡（总收入 / 总提现 / 平台余额）
- *   3. 月度收支趋势（近 6 个月，echarts 柱状图）
+ *   3. 月度收支趋势（近 6 个月，echarts 柱状 + 折线组合图）
  *   4. 月度收支明细（表格）
  */
 export default defineComponent({
@@ -27,7 +27,7 @@ export default defineComponent({
       RANGE_OPTIONS,
     } = useReportsModel();
 
-    // ===== 柱状图（echarts） =====
+    // ===== 组合图（柱状 + 折线，echarts） =====
     const chartRef = ref<HTMLElement>();
     let chartInstance: any = null;
 
@@ -39,48 +39,90 @@ export default defineComponent({
         tooltip: {
           trigger: 'axis',
           axisPointer: {
-            type: 'shadow',
+            type: 'cross',
+            crossStyle: { color: 'rgba(0, 0, 0, 0.15)' },
+            label: { backgroundColor: '#6a7985' },
           },
           valueFormatter: (v: number) => `¥${formatMoney(v)}`,
         },
         legend: {
-          data: ['订单金额', '净收入'],
+          data: [
+            { name: '订单金额', icon: 'roundRect' },
+            { name: '净收入', icon: 'circle' },
+          ],
           bottom: 8,
-          icon: 'roundRect',
           itemWidth: 14,
           itemHeight: 10,
           textStyle: { color: 'rgba(0, 0, 0, 0.65)' },
         },
-        grid: { left: 8, right: 16, top: 24, bottom: 48, containLabel: true },
+        grid: { left: 8, right: 16, top: 32, bottom: 48, containLabel: true },
         xAxis: {
           type: 'category',
           data: months,
           axisTick: { show: false },
           axisLine: { lineStyle: { color: '#e8e8e8' } },
           axisLabel: { color: 'rgba(0, 0, 0, 0.55)' },
+          axisPointer: { type: 'shadow' },
         },
         yAxis: {
           type: 'value',
           axisLabel: {
             color: 'rgba(0, 0, 0, 0.45)',
-            formatter: (v: number) => (v >= 1000 ? `${v / 1000}k` : `${v}`),
+            formatter: (v: number) => (v >= 1000 ? `¥${v / 1000}k` : `¥${v}`),
           },
-          splitLine: { lineStyle: { color: '#f5f5f5' } },
+          splitLine: { lineStyle: { color: '#f5f5f5', type: 'dashed' } },
         },
         series: [
           {
             name: '订单金额',
             type: 'bar',
             data: order,
-            barWidth: 30,
-            itemStyle: { color: '#1677ff', borderRadius: [3, 3, 0, 0] },
+            barMaxWidth: 48,
+            barCategoryGap: '35%',
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: '#4096ff' },
+                  { offset: 1, color: '#1677ff' },
+                ],
+              },
+              borderRadius: [4, 4, 0, 0],
+            },
+            emphasis: { focus: 'series' },
           },
           {
             name: '净收入',
-            type: 'bar',
+            type: 'line',
             data: netIncome,
-            barWidth: 30,
-            itemStyle: { color: '#52c41a', borderRadius: [3, 3, 0, 0] },
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 8,
+            lineStyle: { width: 3, color: '#52c41a' },
+            itemStyle: {
+              color: '#52c41a',
+              borderWidth: 2,
+              borderColor: '#fff',
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: 'rgba(82, 196, 26, 0.22)' },
+                  { offset: 1, color: 'rgba(82, 196, 26, 0.02)' },
+                ],
+              },
+            },
+            emphasis: { focus: 'series' },
+            z: 10,
           },
         ],
       };
@@ -189,7 +231,7 @@ export default defineComponent({
             ))}
           </div>
 
-          {/* ===== 柱状图卡（echarts） ===== */}
+          {/* ===== 组合图卡（echarts） ===== */}
           <div class={styles.chartCard}>
             <div class={styles.cardTitle}>
               <span class={styles.cardTitleIcon}>📊</span>

src/pages/finance/reports/model/useReportsModel.ts

@@ -17,7 +17,7 @@ export const RANGE_OPTIONS = [
 // 假数据（数值自洽：总收入 - 总提现 = 平台余额）
 // ============================================================
 
-/** 6 个月柱状图数据（月份标签 + 订单金额 + 净收入） */
+/** 6 个月图表数据（月份标签 + 订单金额 + 净收入） */
 const CHART_DATA = [
   { month: '01月', order: 22500, netIncome: 19000, withdraw: 300 },
   { month: '02月', order: 24500, netIncome: 21500, withdraw: 1850 },