`;
// 检查是否有异动
const alertsAtTime = alerts.filter((a) => a.time === time);
if (alertsAtTime.length > 0) {
- html += '
';
- html += `
📍 概念异动 (${alertsAtTime.length})
`;
+ html += '
';
+ html += `
📍 概念异动 (${alertsAtTime.length})
`;
alertsAtTime.slice(0, 5).forEach((alert) => {
const typeLabel = {
surge: '异动',
@@ -104,13 +115,13 @@ const IndexMinuteChart = ({ indexData, alerts = [], onAlertClick, height = '350p
rank_jump: '排名跃升',
volume_spike: '放量',
}[alert.alert_type] || alert.alert_type;
- const typeColor = alert.alert_type === 'surge_down' ? '#52c41a' : '#ff4d4f';
+ const typeColor = alert.alert_type === 'surge_down' ? '#4ade80' : '#f87171';
const alpha = alert.alpha ? ` α${alert.alpha > 0 ? '+' : ''}${alert.alpha.toFixed(1)}%` : '';
const score = alert.final_score ? ` [${Math.round(alert.final_score)}分]` : '';
- html += `
• ${alert.concept_name} (${typeLabel}${alpha}${score})
`;
+ html += `
• ${alert.concept_name} (${typeLabel}${alpha}${score})
`;
});
if (alertsAtTime.length > 5) {
- html += `
还有 ${alertsAtTime.length - 5} 个异动...
`;
+ html += `
还有 ${alertsAtTime.length - 5} 个异动...
`;
}
html += '
';
}
@@ -223,19 +234,18 @@ const IndexMinuteChart = ({ indexData, alerts = [], onAlertClick, height = '350p
chartInstance.current.setOption(chartOption, true);
- // 点击事件 - 支持多个异动
+ // 点击事件 - 传递该时间段所有异动数据
if (onAlertClick) {
chartInstance.current.off('click');
chartInstance.current.on('click', 'series.line.markPoint', (params) => {
- if (params.data && params.data.alertData) {
- const alertData = params.data.alertData;
- // 如果是数组（多个异动），传递第一个（最高分）
- // 调用方可以从 alertData 中获取所有异动
- if (Array.isArray(alertData)) {
- onAlertClick(alertData[0]);
- } else {
- onAlertClick(alertData);
- }
+ if (params.data) {
+ // 传递完整的标记点数据，包含 alertData（所有异动）、timeRange、alertCount 等
+ onAlertClick({
+ alerts: params.data.alertData || [],
+ timeRange: params.data.timeRange,
+ alertCount: params.data.alertCount || 1,
+ time: params.data.time,
+ });
}
});
}
diff --git a/src/views/StockOverview/components/HotspotOverview/components/index.js b/src/views/StockOverview/components/HotspotOverview/components/index.js
index 2401b9bd..91c8c1a5 100644
--- a/src/views/StockOverview/components/HotspotOverview/components/index.js
+++ b/src/views/StockOverview/components/HotspotOverview/components/index.js
@@ -1,3 +1,4 @@
export { default as IndexMinuteChart } from './IndexMinuteChart';
export { default as ConceptAlertList } from './ConceptAlertList';
export { default as AlertSummary } from './AlertSummary';
+export { default as AlertDetailDrawer } from './AlertDetailDrawer';
diff --git a/src/views/StockOverview/components/HotspotOverview/index.js b/src/views/StockOverview/components/HotspotOverview/index.js
index cf20bc6f..fb641b01 100644
--- a/src/views/StockOverview/components/HotspotOverview/index.js
+++ b/src/views/StockOverview/components/HotspotOverview/index.js
@@ -23,6 +23,7 @@ import {
IconButton,
Collapse,
SimpleGrid,
+ useDisclosure,
} from '@chakra-ui/react';
import { keyframes, css } from '@emotion/react';
import {
@@ -40,7 +41,7 @@ import {
} from 'lucide-react';
import { useHotspotData } from './hooks';
-import { IndexMinuteChart, ConceptAlertList, AlertSummary } from './components';
+import { IndexMinuteChart, ConceptAlertList, AlertSummary, AlertDetailDrawer } from './components';
import { ALERT_TYPE_CONFIG, getAlertTypeLabel } from './utils/chartHelpers';
import {
glassEffect,
@@ -200,6 +201,10 @@ const HotspotOverview = ({ selectedDate }) => {
const [selectedAlert, setSelectedAlert] = useState(null);
const [showDetailList, setShowDetailList] = useState(false);
const [autoExpandAlertKey, setAutoExpandAlertKey] = useState(null);
+ const [drawerAlertData, setDrawerAlertData] = useState(null);
+
+ // 右边栏抽屉控制
+ const { isOpen: isDrawerOpen, onOpen: onDrawerOpen, onClose: onDrawerClose } = useDisclosure();
// 获取数据
const { loading, error, data } = useHotspotData(selectedDate);
@@ -212,7 +217,14 @@ const HotspotOverview = ({ selectedDate }) => {
const sectionBg = glassEffect.light.bg;
const scrollbarColor = 'rgba(139, 92, 246, 0.3)';
- // 点击异动标注 - 自动展开详细列表并选中
+ // 点击分时图上的异动标注 - 打开右边栏抽屉显示详情
+ const handleChartAlertClick = useCallback((alertGroupData) => {
+ // alertGroupData 包含 { alerts, timeRange, alertCount, time }
+ setDrawerAlertData(alertGroupData);
+ onDrawerOpen();
+ }, [onDrawerOpen]);
+
+ // 点击底部异动卡片 - 展开详细列表并选中
const handleAlertClick = useCallback((alert) => {
setSelectedAlert(alert);
// 自动展开详细列表并设置需要展开的项
@@ -637,7 +649,7 @@ const HotspotOverview = ({ selectedDate }) => {
@@ -790,6 +802,13 @@ const HotspotOverview = ({ selectedDate }) => {
)}
+
+ {/* 异动详情右边栏抽屉 */}
+
);
};
diff --git a/src/views/StockOverview/components/HotspotOverview/utils/chartHelpers.js b/src/views/StockOverview/components/HotspotOverview/utils/chartHelpers.js
index b9539054..ff61dd1b 100644
--- a/src/views/StockOverview/components/HotspotOverview/utils/chartHelpers.js
+++ b/src/views/StockOverview/components/HotspotOverview/utils/chartHelpers.js
@@ -281,7 +281,136 @@ export const getAlertTypeColor = (alertType) => {
};
/**
- * 生成图表标注点数据 - 支持同一时间多个异动折叠显示
+ * 将时间字符串转换为分钟数
+ * @param {string} timeStr - 时间字符串，如 "09:30"
+ * @returns {number} 分钟数
+ */
+const timeToMinutes = (timeStr) => {
+ if (!timeStr) return 0;
+ const [hours, minutes] = timeStr.split(':').map(Number);
+ return hours * 60 + minutes;
+};
+
+/**
+ * 获取时间所属的分组区间
+ * @param {string} timeStr - 时间字符串
+ * @param {number} intervalMinutes - 分组间隔（分钟）
+ * @returns {string} 时间区间，如 "09:30-09:40"
+ */
+const getTimeGroup = (timeStr, intervalMinutes = 10) => {
+ const minutes = timeToMinutes(timeStr);
+ const groupStart = Math.floor(minutes / intervalMinutes) * intervalMinutes;
+ const groupEnd = groupStart + intervalMinutes;
+
+ const startHour = Math.floor(groupStart / 60);
+ const startMin = groupStart % 60;
+ const endHour = Math.floor(groupEnd / 60);
+ const endMin = groupEnd % 60;
+
+ const formatTime = (h, m) => `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
+ return `${formatTime(startHour, startMin)}-${formatTime(endHour, endMin)}`;
+};
+
+/**
+ * 生成图表标注点数据 - 按时间间隔分组
+ * @param {Array} alerts - 异动数据数组
+ * @param {Array} times - 时间数组
+ * @param {Array} prices - 价格数组
+ * @param {number} priceMax - 最高价格
+ * @param {number} intervalMinutes - 分组间隔（分钟），默认10分钟
+ * @returns {Array} ECharts markPoint data
+ */
+export const getAlertMarkPointsGrouped = (alerts, times, prices, priceMax, intervalMinutes = 10) => {
+ if (!alerts || alerts.length === 0) return [];
+
+ // 1. 按时间间隔分组
+ const alertsByGroup = {};
+ alerts.forEach(alert => {
+ const group = getTimeGroup(alert.time, intervalMinutes);
+ if (!alertsByGroup[group]) {
+ alertsByGroup[group] = [];
+ }
+ alertsByGroup[group].push(alert);
+ });
+
+ // 2. 对每个分组内的异动按分数排序
+ Object.keys(alertsByGroup).forEach(group => {
+ alertsByGroup[group].sort((a, b) =>
+ (b.final_score || b.importance_score || 0) - (a.final_score || a.importance_score || 0)
+ );
+ });
+
+ // 3. 生成标记点
+ return Object.entries(alertsByGroup).map(([timeRange, groupAlerts]) => {
+ // 找到该分组中间时间点对应的坐标
+ const midTime = groupAlerts[Math.floor(groupAlerts.length / 2)]?.time;
+ const timeIndex = times.indexOf(midTime);
+ const price = timeIndex >= 0 ? prices[timeIndex] : priceMax;
+
+ const alertCount = groupAlerts.length;
+ const topAlert = groupAlerts[0];
+ const hasMultiple = alertCount > 1;
+
+ // 使用最高分异动的样式
+ const { color, gradient } = getAlertStyle(
+ topAlert.alert_type,
+ topAlert.final_score / 100 || topAlert.importance_score || 0.5
+ );
+
+ // 生成显示标签
+ const [startTime] = timeRange.split('-');
+ const label = hasMultiple ? `${startTime} (${alertCount})` : topAlert.concept_name?.substring(0, 4) || startTime;
+
+ const isDown = topAlert.alert_type === 'surge_down';
+ const symbolSize = hasMultiple ? 45 + Math.min(alertCount * 2, 15) : 35;
+
+ return {
+ name: timeRange,
+ coord: [midTime || times[0], price],
+ value: label,
+ symbol: 'pin',
+ symbolSize,
+ itemStyle: {
+ color: {
+ type: 'radial',
+ x: 0.5, y: 0.5, r: 0.8,
+ colorStops: [
+ { offset: 0, color: gradient[0] },
+ { offset: 0.7, color: gradient[1] },
+ { offset: 1, color: `${color}88` },
+ ],
+ },
+ borderColor: hasMultiple ? '#ffffff' : 'rgba(255,255,255,0.8)',
+ borderWidth: hasMultiple ? 3 : 2,
+ shadowBlur: hasMultiple ? 20 : 10,
+ shadowColor: `${color}${hasMultiple ? 'aa' : '66'}`,
+ },
+ label: {
+ show: true,
+ position: isDown ? 'bottom' : 'top',
+ formatter: label,
+ fontSize: hasMultiple ? 11 : 10,
+ fontWeight: hasMultiple ? 700 : 500,
+ color: 'rgba(255, 255, 255, 0.95)',
+ backgroundColor: 'rgba(15, 15, 25, 0.9)',
+ padding: hasMultiple ? [5, 10] : [3, 6],
+ borderRadius: 6,
+ borderColor: `${color}80`,
+ borderWidth: 1,
+ shadowBlur: 8,
+ shadowColor: `${color}40`,
+ },
+ // 存储该时间段所有异动数据
+ alertData: groupAlerts,
+ alertCount,
+ timeRange,
+ time: midTime,
+ };
+ });
+};
+
+/**
+ * 生成图表标注点数据 - 支持同一时间多个异动折叠显示（原有函数保留）
* @param {Array} alerts - 异动数据数组
* @param {Array} times - 时间数组
* @param {Array} prices - 价格数组