fix(图表): 修复表格数据为空时样式错误

core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts

@@ -22,7 +22,6 @@ import {
   getRowIndex,
   SortTooltip,
   summaryRowStyle,
-  configEmptyDataStyle,
   getLeafNodes,
   getColumns,
   drawImage,
@@ -198,7 +197,12 @@ export class TableInfo extends S2ChartView<TableSheet> {
           ? ScrollbarPositionType.CONTENT
           : ScrollbarPositionType.CANVAS
       },
-      frozen: {}
+      frozen: {},
+      placeholder: {
+        empty: {
+          description: t('data_set.no_data')
+        }
+      }
     }
     s2Options.style = this.configStyle(chart, s2DataConfig)
     // 自适应列宽模式下，URL 字段的宽度固定为 120
@@ -332,8 +336,6 @@ export class TableInfo extends S2ChartView<TableSheet> {
         ev.colsHierarchy.width = lastNode.x + lastNode.width
       })
     }
-    // 空数据时表格样式
-    configEmptyDataStyle(newChart, basicStyle, newData, container)
     // click
     newChart.on(S2Event.DATA_CELL_CLICK, ev => {
       const cell = newChart.getCell(ev.target)

core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts

@@ -1,7 +1,6 @@
 import { useI18n } from '@/hooks/web/useI18n'
 import { formatterItem, valueFormatter } from '@/views/chart/components/js/formatter'
 import {
-  configEmptyDataStyle,
   copyContent,
   CustomDataCell,
   getSummaryRow,
@@ -157,7 +156,12 @@ export class TableNormal extends S2ChartView<TableSheet> {
           ? ScrollbarPositionType.CONTENT
           : ScrollbarPositionType.CANVAS
       },
-      frozen: {}
+      frozen: {},
+      placeholder: {
+        empty: {
+          description: t('data_set.no_data')
+        }
+      }
     }
     // 列宽设置
     s2Options.style = this.configStyle(chart, s2DataConfig)
@@ -240,7 +244,6 @@ export class TableNormal extends S2ChartView<TableSheet> {
         ev.colsHierarchy.width = lastNode.x + lastNode.width
       })
     }
-    configEmptyDataStyle(newChart, basicStyle, newData, container)
     // click
     newChart.on(S2Event.DATA_CELL_CLICK, ev => {
       const cell = newChart.getCell(ev.target)

core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts

@@ -438,6 +438,11 @@ export class TablePivot extends S2ChartView<PivotSheet> {
       },
       dataCell: meta => {
         return new CustomDataCell(meta, meta.spreadsheet)
+      },
+      placeholder: {
+        empty: {
+          description: t('data_set.no_data')
+        }
       }
     }
     // options
@@ -1251,8 +1256,8 @@ class EmptyDataCell extends MergedCell {
     this.meta.fieldValue = ' '
     super.drawTextShape()
     const { rowHeader, columnHeader } = this.spreadsheet.facet
-    const offsetX = columnHeader.style.viewportWidth / 2
-    const offsetY = rowHeader.style.viewportHeight / 2
+    const offsetX = columnHeader.headerConfig.viewportWidth / 2
+    const offsetY = rowHeader.headerConfig.viewportHeight / 2
     const style = this.getTextStyle()
     this.appendChild(
       new Text({

core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts

@@ -2079,44 +2079,6 @@ export class SummaryCell extends CustomDataCell {
   }
 }
 
-/**
- * 配置空数据样式
- * @param newChart
- * @param basicStyle
- * @param newData
- * @param container
- */
-export const configEmptyDataStyle = (newChart, basicStyle, newData, container) => {
-  /**
-   * 辅助函数：移除空数据dom
-   */
-  const removeEmptyDom = () => {
-    const emptyElement = document.getElementById(container + '_empty')
-    if (emptyElement) {
-      emptyElement.parentElement.removeChild(emptyElement)
-    }
-  }
-  removeEmptyDom()
-  if (newData.length) return
-  newChart.on(S2Event.LAYOUT_AFTER_HEADER_LAYOUT, ev => {
-    removeEmptyDom()
-    if (!newData.length) {
-      const emptyDom = document.createElement('div')
-      const left = Math.min(newChart.options.width, ev.colsHierarchy.width) / 2 - 32
-      emptyDom.id = container + '_empty'
-      emptyDom.textContent = i18nt('data_set.no_data')
-      emptyDom.setAttribute(
-        'style',
-        `position: absolute;
-        left: ${left}px;
-        top: 50%;`
-      )
-      const parent = document.getElementById(container)
-      parent.insertBefore(emptyDom, parent.firstChild)
-    }
-  })
-}
-
 export const getLeafNodes = (tree: Array<ColumnNode>): ColumnNode[] => {
   const result: ColumnNode[] = []
   const inorderTraversal = node => {