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')) {