diff --git a/src/control/chart/chart.scss b/src/control/chart/chart.scss
index 38a5c81f96a92f350a76fb52bf385ec72d19bcad..6dc0f9d7efacb38771a8a63bbed8204762e0cc6b 100644
--- a/src/control/chart/chart.scss
+++ b/src/control/chart/chart.scss
@@ -27,6 +27,7 @@ $control-chart: ();
     }
   }
   @include e('chart-grid-container') {
+    position: relative;
     flex: 1;
     height: 50%;
     @include when('bottom') {
@@ -59,6 +60,35 @@ $control-chart: ();
     width: 100%;
     height: 100%;
   }
+  @include e('drill-down') {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 150px;
+    padding: getCssVar('spacing', 'tight') 0;
+    background: getCssVar('color', 'bg', 1);
+    border: 1px solid getCssVar(color, border);
+    border-radius: getCssVar('border-radius', small);
+    box-shadow: getCssVar(color, elevated);
+
+    @include m('item') {
+      display: flex;
+      gap: getCssVar('spacing', 'tight');
+      align-items: center;
+      height: 40px;
+      padding: getCssVar('spacing', 'tight') getCssVar('spacing', 'base-loose');
+      font-size: getCssVar('font-size', 'regular');
+      cursor: pointer;
+
+      &:hover {
+        background-color: getCssVar(color, fill, 1);
+      }
+    }
+
+    @include m('item-text') {
+      margin-bottom: getCssVar('spacing', 'super-tight');
+    }
+  }
   @include e('grid') {
     flex: 1;
     height: auto;
diff --git a/src/control/chart/chart.tsx b/src/control/chart/chart.tsx
index 359c45b96700564cf932fb01d5c430acc5943898..c3713044665d57a71bdae6139bf51592503216c8 100644
--- a/src/control/chart/chart.tsx
+++ b/src/control/chart/chart.tsx
@@ -1,4 +1,8 @@
-import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import {
+  useControlController,
+  useNamespace,
+  useClickOutside,
+} from '@ibiz-template/vue3-util';
 import {
   defineComponent,
   nextTick,
@@ -26,13 +30,20 @@ const ChartControl = defineComponent({
     isSimple: { type: Boolean, required: false },
     data: { type: Array<IData>, required: false },
   },
-  setup(props) {
+  emits: ['drillDown'],
+  setup(props, { emit }) {
     const c = useControlController((...args) => new ChartController(...args));
     const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
     const chartRef = ref();
     const maxHeight = ref(0); // 图表表格的高度,后续会根据表格位置进行计算
     const uuid = createUUID();
 
+    const showCheck = ref(false);
+    const drillDownPos = ref({}); // 数据下钻框位置
+    const drillDownRef = ref(); // 数据下钻框
+    let func: { stop: () => void };
+    let tempParams: IData; // 点击的图表回调事件参数
+
     // 本地数据模式
     const initSimpleData = (): void => {
       if (!props.data) {
@@ -83,6 +94,19 @@ const ChartControl = defineComponent({
       return c.state.gridData || [];
     };
 
+    const computedDrillDownPos = (params: IParams) => {
+      if (params.event) {
+        const event: PointerEvent = params.event.event;
+        event.stopPropagation();
+        event.preventDefault();
+        const { offsetX, offsetY } = params.event;
+        drillDownPos.value = {
+          top: `${offsetY}px`,
+          left: `${offsetX + 16}px`,
+        };
+      }
+    };
+
     // 容器大小变化监听器
     let resizeObserver: ResizeObserver;
 
@@ -97,8 +121,34 @@ const ChartControl = defineComponent({
         resizeObserver.observe(chartRef.value);
       }
       setHeight();
+      if (props.modelData.controlParam?.ctrlParams?.ENABLEDRILLDOWN) {
+        // 开启数据钻取，重写chart的click事件
+        chart.on('click', (params: IData) => {
+          tempParams = params;
+          chart.dispatchAction({ type: 'hideTip' });
+          showCheck.value = true;
+          c.changeTooltipState(false);
+          func = useClickOutside(drillDownRef, () => {
+            showCheck.value = false;
+            c.changeTooltipState(true);
+            func.stop();
+          });
+          computedDrillDownPos(params);
+        });
+      }
     });
 
+    // 查看明细
+    const openDrillDown = (_event: MouseEvent) => {
+      showCheck.value = false;
+      if (func) {
+        func.stop();
+      }
+      c.changeTooltipState(true);
+      const param = c.computedDrillDownParam(tempParams);
+      emit('drillDown', param);
+    };
+
     // 表格显示时计算表格的高度
     watch(
       () => c.state.showGrid,
@@ -110,6 +160,17 @@ const ChartControl = defineComponent({
       },
     );
 
+    watch(
+      () => c.state.items,
+      () => {
+        console.log(888, c.state.items);
+      },
+      {
+        immediate: true,
+        deep: true,
+      },
+    );
+
     // 绘制表格
     const renderGrid = () => {
       return (
@@ -144,6 +205,10 @@ const ChartControl = defineComponent({
       ns,
       chartRef,
       uuid,
+      showCheck,
+      drillDownPos,
+      drillDownRef,
+      openDrillDown,
       renderGrid,
     };
   },
@@ -179,6 +244,41 @@ const ChartControl = defineComponent({
               <div ref='chartRef' class={[this.ns.e('chart')]}>
                 {ibiz.i18n.t('control.chart.chartPlaceholder')}
               </div>
+              {this.showCheck ? (
+                <div
+                  ref='drillDownRef'
+                  class={this.ns.e('drill-down')}
+                  style={this.drillDownPos}
+                >
+                  <div class={this.ns.em('drill-down', 'item')}>
+                    <svg
+                      viewBox='0 0 16 16'
+                      xmlns='http://www.w3.org/2000/svg'
+                      height='1em'
+                      width='1em'
+                      focusable='false'
+                      fill='currentColor'
+                    >
+                      <g
+                        id='aspnormal/preview'
+                        stroke-width='1'
+                        fill-rule='evenodd'
+                      >
+                        <path
+                          d='M11.626 0c1.057 0 1.923.818 2 1.855l.005.15v3.411a.6.6 0 0 1-1.192.097l-.008-.097.001-1.348V2.005c0-.41-.31-.749-.705-.799l-.101-.006h-9.62c-.41 0-.75.308-.8.704l-.006.101v11.989c0 .41.308.75.705.8l.101.006h5.906l.017-.004.016-.003h2.074a.598.598 0 1 1 .107 1.187l-.095.01V16H2.006a2.006 2.006 0 0 1-2-1.856L0 13.994V2.005C0 .948.818.082 1.856.005L2.006 0h9.62zm-1.595 6.328a3.669 3.669 0 0 1 3.665 3.665c0 .79-.251 1.523-.678 2.123l2.412 2.412a.6.6 0 1 1-.848.85l-2.41-2.412a3.646 3.646 0 0 1-2.14.692 3.67 3.67 0 0 1-3.667-3.665 3.67 3.67 0 0 1 3.666-3.665zm-5.106 5.29a.6.6 0 0 1 .097 1.191l-.097.008H2.85a.6.6 0 0 1-.097-1.192l.097-.008h2.074zm5.106-4.09a2.468 2.468 0 0 0-2.466 2.465 2.468 2.468 0 0 0 2.466 2.466 2.47 2.47 0 0 0 2.466-2.466 2.469 2.469 0 0 0-2.466-2.465zm-4.815-.126a.6.6 0 0 1 .097 1.193l-.097.007h-2.35A.6.6 0 0 1 2.77 7.41l.098-.008h2.349zm5.58-4a.6.6 0 0 1 .097 1.192l-.097.008H2.867A.6.6 0 0 1 2.77 3.41l.097-.008h7.929z'
+                          id='asp合并形状'
+                        ></path>
+                      </g>
+                    </svg>
+                    <div
+                      class={this.ns.em('drill-down', 'item-text')}
+                      onClick={this.openDrillDown}
+                    >
+                      {ibiz.i18n.t('control.chart.drillDown')}
+                    </div>
+                  </div>
+                </div>
+              ) : null}
             </div>
             {this.c.state.showGrid ? (
               <div class={this.ns.e('grid')}>{this.renderGrid()}</div>
diff --git a/src/locale/en/index.ts b/src/locale/en/index.ts
index 9fef70698cf5721aa488691f4b8526931c392bc1..48380a1b4ad287c0bc232bd20357fe891e45f8d6 100644
--- a/src/locale/en/index.ts
+++ b/src/locale/en/index.ts
@@ -327,6 +327,7 @@ export default {
     },
     chart: {
       chartPlaceholder: 'Chart',
+      drillDown: 'DrillDown',
     },
     dashboard: {
       customDashboardContainer: {
diff --git a/src/locale/zh-CN/index.ts b/src/locale/zh-CN/index.ts
index c17c6225a5fdd425d81a01ac61c4b4d0e702030c..eed64bccc9247e8089c10e51c107c8297010fbe7 100644
--- a/src/locale/zh-CN/index.ts
+++ b/src/locale/zh-CN/index.ts
@@ -299,6 +299,7 @@ export default {
     },
     chart: {
       chartPlaceholder: '图表',
+      drillDown: '检查明细',
     },
     dashboard: {
       customDashboardContainer: {