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 e9c2893ddc..02d8cb1bd1 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 @@ -113,6 +113,9 @@ class ChartCarouselTooltip { private init() { this.values = [].concat(this.getUniqueValues()) if (!this.values.length) return + this.chartIsVisible = true + this.states.paused = false + this.states.destroyed = false this.bindEventListeners() this.startCarousel() } @@ -193,7 +196,7 @@ class ChartCarouselTooltip { this.debounce(() => { this.stop() startNestedTimers() - }, 200)() + }, 300)() } /** @@ -305,7 +308,19 @@ class ChartCarouselTooltip { * 绑定事件监听 * */ private bindEventListeners() { - const { chart } = this.plot + let deCanvasElement = document.getElementById('de-canvas-canvas-main') + if (!deCanvasElement) { + deCanvasElement = document.getElementById('preview-canvas-main') + } + if (!deCanvasElement) { + deCanvasElement = document.getElementById('canvas-mark-line') + } + if (!deCanvasElement) { + this.unHighlightPoint() + this.hideTooltip() + this.setPaused(true) + } + deCanvasElement?.addEventListener('scroll', this.handleScroll.bind(this)) const chartElement = document.getElementById(this.chart.container) chartElement.addEventListener('mouseenter', () => { this.unHighlightPoint() @@ -315,24 +330,28 @@ class ChartCarouselTooltip { // 当鼠标离开 chart 时,检查状态 chartElement.addEventListener('mouseleave', () => { - this.setPaused(false) - }) - - // 页面可见性控制 - document.addEventListener('visibilitychange', () => { - if (document.visibilityState === 'hidden') { - this.unHighlightPoint() - this.hideTooltip() - this.setPaused(true) - } else if (this.chartIsVisible) { + if (deCanvasElement) { this.setPaused(false) } }) - // 元素可视性观察(交叉观察器) - this.setupIntersectionObserver() - const deCanvasElement = document.getElementById('de-canvas-canvas-main') - deCanvasElement.addEventListener('scroll', this.handleScroll.bind(this)) + if (deCanvasElement) { + // 页面可见性控制 + document.addEventListener('visibilitychange', () => { + if (document.visibilityState === 'hidden') { + this.unHighlightPoint() + this.hideTooltip() + this.setPaused(true) + } else if (this.chartIsVisible) { + this.setPaused(false) + } + }) + } + + if (deCanvasElement) { + // 元素可视性观察(交叉观察器) + this.setupIntersectionObserver() + } } private handleScroll() { 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 5c13bf2bf9..7dddf51e1a 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 @@ -1714,7 +1714,12 @@ export function configPlotTooltipEvent> return } // 图表容器,用于计算 tooltip 的位置 - const chartElement = document.getElementById('shape-id-' + chart.id) + // 编辑时 + let chartElement = document.getElementById('shape-id-' + chart.id) + if (!chartElement) { + // 公共连接时 + chartElement = document.getElementById('enlarge-inner-content-' + chart.id) + } configCarouselTooltip(plot, chart) // 鼠标可移入, 移入之后保持显示, 移出之后隐藏 plot.options.tooltip.container.addEventListener('mouseenter', e => { @@ -1733,6 +1738,16 @@ export function configPlotTooltipEvent> return } const event = plot.chart.interactions.tooltip?.context?.event + const isCarousel = + !event || + event?.type === 'plot:leave' || + ['pie', 'pie-rose', 'pie-donut'].includes(chart.type) + const wrapperDom = document.getElementById(G2_TOOLTIP_WRAPPER) + if (isCarousel && wrapperDom) { + wrapperDom.style.zIndex = '1' + } else { + wrapperDom.style.zIndex = '9999' + } if (tooltipCtl.tooltip) { // 处理视图放大后再关闭 tooltip 的 dom 被清除 const container = tooltipCtl.tooltip.cfg.container @@ -1751,18 +1766,15 @@ export function configPlotTooltipEvent> plot.chart.getOptions().tooltip.follow = false tooltipCtl.title = Math.random().toString() // 当显示提示为事件触发时,使用event的client坐标,否则使用tooltipCtl.point 数据点的位置,在图表中,需要加上图表在绘制区的位置 - const { x, y } = - !event || - event?.type === 'plot:leave' || - ['pie', 'pie-rose', 'pie-donut'].includes(chart.type) - ? { - x: tooltipCtl.point.x + Number(chartElement.getBoundingClientRect().left), - y: - 60 + - Number(chartElement.getBoundingClientRect().top) + - Number(chartElement.style.height.split('px')[0]) / 2 - } - : { x: event.clientX, y: event.clientY } + const { x, y } = isCarousel + ? { + x: tooltipCtl.point.x + Number(chartElement.getBoundingClientRect().left), + y: + 60 + + Number(chartElement.getBoundingClientRect().top) + + Number(chartElement.style.height.split('px')[0]) / 2 + } + : { x: event.clientX, y: event.clientY } plot.chart.getTheme().components.tooltip.x = x plot.chart.getTheme().components.tooltip.y = y })