OrderDualAxes.tsx
3.93 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
// import { DualAxes } from '@ant-design/charts';
// const OrderDualAxes = ({ data, statisticMethod }) => {
// console.log(data);
// let yFiledString = 'curTime';
// if (
// statisticMethod === 'MONTH_STATISTICS' ||
// statisticMethod === 'LAST_MONTH_STATISTICS'
// ) {
// yFiledString = 'curTime';
// } else {
// yFiledString = 'curMonth';
// }
// const config = {
// data: [
// data.targetAndTotalPaymentDtoList === undefined ||
// data.targetAndTotalPaymentDtoList === null
// ? []
// : data.targetAndTotalPaymentDtoList,
// data.orderNumberDtoList === undefined || data.orderNumberDtoList === null
// ? []
// : data.orderNumberDtoList,
// ],
// xField: yFiledString,
// yField: ['curDayTotalPayment', 'curDayTotalOrderNumber', 'lastTime'],
// geometryOptions: [
// {
// geometry: 'line',
// seriesField: 'type',
// lineStyle: {
// lineWidth: 3,
// lineDash: [5, 5],
// },
// smooth: true,
// },
// {
// geometry: 'line',
// seriesField: 'name',
// point: {},
// },
// ],
// };
// const handleClick = (event) => {
// console.log('点击事件event:', event);
// console.log('点击事件:', event?.data);
// alert(`你点击了数据: ${JSON.stringify(event?.data)}`);
// console.log('点击事件:', JSON.stringify(event?.data));
// };
// const handleReady = (plot) => {
// // 绑定多个事件以确保响应
// plot.on('plot:click', handleClick);
// plot.on('element:click', handleClick);
// };
// return <DualAxes {...config} onReady={handleReady} />;
// };
// export default OrderDualAxes;
import { DualAxes } from '@ant-design/charts';
const OrderDualAxes = ({ data, statisticMethod }) => {
console.log('传入的数据:', data);
let yFiledString = 'curTime';
if (
statisticMethod === 'MONTH_STATISTICS' ||
statisticMethod === 'LAST_MONTH_STATISTICS'
) {
yFiledString = 'curTime';
} else {
yFiledString = 'curMonth';
}
const targetData = data.targetAndTotalPaymentDtoList || [];
const orderData = data.orderNumberDtoList || [];
console.log(orderData, '传入的数据:', targetData);
const config = {
data: [targetData, orderData],
xField: yFiledString,
yField: ['curDayTotalPayment', 'curDayTotalOrderNumber', 'lastTime'],
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) => {
// console.log(targetData, '5656')
// 获取当前点击点的数据
const pointData = event?.data?.data;
if (pointData) {
if (pointData.type === '上年营业额' || pointData.type === '订单量') {
const xValue = pointData[yFiledString]; // 获取当前列的 xField 值
// 合并两个数据源
const allData = [...targetData, ...orderData];
console.log(orderData, '5656传入的数据:', targetData);
// 筛选出当前列的所有数据
const columnData = allData.filter(
(item) => item[yFiledString] === xValue,
);
console.log(`当前列中 ${yFiledString} = ${xValue} 的数据:`, columnData);
// 可选择将筛选出的数据展示到页面或以其他方式处理
alert(`当前列数据: ${JSON.stringify(columnData, null, 2)}`);
}
} else {
console.warn('点击事件未携带有效数据');
}
};
const handleReady = (plot) => {
// 绑定点击事件
plot.on('element:click', handleClick);
};
return <DualAxes {...config} onReady={handleReady} />;
};
export default OrderDualAxes;