OrderDualAxes.tsx
2.64 KB
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
import { DualAxes } from '@ant-design/charts';
const OrderDualAxes = ({ data, statisticMethod, onXValueClick }) => {
let yFiledString = 'curTime';
if (statisticMethod === '0') {
yFiledString = 'curMonth';
} else {
yFiledString = 'curTime';
}
const targetData = data?.targetAndTotalPaymentDtoList || [];
const orderData = data?.orderNumberDtoList || [];
const config = {
data: [targetData, orderData],
xField: yFiledString,
yField: ['curDayTotalPayment', 'curDayTotalOrderNumber'],
geometryOptions: [
{
geometry: 'line',
seriesField: 'type',
lineStyle: {
lineWidth: 3,
lineDash: [5, 5],
},
smooth: true,
point: {
shape: 'circle',
},
},
{
geometry: 'line',
seriesField: 'name',
point: {
shape: 'circle',
},
},
],
};
const handleClick = (event) => {
// 获取当前点击点的数据
const pointData = event?.data?.data;
if (
pointData &&
(data?.targetAndTotalPaymentDtoList !== undefined ||
data?.orderNumberDtoList !== undefined)
) {
// 解析年份和月份
if (yFiledString === 'curMonth') {
const xValue = pointData['curMonth']; // 格式类似 "2025-01"
if (typeof xValue === 'string' && xValue.includes('-')) {
const [yearFromXValue] = xValue?.split('-'); // 提取年份部分 "2025"
if (!yearFromXValue) {
return;
}
// 减 1 获得目标年份
const targetYear = String(Number(yearFromXValue) - 1); // "2024"
// 检查 pointData.type 是否包含目标年份
if (
pointData?.type?.includes(targetYear) ||
pointData?.name?.includes(targetYear)
) {
// 调用父组件传递的回调
onXValueClick?.(xValue);
// // 合并两个数据源
// const allData = [...targetData, ...orderData];
// // 筛选出当前列的所有数据
// const columnData = allData.filter(
// (item) => item[yFiledString] === xValue,
// );
// 可选择将筛选出的数据展示到页面或以其他方式处理
// alert(`当前列数据: ${JSON.stringify(columnData, null, 2)}`);
} else {
}
}
} else {
console.warn('点击事件未携带有效数据');
}
}
};
const handleReady = (plot) => {
// 绑定点击事件
plot.on('element:click', handleClick);
};
return <DualAxes {...config} onReady={handleReady} />;
};
export default OrderDualAxes;