diff --git a/src/pages/finance/reports/index.module.less b/src/pages/finance/reports/index.module.less index 8a53f77..451b44a 100644 --- a/src/pages/finance/reports/index.module.less +++ b/src/pages/finance/reports/index.module.less @@ -101,10 +101,10 @@ font-size: 14px; } - // ===== 柱状图(echarts) ===== + // ===== 组合图(echarts) ===== .chartEcharts { width: 100%; - height: 300px; + height: 320px; } // ===== 明细表卡(按内容自适应高度,不被压缩) ===== diff --git a/src/pages/finance/reports/index.tsx b/src/pages/finance/reports/index.tsx index fb91322..1df044b 100644 --- a/src/pages/finance/reports/index.tsx +++ b/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(); 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({ ))} - {/* ===== 柱状图卡(echarts) ===== */} + {/* ===== 组合图卡(echarts) ===== */}
📊 diff --git a/src/pages/finance/reports/model/useReportsModel.ts b/src/pages/finance/reports/model/useReportsModel.ts index a3a232a..80aae9c 100644 --- a/src/pages/finance/reports/model/useReportsModel.ts +++ b/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 },