fix(图表): 优化提示轮播在编辑移动端是,显示不正确的问题,以及zIndex过高的问题,在部分浏览页无法轮播的问题。

This commit is contained in:
jianneng-fit2cloud
2025-04-03 18:23:05 +08:00
committed by jianneng-fit2cloud
parent 595c398fa0
commit b721c56034
2 changed files with 60 additions and 29 deletions

View File

@@ -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() {

View File

@@ -1714,7 +1714,12 @@ export function configPlotTooltipEvent<O extends PickOptions, P extends Plot<O>>
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<O extends PickOptions, P extends Plot<O>>
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<O extends PickOptions, P extends Plot<O>>
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
})