1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
| <script lang="ts" setup>
| import type { EChartsOption, EchartsUIType } from '@vben/plugins/echarts';
| import type { FinStatisticsApi } from '#/api/erp/finance/statistics';
|
| import { ref, watch } from 'vue';
|
| import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
| import { Card } from 'ant-design-vue';
|
| interface Props {
| list?: FinStatisticsApi.StatisticsTrend[];
| loading?: boolean;
| }
|
| const props = withDefaults(defineProps<Props>(), {
| list: () => [],
| loading: false,
| });
|
| const chartRef = ref<EchartsUIType>();
| const { renderEcharts } = useEcharts(chartRef);
|
| /** 柱状系列公共配置（type 需为字面量，故用 as const） */
| const BAR_SERIES = { type: 'bar', barMaxWidth: 24 } as const;
| /** 折线系列公共配置 */
| const LINE_SERIES = { type: 'line', smooth: true, symbolSize: 6 } as const;
|
| /** 金额折线/柱状图配置（series 在 watch 中按月份数据填充） */
| const baseChartOptions: EChartsOption = {
| grid: {
| left: 20,
| right: 20,
| bottom: 20,
| top: 60,
| containLabel: true,
| },
| legend: {
| top: 15,
| },
| toolbox: {
| feature: {
| saveAsImage: { show: true, name: '收支趋势' },
| },
| },
| tooltip: {
| trigger: 'axis',
| axisPointer: { type: 'cross' },
| padding: [5, 10],
| },
| xAxis: {
| type: 'category',
| axisTick: { show: false },
| data: [],
| },
| yAxis: {
| type: 'value',
| axisTick: { show: false },
| },
| };
|
| watch(
| () => props.list,
| (list) => {
| if (!list) {
| return;
| }
| renderEcharts({
| ...baseChartOptions,
| xAxis: {
| ...baseChartOptions.xAxis,
| data: list.map((item) => item.month),
| },
| series: [
| {
| ...BAR_SERIES,
| name: '收款金额',
| data: list.map((item) => item.receiptPrice ?? 0),
| },
| {
| ...BAR_SERIES,
| name: '付款金额',
| data: list.map((item) => item.paymentPrice ?? 0),
| },
| {
| ...LINE_SERIES,
| name: '净利润',
| data: list.map((item) => item.netProfit ?? 0),
| },
| ],
| });
| },
| { immediate: true, deep: true },
| );
| </script>
|
| <template>
| <Card title="月度收支趋势" class="h-full shadow-sm" :loading="loading">
| <EchartsUI ref="chartRef" height="360px" />
| </Card>
| </template>
|
|
