diff --git a/frontend/src/app/components/ChartGraph/PivotSheetChart/PivotSheetChart.tsx b/frontend/src/app/components/ChartGraph/PivotSheetChart/PivotSheetChart.tsx
index c30531463..2a7a514c9 100644
--- a/frontend/src/app/components/ChartGraph/PivotSheetChart/PivotSheetChart.tsx
+++ b/frontend/src/app/components/ChartGraph/PivotSheetChart/PivotSheetChart.tsx
@@ -16,7 +16,11 @@
  * limitations under the License.
  */
 
+import { Group } from '@antv/g-canvas';
 import {
+  CornerCell,
+  CornerHeader,
+  CornerHeaderConfig,
   Data,
   DataCell,
   DefaultCellTheme,
@@ -64,6 +68,114 @@ enum BolderFontWeight {
   bolder = 'bolder',
 }
 
+class SlashCorner extends Group {
+  node: S2CellType;
+  headerStyle: DefaultCellTheme;
+  columns: string[];
+  rows: string[];
+  values: string[];
+  constructor(
+    node: S2CellType,
+    headerStyle: DefaultCellTheme,
+    columns?: string[],
+    rows?: string[],
+    values?: string[],
+  ) {
+    super({});
+    this.node = node;
+    this.headerStyle = headerStyle;
+    this.columns = columns || [];
+    this.rows = rows || [];
+    this.values = values || [];
+    this.initCornerHeader();
+  }
+  initCornerHeader() {
+    this.initBg();
+    this.initText();
+  }
+
+  initBg() {
+    this.node.add(
+      this.addShape('polygon', {
+        attrs: {
+          points: [
+            [0, 0],
+            [0, this.node.cfg.height],
+            [this.node.cfg.width, this.node.cfg.height],
+            [this.node.cfg.width, 0],
+          ],
+          fill: this.headerStyle.cell?.backgroundColor,
+        },
+      }),
+    );
+    this.node.add(
+      this.addShape('line', {
+        attrs: {
+          x1: 0,
+          y1: 0,
+          x2: this.node.cfg.width,
+          y2: this.node.cfg.height,
+          stroke: this.headerStyle.text?.fill || 'black',
+          lineWidth: 1,
+          // lineAppendWidth: 1,
+        },
+      }),
+    );
+  }
+
+  initText() {
+    this.node.add(
+      this.addShape('text', {
+        zIndex: 100,
+        attrs: {
+          x: (this.node.cfg.width / 3) * 1.2,
+          y: this.node.cfg.height / 3,
+          text: this.columns.filter(c => !['$$extra$$'].includes(c)).join('/'),
+          fontFamily: this.headerStyle.text?.fontFamily,
+          fontSize: this.headerStyle.text?.fontSize,
+          fill: this.headerStyle.text?.fill || 'black',
+          stroke: this.headerStyle.text?.fill || 'black',
+        },
+      }),
+    );
+
+    this.node.add(
+      this.addShape('text', {
+        zIndex: 100,
+        attrs: {
+          x: this.node.cfg.width / 9,
+          y: (this.node.cfg.height / 5) * 4.8,
+          text: this.rows.join('/'),
+          fontFamily: this.headerStyle.text?.fontFamily,
+          fontSize: this.headerStyle.text?.fontSize,
+          fill: this.headerStyle.text?.fill || 'black',
+          stroke: this.headerStyle.text?.fill || 'black',
+        },
+      }),
+    );
+  }
+}
+
+class OriginCornerHeader extends CornerHeader {
+  node: S2CellType;
+  constructor(node: S2CellType, headConfig: CornerHeaderConfig) {
+    super(headConfig);
+    this.node = node;
+  }
+  renderHeader() {
+    const _this = this;
+    this.headerConfig.data.forEach(function (item) {
+      _this.node.add(
+        new CornerCell(
+          item,
+          _this.headerConfig.spreadsheet,
+          _this.headerConfig,
+        ),
+      );
+    });
+  }
+}
+
 class PivotSheetChart extends ReactChart {
   static icon = `<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' role='img' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'><path d='M10 8h11V5c0-1.1-.9-2-2-2h-9v5zM3 8h5V3H5c-1.1 0-2 .9-2 2v3zm2 13h3V10H3v9c0 1.1.9 2 2 2zm8 1l-4-4l4-4zm1-9l4-4l4 4zm.58 6H13v-2h1.58c1.33 0 2.42-1.08 2.42-2.42V13h2v1.58c0 2.44-1.98 4.42-4.42 4.42z' fill='gray'/></svg>`;
 
@@ -171,6 +283,7 @@ class PivotSheetChart extends ReactChart {
       enableHoverHighlight,
       enableSelectedHighlight,
       metricNameShowIn,
+      enableSlash,
     ] = getStyles(
       styleConfigs,
       ['style'],
@@ -179,6 +292,7 @@ class PivotSheetChart extends ReactChart {
         'enableHoverHighlight',
         'enableSelectedHighlight',
         'metricNameShowIn',
+        'enableSlash',
       ],
     );
     const [summaryAggregation] = getStyles(
@@ -247,6 +361,23 @@ class PivotSheetChart extends ReactChart {
           selectedCellsSpotlight: Boolean(enableSelectedHighlight),
           autoResetSheetStyle: false,
         },
+        cornerHeader: (node, s2, headConfig) => {
+          const config = headConfig as CornerHeaderConfig;
+          if (enableSlash) {
+            new SlashCorner(
+              node,
+              Object.assign(
+                this.getHeaderStyle(styleConfigs),
+                s2.theme.cornerCell,
+              ),
+              config.data.filter(n => n.cornerType === 'col').map(n => n.value),
+              config.data.filter(n => n.cornerType === 'row').map(n => n.value),
+            );
+          } else {
+            const custom = new OriginCornerHeader(node, config);
+            custom.renderHeader();
+          }
+        },
         totals: {
           row: {
             showGrandTotals: Boolean(enableRowTotal),
diff --git a/frontend/src/app/components/ChartGraph/PivotSheetChart/config.ts b/frontend/src/app/components/ChartGraph/PivotSheetChart/config.ts
index baa5220bf..363c57a95 100644
--- a/frontend/src/app/components/ChartGraph/PivotSheetChart/config.ts
+++ b/frontend/src/app/components/ChartGraph/PivotSheetChart/config.ts
@@ -114,6 +114,12 @@ const config: ChartConfig = {
             ],
           },
         },
+        {
+          label: 'style.slashHeader',
+          key: 'enableSlash',
+          default: false,
+          comType: 'checkbox',
+        },
       ],
     },
     {
@@ -448,6 +454,7 @@ const config: ChartConfig = {
           tableSize: '表格大小',
           tableHeaderStyle: '表头样式',
           tableBodyStyle: '表体样式',
+          slashHeader: '斜线表头',
           bgColor: '背景颜色',
           font: '字体',
           align: '对齐方式',
@@ -532,6 +539,7 @@ const config: ChartConfig = {
           tableSize: 'Table Size',
           tableHeaderStyle: 'Table Header Style',
           tableBodyStyle: 'Table Body Style',
+          slashHeader: 'Slash Header',
           bgColor: 'Background Color',
           font: 'Font',
           align: 'Align',