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) { // 解析年份和月份 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) // ) { // 调用父组件传递的回调 if (pointData?.name) { onXValueClick?.(xValue, pointData?.name); } else if (pointData?.type) { onXValueClick?.(xValue, pointData?.type); } // // 合并两个数据源 // 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;