feat(图表): 透视表支持树形展示 #8509

core/core-frontend/src/locales/zh-CN.ts

@@ -1110,7 +1110,10 @@ export default {
     quadrant: '象限',
     font_size: '字号',
     word_size_range: '字号区间',
-    word_spacing: '文字间隔'
+    word_spacing: '文字间隔',
+    table_layout_mode: '展示形式',
+    table_layout_grid: '平铺展示',
+    table_layout_tree: '树形展示'
   },
   dataset: {
     scope_edit: '仅编辑时生效',

core/core-frontend/src/models/chart/chart-attr.d.ts

@@ -96,6 +96,10 @@ declare interface ChartBasicStyle {
    * 表格分页大小
    */
   tablePageSize: number
+  /**
+   * 表格展示形式,平铺和树形
+   */
+  tableLayoutMode: 'grid' | 'tree'
   /**
    * 仪表盘样式
    */

core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue

@@ -198,6 +198,23 @@ onMounted(() => {
       </el-checkbox>
     </el-form-item>
 
+    <el-form-item
+      class="form-item"
+      v-if="showProperty('tableLayoutMode')"
+      :label="t('chart.table_layout_mode')"
+      :class="'form-item-' + themes"
+    >
+      <el-radio-group
+        size="small"
+        :effect="themes"
+        v-model="state.basicStyleForm.tableLayoutMode"
+        @change="changeBasicStyle('tableLayoutMode')"
+      >
+        <el-radio label="grid">{{ t('chart.table_layout_grid') }}</el-radio>
+        <el-radio label="tree">{{ t('chart.table_layout_tree') }}</el-radio>
+      </el-radio-group>
+    </el-form-item>
+
     <div class="alpha-setting" v-if="showProperty('alpha')">
       <label class="alpha-label" :class="{ dark: 'dark' === themes }">
         {{ t('chart.not_alpha') }}

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -1382,7 +1382,8 @@ export const DEFAULT_BASIC_STYLE: ChartBasicStyle = {
   innerRadius: 60,
   showZoom: true,
   zoomButtonColor: '#aaa',
-  zoomBackground: '#fff'
+  zoomBackground: '#fff',
+  tableLayoutMode: 'grid'
 }
 
 export const BASE_VIEW_CONFIG = {

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

@@ -37,7 +37,13 @@ export class TablePivot extends S2ChartView<PivotSheet> {
       'showRowTooltip'
     ],
     'table-total-selector': ['row', 'col'],
-    'basic-style-selector': ['tableColumnMode', 'tableBorderColor', 'tableScrollBarColor', 'alpha']
+    'basic-style-selector': [
+      'tableColumnMode',
+      'tableBorderColor',
+      'tableScrollBarColor',
+      'alpha',
+      'tableLayoutMode'
+    ]
   }
   axis: AxisType[] = ['xAxis', 'xAxisExt', 'yAxis', 'filter']
   axisConfig: AxisConfig = {
@@ -104,7 +110,7 @@ export class TablePivot extends S2ChartView<PivotSheet> {
 
     // total config
     const customAttr = parseJson(chart.customAttr)
-    const { tableTotal } = customAttr
+    const { tableTotal, basicStyle } = customAttr
     tableTotal.row.subTotalsDimensions = r
     tableTotal.col.subTotalsDimensions = c
 
@@ -182,7 +188,8 @@ export class TablePivot extends S2ChartView<PivotSheet> {
       height: containerDom.offsetHeight,
       style: this.configStyle(chart),
       totals: tableTotal,
-      conditions: this.configConditions(chart)
+      conditions: this.configConditions(chart),
+      hierarchyType: basicStyle.tableLayoutMode ?? 'grid'
     }
 
     // 开始渲染