leemuzi/real-time-fund
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 折线图2秒后自动失焦

Browse Source
This commit is contained in:
hzm
2026-02-24 22:05:11 +08:00
parent 194f9246ef
commit 42327fc110
2 changed files with 39 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/components/FundIntradayChart.jsx
View File

@@ -105,19 +105,28 @@ export default function FundIntradayChart({ series = [], referenceNav }) {
}, },
onHover: (event, chartElement, chart) => { onHover: (event, chartElement, chart) => {
const target = event?.native?.target; const target = event?.native?.target;
if (target) {
target.style.cursor = chartElement[0] ? 'crosshair' : 'default';
}
const currentChart = chart || chartRef.current; const currentChart = chart || chartRef.current;
if (!currentChart) return; if (!currentChart) return;
const tooltipActive = currentChart.tooltip?._active ?? [];
const activeElements = currentChart.getActiveElements
? currentChart.getActiveElements()
: [];
const hasActive =
(chartElement && chartElement.length > 0) ||
(tooltipActive && tooltipActive.length > 0) ||
(activeElements && activeElements.length > 0);
if (target) {
target.style.cursor = hasActive ? 'crosshair' : 'default';
}
if (hoverTimeoutRef.current) { if (hoverTimeoutRef.current) {
clearTimeout(hoverTimeoutRef.current); clearTimeout(hoverTimeoutRef.current);
hoverTimeoutRef.current = null; hoverTimeoutRef.current = null;
} }
if (chartElement[0]) { if (hasActive) {
hoverTimeoutRef.current = setTimeout(() => { hoverTimeoutRef.current = setTimeout(() => {
const c = chartRef.current || currentChart; const c = chartRef.current || currentChart;
if (!c) return; if (!c) return;

40
app/components/FundTrendChart.jsx
View File

@@ -220,10 +220,25 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
}, },
onHover: (event, chartElement, chart) => { onHover: (event, chartElement, chart) => {
const target = event?.native?.target; const target = event?.native?.target;
const currentChart = chart || chartRef.current;
if (!currentChart) return;
const tooltipActive = currentChart.tooltip?._active ?? [];
const activeElements = currentChart.getActiveElements
? currentChart.getActiveElements()
: [];
const hasActive =
(chartElement && chartElement.length > 0) ||
(tooltipActive && tooltipActive.length > 0) ||
(activeElements && activeElements.length > 0);
if (target) { if (target) {
target.style.cursor = chartElement[0] ? 'crosshair' : 'default'; target.style.cursor = hasActive ? 'crosshair' : 'default';
} }
// 仅用于桌面端 hover 改变光标，不在这里做 2 秒清除，避免移动端 hover 事件不稳定
},
onClick: (_event, _elements, chart) => {
const currentChart = chart || chartRef.current; const currentChart = chart || chartRef.current;
if (!currentChart) return; if (!currentChart) return;
@@ -232,20 +247,15 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
hoverTimeoutRef.current = null; hoverTimeoutRef.current = null;
} }
if (chartElement[0]) { hoverTimeoutRef.current = setTimeout(() => {
hoverTimeoutRef.current = setTimeout(() => { const c = chartRef.current || currentChart;
const c = chartRef.current || currentChart; if (!c) return;
if (!c) return; c.setActiveElements([]);
c.setActiveElements([]); if (c.tooltip) {
if (c.tooltip) { c.tooltip.setActiveElements([], { x: 0, y: 0 });
c.tooltip.setActiveElements([], { x: 0, y: 0 }); }
} c.update();
c.update(); }, 2000);
if (target) {
target.style.cursor = 'default';
}
}, 2000);
}
} }
}; };
}, []); }, []);