diff --git a/CHANGELOG.md b/CHANGELOG.md
index e5c97446556d690f482bc34565913e69d29f014e..8d9ad57a94ad83a60ca5c9289c032544e370ca69 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 
 ### Added
 
+- 图表支持展示表格
 - 界面逻辑支持全局和路由会话变量
 
 ### Fixed
diff --git a/src/control/chart/chart.scss b/src/control/chart/chart.scss
index 8d1e792ad22da77c85ba9dfdaaa044567096e9d0..da5e4069bf3cfddd6ba2d90cd135089007bf495f 100644
--- a/src/control/chart/chart.scss
+++ b/src/control/chart/chart.scss
@@ -4,14 +4,75 @@ $control-chart: ();
   width: 100%;
   height: 100%;
 
-  @include e(chart) {
+  @include e(chart-grid) {
     width: 100%;
-    height: 100%;
-
+    height: 100%;    
+    @include when('show-grid') {
+      display: flex;
+      height: calc(100% - 16px);
+    }
+    @include m('bottom') {
+      flex-direction: column;
+    }
+    @include m('top') {
+      flex-direction: column-reverse;
+    }
+    @include m('left') {
+      flex-direction: row-reverse;
+    }
+    @include m('right') {
+      flex-direction: row;
+    }
     @include when('no-data') {
       display: none;
     }
   }
+  @include e('chart-container') {
+    flex: 1;
+    height: 50%;
+    @include when('bottom') {
+      width: 100%;
+      height: 50%;
+      min-height: 50%;
+    }
+    @include when('top') {
+      width: 100%;
+      height: 50%;
+      min-height: 50%;
+    }
+    @include when('left') {
+      width: 50%;
+      min-width: 50%;
+      height: 100%;
+    }
+    @include when('right') {
+      width: 50%;
+      min-width: 50%;
+      height: 100%;
+    }
+    @include when('no-grid') {
+      flex: unset;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  @include e('chart') {
+    width: 100%;
+    height: 100%;
+  }
+  @include e('grid') {
+    flex: 1;
+    height: auto;
+
+    .cell {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .el-table__body-wrapper {
+      border-bottom: 1px solid getCssVar(color, border);
+    }
+  }
 
   @include e('empty') {
     display: none;
@@ -21,4 +82,4 @@ $control-chart: ();
       display: flex;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/control/chart/chart.tsx b/src/control/chart/chart.tsx
index 02d8c0bc7960c74a948e513dca8c135930263e4e..0ef363a9d819baa4719f2435584aac3efcf315e7 100644
--- a/src/control/chart/chart.tsx
+++ b/src/control/chart/chart.tsx
@@ -1,9 +1,18 @@
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
-import { defineComponent, onMounted, PropType, ref } from 'vue';
+import {
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  PropType,
+  ref,
+  watch,
+} from 'vue';
 import { IDEChart } from '@ibiz/model-core';
 import { init } from 'echarts';
-import './chart.scss';
+import { createUUID } from 'qx-util';
 import { ChartController, IControlProvider } from '@ibiz-template/runtime';
+import './chart.scss';
 
 const ChartControl = defineComponent({
   name: 'IBizChartControl',
@@ -19,36 +28,121 @@ const ChartControl = defineComponent({
     const c = useControlController((...args) => new ChartController(...args));
     const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
     const chartRef = ref();
+    const maxHeight = ref(320); // 图表表格的高度
+    const uuid = createUUID();
+
+    // 设置表格的高
+    const setHeight = async () => {
+      await nextTick();
+      const el = document.getElementById(uuid);
+      if (el) {
+        if (
+          c.state.gridPosition === 'bottom' ||
+          c.state.gridPosition === 'top'
+        ) {
+          maxHeight.value = el.offsetHeight / 2 - 8;
+        } else {
+          maxHeight.value = el.offsetHeight - 16;
+        }
+      }
+    };
+
+    // 获取表格的数据
+    const handleGridData = () => {
+      return c.state.gridData || [];
+    };
 
     onMounted(() => {
       const chart = init(chartRef.value);
       c.initChart(chart);
+      window.addEventListener('resize', setHeight);
+      setHeight();
+    });
+
+    // 表格显示时计算表格的高度
+    watch(
+      () => c.state.showGrid,
+      () => {
+        setHeight();
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    // 绘制表格
+    const renderGrid = () => {
+      return (
+        <el-table
+          ref='tableRef'
+          data={handleGridData()}
+          border
+          style={{ width: '100%' }}
+          max-height={maxHeight.value}
+          header-row-class-name={ns.e('grid-header')}
+        >
+          {c.state.gridHeaders.map((column: IData) => {
+            return (
+              <el-table-column
+                prop={column.id}
+                align='center'
+                label={column.name}
+              ></el-table-column>
+            );
+          })}
+        </el-table>
+      );
+    };
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', setHeight);
     });
 
     return {
       c,
       ns,
       chartRef,
+      uuid,
+      renderGrid,
     };
   },
   render() {
     return (
       <iBizControlBase controller={this.c}>
-        <el-empty
-          class={[
-            this.ns.e('empty'),
-            this.ns.is('no-data', this.c.state.items.length === 0),
-          ]}
-          description='暂无数据'
-        />
-        <div
-          ref='chartRef'
-          class={[
-            this.ns.e('chart'),
-            this.ns.is('no-data', this.c.state.items.length === 0),
-          ]}
-        >
-          {ibiz.i18n.t('control.chart.chartPlaceholder')}
+        <div id={this.uuid} style={{ width: '100%', height: '100%' }}>
+          <el-empty
+            class={[
+              this.ns.e('empty'),
+              this.ns.is('no-data', this.c.state.items.length === 0),
+            ]}
+            description='暂无数据'
+          />
+          <div
+            class={[
+              this.ns.e('chart-grid'),
+              this.ns.is('no-data', this.c.state.items.length === 0),
+              this.ns.is('show-grid', this.c.state.showGrid),
+              {
+                [this.ns.em('chart-grid', this.c.state.gridPosition)]:
+                  this.c.state.showGrid,
+              },
+            ]}
+          >
+            <div
+              class={[
+                this.ns.e('chart-container'),
+                this.ns.is(this.c.state.gridPosition, this.c.state.showGrid),
+                this.ns.is('no-grid', !this.c.state.showGrid),
+              ]}
+            >
+              <div ref='chartRef' class={[this.ns.e('chart')]}>
+                {ibiz.i18n.t('control.chart.chartPlaceholder')}
+              </div>
+            </div>
+            {this.c.state.showGrid ? (
+              <div class={this.ns.e('grid')}>{this.renderGrid()}</div>
+            ) : null}
+          </div>
         </div>
       </iBizControlBase>
     );