From 1c86468b8635cf5d24b6869c12311515547d9253 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=8B=E6=9D=B0?= Date: Wed, 20 Aug 2025 11:58:38 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E6=83=85=E7=BB=AA=E5=A4=A7?= =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E4=BA=A4=E4=BA=92=E5=9B=BE=E8=A1=A8=E6=97=B6?= =?UTF-8?q?=E8=A7=A6=E5=8F=91=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/components/emoEnergyConverter.vue | 38 ++++++++++++++++++++++ src/views/components/emotionDecod.vue | 38 ++++++++++++++++++++++ src/views/components/emotionalBottomRadar.vue | 38 ++++++++++++++++++++++ src/views/components/marketTemperature.vue | 39 ++++++++++++++++++++++ src/views/homePage.vue | 47 +++++++++++++++++++++++++-- 5 files changed, 197 insertions(+), 3 deletions(-) diff --git a/src/views/components/emoEnergyConverter.vue b/src/views/components/emoEnergyConverter.vue index 3cb7841..8a4172b 100644 --- a/src/views/components/emoEnergyConverter.vue +++ b/src/views/components/emoEnergyConverter.vue @@ -862,6 +862,44 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { }; // 应用配置 qxnlzhqEchartsInstance.setOption(option); + + // 添加图表交互事件监听器 + if (qxnlzhqEchartsInstance) { + // 监听数据缩放事件 + qxnlzhqEchartsInstance.on('dataZoom', () => { + if (window.handleChartInteractionStart) { + window.handleChartInteractionStart(); + } + }); + + // 监听鼠标滚轮事件（缩放） + qxnlzhqEchartsInstance.on('mousewheel', () => { + if (window.handleChartInteractionStart) { + window.handleChartInteractionStart(); + } + }); + + // 监听鼠标按下事件（拖拽开始） + qxnlzhqEchartsInstance.on('mousedown', () => { + if (window.handleChartInteractionStart) { + window.handleChartInteractionStart(); + } + }); + + // 监听鼠标释放事件（拖拽结束） + qxnlzhqEchartsInstance.on('mouseup', () => { + if (window.handleChartInteractionEnd) { + window.handleChartInteractionEnd(); + } + }); + + // 监听图表点击事件 + qxnlzhqEchartsInstance.on('click', () => { + if (window.handleChartInteractionStart) { + window.handleChartInteractionStart(); + } + }); + } // 防抖函数，避免频繁触发resize const debounce = (func, wait) => { diff --git a/src/views/components/emotionDecod.vue b/src/views/components/emotionDecod.vue index 1c9bc22..a911575 100644 --- a/src/views/components/emotionDecod.vue +++ b/src/views/components/emotionDecod.vue @@ -412,6 +412,44 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { } KlineCanvsChart = echarts.init(KlineCanvs.value); KlineCanvsChart.setOption(KlineOption); + + // 添加图表交互事件监听器 + if (KlineCanvsChart) { + // 监听数据缩放事件 + KlineCanvsChart.on('dataZoom', () => { + if (window.handleChartInteractionStart) { + window.handleChartInteractionStart(); + } + }); + + // 监听鼠标滚轮事件（缩放） + KlineCanvsChart.on('mousewheel', () => { + if (window.handleChartInteractionStart) { + window.handleChartInteractionStart(); + } + }); + + // 监听鼠标按下事件（拖拽开始） + KlineCanvsChart.on('mousedown', () => { + if (window.handleChartInteractionStart) { + window.handleChartInteractionStart(); + } + }); + + // 监听鼠标释放事件（拖拽结束） + KlineCanvsChart.on('mouseup', () => { + if (window.handleChartInteractionEnd) { + window.handleChartInteractionEnd(); + } + }); + + // 监听图表点击事件 + KlineCanvsChart.on('click', () => { + if (window.handleChartInteractionStart) { + window.handleChartInteractionStart(); + } + }); + } // 防抖函数，避免频繁触发resize const debounce = (func, wait) => { diff --git a/src/views/components/emotionalBottomRadar.vue b/src/views/components/emotionalBottomRadar.vue index 55b0900..599f714 100644 --- a/src/views/components/emotionalBottomRadar.vue +++ b/src/views/components/emotionalBottomRadar.vue @@ -676,6 +676,44 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { // 使用配置项显示图表 bottomRadarChart.setOption(option) + + // 添加图表交互事件监听器 + if (bottomRadarChart) { + // 监听数据缩放事件 + bottomRadarChart.on('dataZoom', () => { + if (window.handleChartInteractionStart) { + window.handleChartInteractionStart(); + } + }); + + // 监听鼠标滚轮事件（缩放） + bottomRadarChart.on('mousewheel', () => { + if (window.handleChartInteractionStart) { + window.handleChartInteractionStart(); + } + }); + + // 监听鼠标按下事件（拖拽开始） + bottomRadarChart.on('mousedown', () => { + if (window.handleChartInteractionStart) { + window.handleChartInteractionStart(); + } + }); + + // 监听鼠标释放事件（拖拽结束） + bottomRadarChart.on('mouseup', () => { + if (window.handleChartInteractionEnd) { + window.handleChartInteractionEnd(); + } + }); + + // 监听图表点击事件 + bottomRadarChart.on('click', () => { + if (window.handleChartInteractionStart) { + window.handleChartInteractionStart(); + } + }); + } // 应用响应式样式 if (bottomRadarRef.value) { diff --git a/src/views/components/marketTemperature.vue b/src/views/components/marketTemperature.vue index a0db89b..0b3136a 100644 --- a/src/views/components/marketTemperature.vue +++ b/src/views/components/marketTemperature.vue @@ -678,6 +678,45 @@ function initChart(raw, klineDataRawValue, WDRLValue) { }, ], }); + + // 添加图表交互事件监听器 + if (chartInstance) { + // 监听数据缩放事件 + chartInstance.on('dataZoom', () => { + if (window.handleChartInteractionStart) { + window.handleChartInteractionStart(); + } + }); + + // 监听鼠标滚轮事件（缩放） + chartInstance.on('mousewheel', () => { + if (window.handleChartInteractionStart) { + window.handleChartInteractionStart(); + } + }); + + // 监听鼠标按下事件（拖拽开始） + chartInstance.on('mousedown', () => { + if (window.handleChartInteractionStart) { + window.handleChartInteractionStart(); + } + }); + + // 监听鼠标释放事件（拖拽结束） + chartInstance.on('mouseup', () => { + if (window.handleChartInteractionEnd) { + window.handleChartInteractionEnd(); + } + }); + + // 监听图表点击事件 + chartInstance.on('click', () => { + if (window.handleChartInteractionStart) { + window.handleChartInteractionStart(); + } + }); + } + // 防抖函数，避免频繁触发resize const debounce = (func, wait) => { let timeout; diff --git a/src/views/homePage.vue b/src/views/homePage.vue index b9cba5d..61366e0 100644 --- a/src/views/homePage.vue +++ b/src/views/homePage.vue @@ -370,6 +370,8 @@ const aiEmotionHeightObserver = ref(null); const isAiEmotionAutoScrollEnabled = ref(false); const isAiEmotionUserScrolling = ref(false); // 用户是否正在手动滚动 const aiEmotionScrollTimer = ref(null); // 滚动检测定时器 +const isChartInteracting = ref(false); // 图表是否正在交互 +const chartInteractionTimer = ref(null); // 图表交互检测定时器 // 获取当前活动页面的滚动容器 const getCurrentScrollContainer = () => { @@ -406,7 +408,7 @@ const throttledSmoothScrollToBottom = _.throttle(smoothScrollToBottom, 300, { // AiEmotion页面自动滚动到底部的防抖函数 const debouncedAiEmotionScrollToBottom = _.debounce(() => { - if (activeTab.value === 'AiEmotion' && isAiEmotionAutoScrollEnabled.value && !isAiEmotionUserScrolling.value) { + if (activeTab.value === 'AiEmotion' && isAiEmotionAutoScrollEnabled.value && !isAiEmotionUserScrolling.value && !isChartInteracting.value) { const container = tabContentAiEmotion.value; if (container) { container.scrollTop = container.scrollHeight - container.offsetHeight; @@ -423,7 +425,7 @@ const startAiEmotionHeightObserver = () => { // 创建ResizeObserver监听页面内容变化 aiEmotionHeightObserver.value = new ResizeObserver((entries) => { - if (isAiEmotionAutoScrollEnabled.value && activeTab.value === 'AiEmotion') { + if (isAiEmotionAutoScrollEnabled.value && activeTab.value === 'AiEmotion' && !isChartInteracting.value) { debouncedAiEmotionScrollToBottom(); } }); @@ -454,7 +456,7 @@ const startAiEmotionHeightObserver = () => { } }); - if (shouldScroll && isAiEmotionAutoScrollEnabled.value && activeTab.value === 'AiEmotion') { + if (shouldScroll && isAiEmotionAutoScrollEnabled.value && activeTab.value === 'AiEmotion' && !isChartInteracting.value) { debouncedAiEmotionScrollToBottom(); } }); @@ -500,6 +502,34 @@ const handleAiEmotionUserScroll = () => { // }, 2000); }; +// 图表交互状态管理 +const handleChartInteractionStart = () => { + console.log("图表交互开始，临时禁用自动滚动"); + isChartInteracting.value = true; + + // 清除之前的定时器 + if (chartInteractionTimer.value) { + clearTimeout(chartInteractionTimer.value); + } +}; + +const handleChartInteractionEnd = () => { + // 清除之前的定时器 + if (chartInteractionTimer.value) { + clearTimeout(chartInteractionTimer.value); + } + + // 设置定时器，1秒后恢复自动滚动 + chartInteractionTimer.value = setTimeout(() => { + isChartInteracting.value = false; + console.log("图表交互结束，恢复自动滚动"); + }, 1000); +}; + +// 暴露图表交互管理函数给全局使用 +window.handleChartInteractionStart = handleChartInteractionStart; +window.handleChartInteractionEnd = handleChartInteractionEnd; + // 处理AiEmotion页面的滚动请求 const handleAiEmotionScrollToBottom = () => { if (activeTab.value === 'AiEmotion') { @@ -1001,6 +1031,17 @@ onUnmounted(() => { } // 清理AiEmotion页面的高度监听器 stopAiEmotionHeightObserver(); + + // 清理图表交互相关的定时器和全局函数 + if (chartInteractionTimer.value) { + clearTimeout(chartInteractionTimer.value); + } + if (window.handleChartInteractionStart) { + delete window.handleChartInteractionStart; + } + if (window.handleChartInteractionEnd) { + delete window.handleChartInteractionEnd; + } });