From cdfd6ec52467507f9ac428623a05bb24e4e6a686 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Thu, 28 Aug 2025 20:24:57 +0800 Subject: [PATCH 1/3] fix: fix bug of tooltip first show position --- .../components/tooltip-handler/dom-tooltip-handler.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts b/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts index 96dda10b64..d0ed87cb96 100644 --- a/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts +++ b/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts @@ -111,8 +111,14 @@ export class DomTooltipHandler extends BaseTooltipHandler { maxWidth: '100wh', maxHeight: '100vh', visibility: 'hidden', - ...this._domStyle.panel + ...this._domStyle.panel, + transitionDuration: '0s' } as CSSStyleDeclaration); + // 初次有动画时间可能导致tooltip展示时从不期望的位置飘过来 + isValid(this._domStyle.panel.transitionDuration) && + setTimeout(() => { + tooltipElement.style.transitionDuration = this._domStyle.panel.transitionDuration ?? '0s'; + }, 0); tooltipElement.classList.add(tooltipSpec.className); tooltipElement.setAttribute('vchart-tooltip-id', `${this.id}`); this._container.appendChild(tooltipElement); From ffe81b7d137c33d5099ad400a253ced9747e5a56 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Thu, 28 Aug 2025 20:30:51 +0800 Subject: [PATCH 2/3] fix: fix bug of mark point error --- .../src/component/marker/mark-point/cartesian-mark-point.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vchart/src/component/marker/mark-point/cartesian-mark-point.ts b/packages/vchart/src/component/marker/mark-point/cartesian-mark-point.ts index e1f44d9984..af6a2fd64d 100644 --- a/packages/vchart/src/component/marker/mark-point/cartesian-mark-point.ts +++ b/packages/vchart/src/component/marker/mark-point/cartesian-mark-point.ts @@ -33,7 +33,7 @@ export class CartesianMarkPoint extends BaseMarkPoint { let point: IPoint; if (isXYLayout) { - point = xyLayout(data, relativeSeries, relativeSeries, relativeSeries, autoRange)[0][0]; + point = xyLayout(data, relativeSeries, relativeSeries, relativeSeries, autoRange)?.[0]?.[0]; } else if (isCoordinateLayout) { point = cartesianCoordinateLayout( data, From 683fa3e9f28a87fb61cc055c1c31a37b255fa243 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Fri, 29 Aug 2025 10:17:36 +0800 Subject: [PATCH 3/3] fix: fix bug of tooltip first show position --- .../tooltip-handler/dom-tooltip-handler.ts | 39 ++++++++----------- 1 file changed, 17 insertions(+), 22 deletions(-) diff --git a/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts b/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts index d0ed87cb96..de0e533239 100644 --- a/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts +++ b/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts @@ -93,7 +93,6 @@ export class DomTooltipHandler extends BaseTooltipHandler { const tooltipSpec = this._component.getSpec() as ITooltipSpec; const tooltipElement = document.createElement('div'); const themeFontFamily = this._chartOption?.getTheme('fontFamily'); - setStyleToDom(tooltipElement, { left: '0', top: '0', @@ -111,14 +110,8 @@ export class DomTooltipHandler extends BaseTooltipHandler { maxWidth: '100wh', maxHeight: '100vh', visibility: 'hidden', - ...this._domStyle.panel, - transitionDuration: '0s' + ...this._domStyle.panel } as CSSStyleDeclaration); - // 初次有动画时间可能导致tooltip展示时从不期望的位置飘过来 - isValid(this._domStyle.panel.transitionDuration) && - setTimeout(() => { - tooltipElement.style.transitionDuration = this._domStyle.panel.transitionDuration ?? '0s'; - }, 0); tooltipElement.classList.add(tooltipSpec.className); tooltipElement.setAttribute('vchart-tooltip-id', `${this.id}`); this._container.appendChild(tooltipElement); @@ -162,35 +155,33 @@ export class DomTooltipHandler extends BaseTooltipHandler { if (!params.changePositionOnly) { this._tooltipActual = activeTooltipSpec; } - const currentVisible = this.getVisibility(); - // 位置 const el = this._rootDom; if (el) { const { x = 0, y = 0 } = activeTooltipSpec.position ?? {}; + let position = { x, y }; + const currentVisible = this.getVisibility(); if (tooltipSpec.updateElement) { // 此处先设定一次位置，防止页面暂时出现滚动条（优先设置上次的位置） this._updatePosition(this._cacheCustomTooltipPosition ?? { x, y }); // 更新 tooltip dom tooltipSpec.updateElement(el, activeTooltipSpec, params); // 重新计算 tooltip 位置 - const position = this._getActualTooltipPosition(activeTooltipSpec, params, { + position = this._getActualTooltipPosition(activeTooltipSpec, params, { width: el.offsetWidth, height: el.offsetHeight }); - // 更新位置 - this._updatePosition(position); // 更新缓存 this._cacheCustomTooltipPosition = position; - } else { - if (!currentVisible) { - // 当从隐藏切换到显示的时候，需要先设置一次 transition 为 0ms，防止出现从一个非常远的初始位置进行动画 - this._rootDom.style.transitionDuration = '0ms'; - } else { - this._rootDom.style.transitionDuration = this._domStyle.panel.transitionDuration ?? 'initial'; - } - this._updatePosition({ x, y }); } + // 首次从false展示需要先设置一次位置，防止出现从一个非常远的初始位置进行动画 + if (!currentVisible && visible) { + this._rootDom.style.transition = 'none'; + this._updatePosition(position, false); + this._rootDom.getBoundingClientRect(); + } + // 更新位置 + this._updatePosition(position); } this.setVisibility(visible); } @@ -423,10 +414,14 @@ export class DomTooltipHandler extends BaseTooltipHandler { } } - protected _updatePosition({ x, y }: ITooltipPositionActual) { + protected _updatePosition({ x, y }: ITooltipPositionActual, resetTransition = true) { if (this._rootDom) { // translate3d 性能较好：https://stackoverflow.com/questions/22111256/translate3d-vs-translate-performance this._rootDom.style.transform = `translate3d(${x}px, ${y}px, 0)`; + if (resetTransition && this._rootDom.style.transition !== '') { + this._rootDom.style.transition = ''; + Object.assign(this._rootDom.style, this._domStyle.panel); + } } } }