diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts
index 5d2ec9551e..3466739dc8 100644
--- a/core/core-frontend/src/locales/en.ts
+++ b/core/core-frontend/src/locales/en.ts
@@ -1727,6 +1727,10 @@ export default {
table_column_fixed: 'Fixed column width',
table_column_custom: 'Custom',
table_column_col_adapt: 'Column adaptive',
+ table_row_header_width: 'Table Row Header Width',
+ table_row_header_adapt: 'Adaptive',
+ table_row_header_fixed: 'Fixed',
+ table_row_header_percent: 'Percent',
chart_table_pivot: 'Pivot table',
chart_table_heatmap: 'Heat map',
table_pivot_row: 'Data row',
diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts
index 84bc8ad903..8f30ccc11a 100644
--- a/core/core-frontend/src/locales/tw.ts
+++ b/core/core-frontend/src/locales/tw.ts
@@ -1686,6 +1686,10 @@ export default {
table_column_fixed: '固定列寬',
table_column_custom: '自訂',
table_column_col_adapt: '列自適應',
+ table_row_header_width: '行頭寬度',
+ table_row_header_adapt: '自適應',
+ table_row_header_fixed: '固定寬度',
+ table_row_header_percent: '百分比',
chart_table_pivot: '透視表',
chart_table_heatmap: '熱力圖',
table_pivot_row: '資料行',
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index 21edb6d2cb..59206f94ac 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -1691,6 +1691,10 @@ export default {
table_column_fixed: '固定列宽',
table_column_custom: '自定义',
table_column_col_adapt: '列自适应',
+ table_row_header_width: '行头宽度',
+ table_row_header_adapt: '自适应',
+ table_row_header_fixed: '固定宽度',
+ table_row_header_percent: '百分比',
chart_table_pivot: '透视表',
chart_table_heatmap: '热力图',
table_pivot_row: '数据行',
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 61eb3253f7..e00292cd07 100644
--- a/core/core-frontend/src/models/chart/chart-attr.d.ts
+++ b/core/core-frontend/src/models/chart/chart-attr.d.ts
@@ -381,6 +381,14 @@ declare interface ChartBasicStyle {
* 圆形填充图间距
*/
circlePadding: number
+ /**
+ * 透视表行头模式
+ */
+ tableRowHeaderMode: 'adapt' | 'fixed' | 'percent'
+ /**
+ * 透视表行头宽度
+ */
+ tableRowHeaderWidth: number
}
/**
* 表头属性
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 6133842de9..ed45938aac 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
@@ -145,6 +145,16 @@ const init = () => {
}
tableExpandLevelOptions.push({ name, value: i })
}
+ if (basicStyle.tableRowHeaderMode === 'percent') {
+ if (basicStyle.tableRowHeaderWidth > 50) {
+ state.basicStyleForm.tableRowHeaderWidth = 20
+ }
+ }
+ if (basicStyle.tableRowHeaderMode === 'fixed') {
+ if (basicStyle.tableRowHeaderWidth < 10) {
+ state.basicStyleForm.tableRowHeaderWidth = 120
+ }
+ }
}
const lastPageInfo = dvMainStore.getViewPageInfo(props.chart.id)
if (lastPageInfo) {
@@ -986,6 +996,46 @@ onMounted(async () => {
%
+
+
+
+ {{ t('chart.table_row_header_adapt') }}
+
+
+ {{ t('chart.table_row_header_fixed') }}
+
+
+ {{ t('chart.table_row_header_percent') }}
+
+
+
+
+
+
{
'tableLayoutMode',
'showHoverStyle',
'quotaPosition',
- 'quotaColLabel'
+ 'quotaColLabel',
+ 'tableRowHeaderMode'
]
}
axis: AxisType[] = ['xAxis', 'xAxisExt', 'yAxis', 'filter']
@@ -265,9 +266,9 @@ export class TablePivot extends S2ChartView {
}
// options
s2Options.style = this.configStyle(chart, s2DataConfig)
- // 默认展开层级
if (basicStyle.tableLayoutMode === 'tree') {
- const { defaultExpandLevel } = basicStyle
+ const { defaultExpandLevel, tableRowHeaderMode, tableRowHeaderWidth } = basicStyle
+ // 默认展开层级
if (isNumeric(defaultExpandLevel)) {
if ((defaultExpandLevel as number) >= chart.xAxis.length) {
s2Options.style.rowExpandDepth = defaultExpandLevel as number
@@ -281,6 +282,23 @@ export class TablePivot extends S2ChartView {
if (!defaultExpandLevel) {
s2Options.style.hierarchyCollapse = true
}
+
+ // 行头宽度
+ if (tableRowHeaderMode === 'fixed') {
+ let treeRowsWidth = tableRowHeaderWidth
+ if (treeRowsWidth < 10) {
+ treeRowsWidth = 120
+ }
+ s2Options.style.treeRowsWidth = treeRowsWidth
+ }
+ if (tableRowHeaderMode === 'percent') {
+ let treeRowsWidth = tableRowHeaderWidth
+ if (treeRowsWidth > 50) {
+ treeRowsWidth = 20
+ }
+ const width = containerDom.offsetWidth * (treeRowsWidth / 100)
+ s2Options.style.treeRowsWidth = width
+ }
}
// 列汇总别名
if (!(basicStyle.quotaPosition === 'row' && basicStyle.tableLayoutMode === 'tree')) {