From 2f9106db30e9da8937797680a0ce5f2f79040a86 Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Tue, 8 Apr 2025 12:19:28 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E8=BD=AE=E6=92=AD=E6=8F=90=E7=A4=BA=EF=BC=8C=E5=A4=84=E7=90=86?= =?UTF-8?q?=E6=94=BE=E5=A4=A7=E5=9B=BE=E8=A1=A8=E5=85=B3=E9=97=AD=E5=90=8E?= =?UTF-8?q?=E6=8F=90=E7=A4=BA=E9=97=AA=E7=83=81=E7=9A=84=E9=97=AE=E9=A2=98?= =?UTF-8?q?=E4=BB=A5=E5=8F=8A=E8=BD=AE=E6=92=AD=E6=8F=90=E7=A4=BA=E4=BD=8D?= =?UTF-8?q?=E7=BD=AE=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/js/g2plot_tooltip_carousel.ts | 101 +++++++++++------- .../components/js/panel/common/common_antv.ts | 15 +-- 2 files changed, 72 insertions(+), 44 deletions(-) diff --git a/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts b/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts index 80f8b00049..b836bc4507 100644 --- a/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts +++ b/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts @@ -38,6 +38,14 @@ export function isPie(chartType: string) { return CHART_CATEGORY.PIE.includes(chartType) } +/** + * 判断是否为组合图 + * @param chartType + */ +export function isMix(chartType: string) { + return CHART_CATEGORY.MIX.includes(chartType) +} + const isSupport = (chartType: string) => { return Object.values(CHART_CATEGORY).some(category => category.includes(chartType)) } @@ -69,9 +77,9 @@ class ChartCarouselTooltip { private timers = { interval: null, carousel: null } private states = { paused: false, destroyed: false } // 图表可视性变化 - private observers: Map = new Map() + private observers: Map = new Map() // 图表元素大小变化 - private resizeObservers: Map = new Map() + private resizeObservers: Map = new Map() // 图表是否在可视范围内 private chartIsVisible: boolean @@ -96,7 +104,8 @@ class ChartCarouselTooltip { }) if (instance) { - instance.destroy() + instance.update(plot, chart, config) + return instance } if (isSupport(chart.type)) { instance = new this(plot, chart, config) @@ -114,7 +123,6 @@ class ChartCarouselTooltip { const instance = CAROUSEL_MANAGER_INSTANCES.get(container) if (instance) { instance.destroy() - CAROUSEL_MANAGER_INSTANCES.delete(container) } } @@ -138,16 +146,19 @@ class ChartCarouselTooltip { // 首先，暂停并删除包含 'viewDialog' 的实例 CAROUSEL_MANAGER_INSTANCES?.forEach((instance, key) => { if (instance.chart.id === id && instance.chart.container.includes('viewDialog')) { - CAROUSEL_MANAGER_INSTANCES.delete(key) + const dialogInstance = CAROUSEL_MANAGER_INSTANCES.get(key) + if (dialogInstance) { + dialogInstance.destroy() + } } - if (instance.chart.id === id) { + }) + setTimeout(() => { + // 然后，恢复 + CAROUSEL_MANAGER_INSTANCES?.forEach(instance => { + instance.chartIsVisible = true instance.resume() - } - }) - // 然后，恢复 - CAROUSEL_MANAGER_INSTANCES?.forEach(instance => { - instance.resume() - }) + }) + }, 400) } /** @@ -489,28 +500,30 @@ class ChartCarouselTooltip { * 设置交叉观察器 * */ private setupIntersectionObserver() { - // 监听元素可见性变化,全部可见时开始轮播 - if (!this.observers.get(this.plot.chart.ele.id)) { - this.observers.set( - this.plot.chart.ele.id, - new IntersectionObserver( - entries => { - entries.forEach(entry => { - if (entry.intersectionRatio < 1) { - this.paused() - this.chartIsVisible = false - } else { - this.paused() - this.chartIsVisible = true - this.resume() - } - }) - }, - { threshold: [0, 0.1, 0.5, 1] } + setTimeout(() => { + // 监听元素可见性变化,全部可见时开始轮播 + if (!this.observers.get(this.plot.chart.ele.id)) { + this.observers.set( + this.plot.chart.ele.id, + new IntersectionObserver( + entries => { + entries.forEach(entry => { + if (entry.intersectionRatio < 1) { + this.paused() + this.chartIsVisible = false + } else { + this.paused() + this.chartIsVisible = true + this.resume() + } + }) + }, + { threshold: [1] } + ) ) - ) - this.observers.get(this.plot.chart.ele.id).observe(this.plot.chart.ele) - } + this.observers.get(this.plot.chart.ele.id).observe(this.plot.chart.ele) + } + }, 100) } /** @@ -566,12 +579,26 @@ class ChartCarouselTooltip { * 销毁实例 * */ destroy() { - this.states.destroyed = true this.stop() - this.plot.chart.off('plot:mouseenter') - this.plot.chart.off('plot:mouseleave') + this.clearObserver() + this.states.destroyed = true + CAROUSEL_MANAGER_INSTANCES.delete(this.chart.container) + } + /** + * 清除观察器 + * */ + clearObserver() { + const observer = this.observers.get(this.plot.chart.ele.id) + if (observer) { + observer.disconnect() + this.observers.delete(this.plot.chart.ele.id) + } + const resizeObservers = this.resizeObservers.get(this.plot.chart.ele.id) + if (resizeObservers) { + resizeObservers.disconnect() + this.resizeObservers.delete(this.plot.chart.ele.id) + } } - /** 暂停 */ paused() { this.hideTooltip() diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts index 6223b6dadf..b28a67ef9e 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts @@ -45,7 +45,8 @@ import { import ChartCarouselTooltip, { isPie, isLine, - isColumn + isColumn, + isMix } from '@/views/chart/components/js/g2plot_tooltip_carousel' const { t: tI18n } = useI18n() @@ -1728,14 +1729,14 @@ function calculateTooltipPosition( ) { // 辅助函数: 根据不同图表类型计算 Tooltip 的y位置 const getTooltipY = () => { + const top = Number(chartElement.getBoundingClientRect().top) if (isColumn(chart.type)) { - return ( - 60 + - Number(chartElement.getBoundingClientRect().top) + - chartElement.getBoundingClientRect().height / 2 - ) + return top + chartElement.getBoundingClientRect().height / 2 } - return 60 + tooltipCtl.point.y + Number(chartElement.getBoundingClientRect().top) + if (isMix || isPie) { + return top + tooltipCtl.point.y + } + return top + tooltipCtl.point.y + 60 } if (isCarousel) { return {