diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index b5a7fedf26..2cfb6910a3 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -1544,7 +1544,8 @@ export default {
auto_fit: '自适应缩放',
zoom_level: '缩放等级',
central_point: '中心点',
- full_display: '全量显示'
+ full_display: '全量显示',
+ show_hover_style: '显示鼠标悬浮样式'
},
dataset: {
scope_edit: '仅编辑时生效',
diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts
index 12a80eea14..d26aaf1870 100644
--- a/core/core-frontend/src/models/chart/chart-attr.d.ts
+++ b/core/core-frontend/src/models/chart/chart-attr.d.ts
@@ -322,6 +322,10 @@ declare interface ChartBasicStyle {
* 符号地图自定义符号形状
*/
customIcon: string
+ /**
+ * 表格鼠标悬浮样式
+ */
+ showHoverStyle: boolean
}
/**
* 表头属性
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
index a96b0f9656..6aa4ae4a6d 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
@@ -1023,6 +1023,20 @@ onMounted(() => {
@blur="changeBasicStyle('summaryLabel')"
/>
+
+
+ {{ t('chart.show_hover_style') }}
+
+
{
'tableBorderColor',
'tableScrollBarColor',
'alpha',
- 'tablePageMode'
+ 'tablePageMode',
+ 'showHoverStyle'
],
'table-cell-selector': [
...TABLE_EDITOR_PROPERTY_INNER['table-cell-selector'],
@@ -141,21 +142,24 @@ export class TableInfo extends S2ChartView {
data: newData
}
- const customAttr = parseJson(chart.customAttr)
+ const { basicStyle, tableCell, tableHeader, tooltip } = parseJson(chart.customAttr)
// options
const s2Options: S2Options = {
width: containerDom.getBoundingClientRect().width,
height: containerDom.offsetHeight,
- showSeriesNumber: customAttr.tableHeader.showIndex,
+ showSeriesNumber: tableHeader.showIndex,
conditions: this.configConditions(chart),
tooltip: {
getContainer: () => containerDom,
renderTooltip: sheet => new SortTooltip(sheet)
+ },
+ interaction: {
+ hoverHighlight: !(basicStyle.showHoverStyle === false)
}
}
s2Options.style = this.configStyle(chart, s2DataConfig)
// 自适应列宽模式下，URL 字段的宽度固定为 120
- if (customAttr.basicStyle.tableColumnMode === 'adapt') {
+ if (basicStyle.tableColumnMode === 'adapt') {
const urlFields = fields.filter(
field => field.deType === 7 && !axisMap[field.dataeaseName]?.hide
)
@@ -164,13 +168,13 @@ export class TableInfo extends S2ChartView {
return p
}, {})
}
- if (customAttr.tableCell.tableFreeze) {
- s2Options.frozenColCount = customAttr.tableCell.tableColumnFreezeHead ?? 0
- s2Options.frozenRowCount = customAttr.tableCell.tableRowFreezeHead ?? 0
+ if (tableCell.tableFreeze) {
+ s2Options.frozenColCount = tableCell.tableColumnFreezeHead ?? 0
+ s2Options.frozenRowCount = tableCell.tableRowFreezeHead ?? 0
}
// 开启序号之后，第一列就是序号列，修改 label 即可
if (s2Options.showSeriesNumber) {
- let indexLabel = customAttr.tableHeader.indexLabel
+ let indexLabel = tableHeader.indexLabel
if (!indexLabel) {
indexLabel = ''
}
@@ -194,15 +198,13 @@ export class TableInfo extends S2ChartView {
// tooltip
this.configTooltip(chart, s2Options)
// 隐藏表头，保留顶部的分割线, 禁用表头横向 resize
- if (customAttr.tableHeader.showTableHeader === false) {
+ if (tableHeader.showTableHeader === false) {
s2Options.style.colCfg.height = 1
- if (customAttr.tableCell.showHorizonBorder === false) {
+ if (tableCell.showHorizonBorder === false) {
s2Options.style.colCfg.height = 0
}
- s2Options.interaction = {
- resize: {
- colCellVertical: false
- }
+ s2Options.interaction.resize = {
+ colCellVertical: false
}
s2Options.colCell = (node, sheet, config) => {
node.label = ' '
@@ -217,7 +219,7 @@ export class TableInfo extends S2ChartView {
const newChart = new TableSheet(containerDom, s2DataConfig, s2Options)
// 自适应铺满
- if (customAttr.basicStyle.tableColumnMode === 'adapt') {
+ if (basicStyle.tableColumnMode === 'adapt') {
newChart.on(S2Event.LAYOUT_RESIZE_COL_WIDTH, () => {
newChart.store.set('lastLayoutResult', newChart.facet.layoutResult)
})
@@ -298,7 +300,7 @@ export class TableInfo extends S2ChartView {
action(param)
})
// tooltip
- const { show } = customAttr.tooltip
+ const { show } = tooltip
if (show) {
newChart.on(S2Event.COL_CELL_HOVER, event => this.showTooltip(newChart, event, meta))
newChart.on(S2Event.DATA_CELL_HOVER, event => this.showTooltip(newChart, event, meta))
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 007ed8a515..5758f045d5 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
@@ -34,7 +34,8 @@ export class TableNormal extends S2ChartView {
'basic-style-selector': [
...TABLE_EDITOR_PROPERTY_INNER['basic-style-selector'],
'showSummary',
- 'summaryLabel'
+ 'summaryLabel',
+ 'showHoverStyle'
],
'table-cell-selector': [
...TABLE_EDITOR_PROPERTY_INNER['table-cell-selector'],
@@ -130,28 +131,31 @@ export class TableNormal extends S2ChartView {
data: newData
}
- const customAttr = parseJson(chart.customAttr)
+ const { basicStyle, tableCell, tableHeader, tooltip } = parseJson(chart.customAttr)
// options
const s2Options: S2Options = {
width: containerDom.getBoundingClientRect().width,
height: containerDom.offsetHeight,
- showSeriesNumber: customAttr.tableHeader.showIndex,
+ showSeriesNumber: tableHeader.showIndex,
conditions: this.configConditions(chart),
tooltip: {
getContainer: () => containerDom,
renderTooltip: sheet => new SortTooltip(sheet)
+ },
+ interaction: {
+ hoverHighlight: !(basicStyle.showHoverStyle === false)
}
}
// 列宽设置
s2Options.style = this.configStyle(chart, s2DataConfig)
// 行列冻结
- if (customAttr.tableCell.tableFreeze) {
- s2Options.frozenColCount = customAttr.tableCell.tableColumnFreezeHead ?? 0
- s2Options.frozenRowCount = customAttr.tableCell.tableRowFreezeHead ?? 0
+ if (tableCell.tableFreeze) {
+ s2Options.frozenColCount = tableCell.tableColumnFreezeHead ?? 0
+ s2Options.frozenRowCount = tableCell.tableRowFreezeHead ?? 0
}
// 开启序号之后，第一列就是序号列，修改 label 即可
if (s2Options.showSeriesNumber) {
- let indexLabel = customAttr.tableHeader.indexLabel
+ let indexLabel = tableHeader.indexLabel
if (!indexLabel) {
indexLabel = ''
}
@@ -165,15 +169,13 @@ export class TableNormal extends S2ChartView {
// tooltip
this.configTooltip(chart, s2Options)
// 隐藏表头，保留顶部的分割线, 禁用表头横向 resize
- if (customAttr.tableHeader.showTableHeader === false) {
+ if (tableHeader.showTableHeader === false) {
s2Options.style.colCfg.height = 1
- if (customAttr.tableCell.showHorizonBorder === false) {
+ if (tableCell.showHorizonBorder === false) {
s2Options.style.colCfg.height = 0
}
- s2Options.interaction = {
- resize: {
- colCellVertical: false
- }
+ s2Options.interaction.resize = {
+ colCellVertical: false
}
s2Options.colCell = (node, sheet, config) => {
node.label = ' '
@@ -186,10 +188,10 @@ export class TableNormal extends S2ChartView {
}
// 总计
- if (customAttr.basicStyle.showSummary) {
+ if (basicStyle.showSummary) {
// 设置汇总行高度和表头一致
const heightByField = {}
- heightByField[newData.length] = customAttr.tableHeader.tableTitleHeight
+ heightByField[newData.length] = tableHeader.tableTitleHeight
s2Options.style.rowCfg = { heightByField }
// 计算汇总加入到数据里，冻结最后一行
s2Options.frozenTrailingRowCount = 1
@@ -211,11 +213,11 @@ export class TableNormal extends S2ChartView {
return new TableDataCell(viewMeta, viewMeta.spreadsheet)
}
if (viewMeta.colIndex === 0) {
- if (customAttr.tableHeader.showIndex) {
- viewMeta.fieldValue = customAttr.basicStyle.summaryLabel ?? '总计'
+ if (tableHeader.showIndex) {
+ viewMeta.fieldValue = basicStyle.summaryLabel ?? '总计'
} else {
if (xAxis.length) {
- viewMeta.fieldValue = customAttr.basicStyle.summaryLabel ?? '总计'
+ viewMeta.fieldValue = basicStyle.summaryLabel ?? '总计'
}
}
}
@@ -225,11 +227,10 @@ export class TableNormal extends S2ChartView {
// 开始渲染
const newChart = new TableSheet(containerDom, s2DataConfig, s2Options)
// 总计紧贴在单元格后面
- if (customAttr.basicStyle.showSummary) {
+ if (basicStyle.showSummary) {
newChart.on(S2Event.LAYOUT_BEFORE_RENDER, () => {
const totalHeight =
- customAttr.tableHeader.tableTitleHeight * 2 +
- customAttr.tableCell.tableItemHeight * (newData.length - 1)
+ tableHeader.tableTitleHeight * 2 + tableCell.tableItemHeight * (newData.length - 1)
if (totalHeight < newChart.options.height) {
// 6 是阴影高度
newChart.options.height =
@@ -238,7 +239,7 @@ export class TableNormal extends S2ChartView {
})
}
// 自适应铺满
- if (customAttr.basicStyle.tableColumnMode === 'adapt') {
+ if (basicStyle.tableColumnMode === 'adapt') {
newChart.on(S2Event.LAYOUT_RESIZE_COL_WIDTH, () => {
newChart.store.set('lastLayoutResult', newChart.facet.layoutResult)
})
@@ -308,7 +309,7 @@ export class TableNormal extends S2ChartView {
action(param)
})
// tooltip
- const { show } = customAttr.tooltip
+ const { show } = tooltip
if (show) {
newChart.on(S2Event.COL_CELL_HOVER, event => this.showTooltip(newChart, event, meta))
newChart.on(S2Event.DATA_CELL_HOVER, event => this.showTooltip(newChart, event, meta))
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts
index e51b203524..b11bdc3547 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts
@@ -97,7 +97,8 @@ export class TablePivot extends S2ChartView {
'tableBorderColor',
'tableScrollBarColor',
'alpha',
- 'tableLayoutMode'
+ 'tableLayoutMode',
+ 'showHoverStyle'
]
}
axis: AxisType[] = ['xAxis', 'xAxisExt', 'yAxis', 'filter']
@@ -172,8 +173,7 @@ export class TablePivot extends S2ChartView {
})
// total config
- const customAttr = parseJson(chart.customAttr)
- const { tableTotal, basicStyle } = customAttr
+ const { basicStyle, tooltip, tableTotal } = parseJson(chart.customAttr)
tableTotal.row.subTotalsDimensions = r
tableTotal.col.subTotalsDimensions = c
@@ -259,7 +259,10 @@ export class TablePivot extends S2ChartView {
getContainer: () => containerDom
},
hierarchyType: basicStyle.tableLayoutMode ?? 'grid',
- dataSet: spreadSheet => new CustomPivotDataset(spreadSheet)
+ dataSet: spreadSheet => new CustomPivotDataset(spreadSheet),
+ interaction: {
+ hoverHighlight: !(basicStyle.showHoverStyle === false)
+ }
}
// options
s2Options.style = this.configStyle(chart, s2DataConfig)
@@ -269,7 +272,7 @@ export class TablePivot extends S2ChartView {
// 开始渲染
const s2 = new PivotSheet(containerDom, s2DataConfig, s2Options as unknown as S2Options)
// tooltip
- const { show } = customAttr.tooltip
+ const { show } = tooltip
if (show) {
s2.on(S2Event.COL_CELL_HOVER, event => this.showTooltip(s2, event, meta))
s2.on(S2Event.ROW_CELL_HOVER, event => this.showTooltip(s2, event, meta))
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 a4339185c9..92c72a5a71 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
@@ -184,7 +184,12 @@ export function getCustomTheme(chart: Chart): S2Theme {
dataCell: {
cell: {
horizontalBorderColor: tableBorderColor,
- verticalBorderColor: tableBorderColor
+ verticalBorderColor: tableBorderColor,
+ interactionState: {
+ hoverFocus: {
+ borderOpacity: basicStyle.showHoverStyle === false ? 0 : 1
+ }
+ }
}
},
scrollBar: {