From 6df4df5681452476a9ebbfbf968413a510d3c568 Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Thu, 28 Mar 2024 17:17:55 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E6=8E=92=E5=BA=8F=E6=8C=89=E9=92=AE=E5=9C=A8?= =?UTF-8?q?=E5=85=AC=E5=85=B1=E9=93=BE=E6=8E=A5=E7=82=B9=E5=87=BB=E6=97=A0?= =?UTF-8?q?=E6=95=88=20#8543?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- core/core-frontend/src/pages/index/main.ts | 1 + core/core-frontend/src/pages/lib/main.ts | 1 + core/core-frontend/src/pages/mobile/main.ts | 1 + core/core-frontend/src/pages/panel/main.ts | 1 + .../js/panel/charts/table/table-info.ts | 5 ++- .../js/panel/charts/table/table-normal.ts | 5 ++- .../js/panel/common/common_table.ts | 33 ++++++++++++++++++- .../views/components/ChartComponentS2.vue | 2 +- 8 files changed, 45 insertions(+), 4 deletions(-) diff --git a/core/core-frontend/src/pages/index/main.ts b/core/core-frontend/src/pages/index/main.ts index fb5753fff9..3d5194e584 100644 --- a/core/core-frontend/src/pages/index/main.ts +++ b/core/core-frontend/src/pages/index/main.ts @@ -3,6 +3,7 @@ import '../../assets/font/index.css' import '@/style/index.less' import '@/plugins/svg-icon' import 'normalize.css/normalize.css' +import '@antv/s2/dist/style.min.css' import App from './App.vue' import { setupI18n } from '@/plugins/vue-i18n' import { setupStore } from '@/store' diff --git a/core/core-frontend/src/pages/lib/main.ts b/core/core-frontend/src/pages/lib/main.ts index b86abdfbc1..a4a0de8867 100644 --- a/core/core-frontend/src/pages/lib/main.ts +++ b/core/core-frontend/src/pages/lib/main.ts @@ -1,6 +1,7 @@ import '@/style/index.less' import '@/plugins/svg-icon' import 'normalize.css/normalize.css' +import '@antv/s2/dist/style.min.css' import { setupI18n } from '@/plugins/vue-i18n' import { setupStore } from '@/store' import { setupElementPlus } from '@/plugins/element-plus' diff --git a/core/core-frontend/src/pages/mobile/main.ts b/core/core-frontend/src/pages/mobile/main.ts index 9d1af0c023..0bca0e26da 100644 --- a/core/core-frontend/src/pages/mobile/main.ts +++ b/core/core-frontend/src/pages/mobile/main.ts @@ -3,6 +3,7 @@ import '../../assets/font/index.css' import '@/style/index.less' import '@/plugins/svg-icon' import 'normalize.css/normalize.css' +import '@antv/s2/dist/style.min.css' import App from './App.vue' import { setupI18n } from '@/plugins/vue-i18n' import { setupStore } from '@/store' diff --git a/core/core-frontend/src/pages/panel/main.ts b/core/core-frontend/src/pages/panel/main.ts index 544f2485ee..388a7a8585 100644 --- a/core/core-frontend/src/pages/panel/main.ts +++ b/core/core-frontend/src/pages/panel/main.ts @@ -58,6 +58,7 @@ import '../../assets/font/index.css' import '@/style/index.less' import '@/plugins/svg-icon' import 'normalize.css/normalize.css' +import '@antv/s2/dist/style.min.css' import AppElement from './App.vue' import { setupI18n } from '@/plugins/vue-i18n' import { setupStore } from '@/store' diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts index 63239b5133..6ec3eb7d94 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts @@ -101,7 +101,10 @@ export class TableInfo extends S2ChartView { height: containerDom.offsetHeight, showSeriesNumber: customAttr.tableHeader.showIndex, style: this.configStyle(chart), - conditions: this.configConditions(chart) + conditions: this.configConditions(chart), + tooltip: { + getContainer: () => containerDom + } } // 开启序号之后，第一列就是序号列，修改 label 即可 if (s2Options.showSeriesNumber) { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts index ba5ee4075a..3097594107 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts @@ -102,7 +102,10 @@ export class TableNormal extends S2ChartView { height: containerDom.offsetHeight, showSeriesNumber: customAttr.tableHeader.showIndex, style: this.configStyle(chart), - conditions: this.configConditions(chart) + conditions: this.configConditions(chart), + tooltip: { + getContainer: () => containerDom + } } // 开启序号之后，第一列就是序号列，修改 label 即可 if (s2Options.showSeriesNumber) { diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts index b26c3825d7..bacb5afb18 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts @@ -632,7 +632,8 @@ class SortTooltip extends BaseTooltip { left: `${this.position?.x}px`, top: `${this.position?.y}px`, pointerEvents: enterable ? 'all' : 'none', - zIndex: 9999 + zIndex: 9999, + position: 'absolute' }, visible: true }) @@ -645,6 +646,9 @@ export function configTooltip(option: S2Options) { } option.tooltip = { ...option.tooltip, + adjustPosition: ({ event }) => { + return getTooltipPosition(event) + }, renderTooltip: sheet => new SortTooltip(sheet) } option.headerActionIcons = [ @@ -706,3 +710,30 @@ export function copyContent(s2Instance, event, fieldMeta) { copyString(content, true) } } + +function getTooltipPosition(event) { + const s2Instance = event.s2Instance + const { x, y } = event + const result = { x: x + 15, y: y + 10 } + if (!s2Instance) { + return result + } + const { height, width } = s2Instance.getCanvasElement().getBoundingClientRect() + const { offsetHeight, offsetWidth } = s2Instance.tooltip.getContainer() + if (offsetWidth > width) { + result.x = 0 + } + if (offsetHeight > height) { + result.y = 0 + } + if (!(result.x || result.y)) { + return result + } + if (result.x && result.x + offsetWidth > width) { + result.x -= result.x + offsetWidth - width + } + if (result.y && result.y + offsetHeight > height) { + result.y -= offsetHeight + 15 + } + return result +} diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue index 3f3c9841f0..8bfbdac94f 100644 --- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue +++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue @@ -404,7 +404,7 @@ const autoHeightStyle = computed(() => { @trackClick="trackClick" />
-
+