diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts
index f013a706ed..f22d360810 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts
@@ -1,4 +1,4 @@
-import { Column, ColumnOptions } from '@antv/g2plot/esm/plots/column'
+import type { Column, ColumnOptions } from '@antv/g2plot/esm/plots/column'
 import { cloneDeep, isEmpty } from 'lodash-es'
 import {
   G2PlotChartView,
@@ -11,7 +11,7 @@ import {
   setUpGroupSeriesColor,
   setUpStackSeriesColor
 } from '@/views/chart/components/js/util'
-import { Datum } from '@antv/g2plot'
+import type { Datum } from '@antv/g2plot'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import {
   BAR_AXIS_TYPE,
@@ -22,6 +22,7 @@ import { getPadding, setGradientColor } from '@/views/chart/components/js/panel/
 import { useI18n } from '@/hooks/web/useI18n'
 import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
 import { clearExtremum, extremumEvt } from '@/views/chart/components/js/extremumUitl'
+import { Group } from '@antv/g-canvas'
 
 const { t } = useI18n()
 const DEFAULT_DATA: any[] = []
@@ -93,7 +94,7 @@ export class Bar extends G2PlotChartView<ColumnOptions, Column> {
     }
   }
 
-  drawChart(drawOptions: G2PlotDrawOptions<Column>): Column {
+  async drawChart(drawOptions: G2PlotDrawOptions<Column>): Promise<Column> {
     const { chart, container, action } = drawOptions
     if (!chart?.data?.data?.length) {
       clearExtremum(chart)
@@ -106,8 +107,9 @@ export class Bar extends G2PlotChartView<ColumnOptions, Column> {
       data
     }
     const options: ColumnOptions = this.setupOptions(chart, initOptions)
-
-    const newChart = new Column(container, options)
+    let newChart = null
+    const { Column: ColumnClass } = await import('@antv/g2plot/esm/plots/column')
+    newChart = new ColumnClass(container, options)
     newChart.on('interval:click', action)
     extremumEvt(newChart, chart, options, container)
     return newChart
@@ -146,7 +148,7 @@ export class Bar extends G2PlotChartView<ColumnOptions, Column> {
           return
         }
         const value = valueFormatter(data.value, labelCfg.formatterCfg)
-        const group = new G2PlotChartView.engine.Group({})
+        const group = new Group({})
         group.addShape({
           type: 'text',
           attrs: {
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts
index 895cbb292f..2aef190e8c 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts
@@ -9,14 +9,16 @@ import {
   getYAxisExt,
   setGradientColor
 } from '@/views/chart/components/js/panel/common/common_antv'
-import {
+import type {
   BidirectionalBar as G2BidirectionalBar,
   BidirectionalBarOptions
 } from '@antv/g2plot/esm/plots/bidirectional-bar'
 import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
 import { useI18n } from '@/hooks/web/useI18n'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
-import { Options } from '@antv/g2plot/esm'
+import type { Options } from '@antv/g2plot/esm'
+import { Group } from '@antv/g-canvas'
+
 const { t } = useI18n()
 /**
  * 对称柱状图
@@ -101,7 +103,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
     }
   }
 
-  drawChart(drawOptions: G2PlotDrawOptions<G2BidirectionalBar>): G2BidirectionalBar {
+  async drawChart(drawOptions: G2PlotDrawOptions<G2BidirectionalBar>): Promise<G2BidirectionalBar> {
     const { chart, container, action } = drawOptions
     if (!chart.data?.data?.length) {
       return
@@ -150,8 +152,11 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
         }
       }
     }
+    const { BidirectionalBar: BidirectionalBarClass } = await import(
+      '@antv/g2plot/esm/plots/bidirectional-bar'
+    )
     // 开始渲染
-    const newChart = new G2BidirectionalBar(container, options)
+    const newChart = new BidirectionalBarClass(container, options)
 
     newChart.on('interval:click', action)
     newChart.on('element:click', ev => {
@@ -451,7 +456,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
               } else {
                 res = valueFormatter(value, l.labelFormatter)
               }
-              const group = new G2PlotChartView.engine.Group({})
+              const group = new Group({})
               const isValue = param['series-field-key'] === 'value'
               const textAlign = isValue && layoutHorizontal ? 'end' : 'start'
               const isMiddle = label.position === 'middle'
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts
index 1855afb072..be75cead88 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts
@@ -2,7 +2,7 @@ import {
   G2PlotChartView,
   G2PlotDrawOptions
 } from '@/views/chart/components/js/panel/types/impl/g2plot'
-import { Bar, BarOptions } from '@antv/g2plot/esm/plots/bar'
+import type { Bar, BarOptions } from '@antv/g2plot/esm/plots/bar'
 import { getPadding, setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
 import { cloneDeep } from 'lodash-es'
 import {
@@ -17,9 +17,10 @@ import {
   BAR_EDITOR_PROPERTY,
   BAR_EDITOR_PROPERTY_INNER
 } from '@/views/chart/components/js/panel/charts/bar/common'
-import { Datum } from '@antv/g2plot/esm/types/common'
+import type { Datum } from '@antv/g2plot/esm/types/common'
 import { useI18n } from '@/hooks/web/useI18n'
 import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
+import { Group } from '@antv/g-canvas'
 
 const { t } = useI18n()
 const DEFAULT_DATA = []
@@ -105,7 +106,7 @@ export class HorizontalBar extends G2PlotChartView<BarOptions, Bar> {
     ]
   }
 
-  drawChart(drawOptions: G2PlotDrawOptions<Bar>): Bar {
+  async drawChart(drawOptions: G2PlotDrawOptions<Bar>): Promise<Bar> {
     const { chart, container, action } = drawOptions
     if (!chart.data?.data?.length) {
       return
@@ -122,6 +123,7 @@ export class HorizontalBar extends G2PlotChartView<BarOptions, Bar> {
 
     const options = this.setupOptions(chart, initOptions)
 
+    const { Bar } = await import('@antv/g2plot/esm/plots/bar')
     // 开始渲染
     const newChart = new Bar(container, options)
 
@@ -238,7 +240,7 @@ export class HorizontalBar extends G2PlotChartView<BarOptions, Bar> {
           return
         }
         const value = valueFormatter(data.value, labelCfg.formatterCfg)
-        const group = new G2PlotChartView.engine.Group({})
+        const group = new Group({})
         group.addShape({
           type: 'text',
           attrs: {
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts
index 142acad842..6fef38049f 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts
@@ -2,7 +2,7 @@ import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot'
 import { flow, hexColorToRGBA, parseJson } from '../../../util'
 import { setGradientColor } from '../../common/common_antv'
 import { useI18n } from '@/hooks/web/useI18n'
-import { Bar as G2Progress, BarOptions } from '@antv/g2plot/esm/plots/bar'
+import type { Bar as G2Progress, BarOptions } from '@antv/g2plot/esm/plots/bar'
 import {
   BAR_AXIS_TYPE,
   BAR_EDITOR_PROPERTY_INNER
@@ -66,7 +66,7 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
     appendPadding: [0, 0, 10, 0]
   }
 
-  drawChart(drawOptions: G2PlotDrawOptions<G2Progress>): G2Progress {
+  async drawChart(drawOptions: G2PlotDrawOptions<G2Progress>): Promise<G2Progress> {
     const { chart, container, action } = drawOptions
     if (!chart.data?.data?.length) {
       return
@@ -128,6 +128,7 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
     }
     const options = this.setupOptions(chart, initOptions)
 
+    const { Bar: G2Progress } = await import('@antv/g2plot/esm/plots/bar')
     // 开始渲染
     const newChart = new G2Progress(container, options)
 
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts
index a887e7d5eb..c84a2e737a 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts
@@ -2,7 +2,7 @@ import {
   G2PlotChartView,
   G2PlotDrawOptions
 } from '@/views/chart/components/js/panel/types/impl/g2plot'
-import { Bar, BarOptions } from '@antv/g2plot/esm/plots/bar'
+import type { Bar, BarOptions } from '@antv/g2plot/esm/plots/bar'
 import { getPadding, setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
 import { cloneDeep, find } from 'lodash-es'
 import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
@@ -107,7 +107,7 @@ export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
     ]
   }
 
-  drawChart(drawOptions: G2PlotDrawOptions<Bar>): Bar {
+  async drawChart(drawOptions: G2PlotDrawOptions<Bar>): Promise<Bar> {
     const { chart, container, action } = drawOptions
     if (!chart.data?.data?.length) {
       return
@@ -163,8 +163,9 @@ export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
 
     const options = this.setupOptions(chart, initOptions)
 
+    const { Bar: BarClass } = await import('@antv/g2plot/esm/plots/bar')
     // 开始渲染
-    const newChart = new Bar(container, options)
+    const newChart = new BarClass(container, options)
 
     newChart.on('interval:click', action)
 
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts
index f327d38041..5357fe6663 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts
@@ -1,4 +1,4 @@
-import { WaterfallOptions, Waterfall as G2Waterfall } from '@antv/g2plot/esm/plots/waterfall'
+import type { WaterfallOptions, Waterfall as G2Waterfall } from '@antv/g2plot/esm/plots/waterfall'
 import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot'
 import { flow, hexColorToRGBA, parseJson } from '../../../util'
 import { valueFormatter } from '../../../formatter'
@@ -60,7 +60,7 @@ export class Waterfall extends G2PlotChartView<WaterfallOptions, G2Waterfall> {
     ]
   }
   axis: AxisType[] = ['xAxis', 'yAxis', 'filter', 'drill', 'extLabel', 'extTooltip']
-  public drawChart(drawOptions: G2PlotDrawOptions<G2Waterfall>): G2Waterfall {
+  async drawChart(drawOptions: G2PlotDrawOptions<G2Waterfall>): Promise<G2Waterfall> {
     const { chart, container, action } = drawOptions
     if (!chart.data?.data) {
       return
@@ -83,6 +83,7 @@ export class Waterfall extends G2PlotChartView<WaterfallOptions, G2Waterfall> {
       ]
     }
     const options = this.setupOptions(chart, baseOptions)
+    const { Waterfall: G2Waterfall } = await import('@antv/g2plot/esm/plots/waterfall')
     const newChart = new G2Waterfall(container, options)
     newChart.on('interval:click', action)
     return newChart
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts
index c7f08f48f3..15a7b793bd 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts
@@ -2,7 +2,7 @@ import {
   G2PlotChartView,
   G2PlotDrawOptions
 } from '@/views/chart/components/js/panel/types/impl/g2plot'
-import { Area as G2Area, AreaOptions } from '@antv/g2plot/esm/plots/area'
+import type { Area as G2Area, AreaOptions } from '@antv/g2plot/esm/plots/area'
 import { getPadding, setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
 import { cloneDeep } from 'lodash-es'
 import {
@@ -22,6 +22,7 @@ import { Datum } from '@antv/g2plot/esm/types/common'
 import { useI18n } from '@/hooks/web/useI18n'
 import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
 import { clearExtremum, extremumEvt } from '@/views/chart/components/js/extremumUitl'
+import { Group } from '@antv/g-canvas'
 
 const { t } = useI18n()
 const DEFAULT_DATA = []
@@ -94,7 +95,7 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
     ]
   }
 
-  drawChart(drawOptions: G2PlotDrawOptions<G2Area>): G2Area {
+  async drawChart(drawOptions: G2PlotDrawOptions<G2Area>): Promise<G2Area> {
     const { chart, container, action } = drawOptions
     if (!chart.data.data?.length) {
       clearExtremum(chart)
@@ -110,6 +111,7 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
     }
     // options
     const options = this.setupOptions(chart, initOptions)
+    const { Area: G2Area } = await import('@antv/g2plot/esm/plots/area')
     // 开始渲染
     const newChart = new G2Area(container, options)
 
@@ -150,7 +152,7 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
           return
         }
         const value = valueFormatter(data.value, labelCfg.formatterCfg)
-        const group = new G2PlotChartView.engine.Group({})
+        const group = new Group({})
         group.addShape({
           type: 'text',
           attrs: {
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts
index 5d4e4cf216..54ebb74e65 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts
@@ -2,7 +2,7 @@ import {
   G2PlotChartView,
   G2PlotDrawOptions
 } from '@/views/chart/components/js/panel/types/impl/g2plot'
-import { Line as G2Line, LineOptions } from '@antv/g2plot/esm/plots/line'
+import type { Line as G2Line, LineOptions } from '@antv/g2plot/esm/plots/line'
 import { getPadding } from '../../common/common_antv'
 import {
   flow,
@@ -17,10 +17,11 @@ import {
   LINE_EDITOR_PROPERTY,
   LINE_EDITOR_PROPERTY_INNER
 } from '@/views/chart/components/js/panel/charts/line/common'
-import { Datum } from '@antv/g2plot/esm/types/common'
+import type { Datum } from '@antv/g2plot/esm/types/common'
 import { useI18n } from '@/hooks/web/useI18n'
 import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
 import { clearExtremum, extremumEvt } from '@/views/chart/components/js/extremumUitl'
+import { Group } from '@antv/g-canvas'
 
 const { t } = useI18n()
 const DEFAULT_DATA = []
@@ -46,7 +47,7 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
       type: 'q'
     }
   }
-  drawChart(drawOptions: G2PlotDrawOptions<G2Line>): G2Line {
+  async drawChart(drawOptions: G2PlotDrawOptions<G2Line>): Promise<G2Line> {
     const { chart, action, container } = drawOptions
     if (!chart.data.data?.length) {
       clearExtremum(chart)
@@ -105,6 +106,7 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
       ]
     }
     const options = this.setupOptions(chart, initOptions)
+    const { Line: G2Line } = await import('@antv/g2plot/esm/plots/line')
     // 开始渲染
     const newChart = new G2Line(container, options)
 
@@ -147,7 +149,7 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
           return
         }
         const value = valueFormatter(data.value, labelCfg.formatterCfg)
-        const group = new G2PlotChartView.engine.Group({})
+        const group = new Group({})
         group.addShape({
           type: 'text',
           attrs: {
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/line/stock-line.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/line/stock-line.ts
index ec8576544c..010545e475 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/stock-line.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/stock-line.ts
@@ -2,12 +2,12 @@ import {
   G2PlotChartView,
   G2PlotDrawOptions
 } from '@/views/chart/components/js/panel/types/impl/g2plot'
-import { Mix, MixOptions } from '@antv/g2plot/esm/plots/mix'
+import type { Mix, MixOptions } from '@antv/g2plot/esm/plots/mix'
 import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
 import { LINE_EDITOR_PROPERTY_INNER } from '@/views/chart/components/js/panel/charts/line/common'
 import { useI18n } from '@/hooks/web/useI18n'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
-import { Options } from '@antv/g2plot/esm'
+import type { Options } from '@antv/g2plot/esm'
 
 const { t } = useI18n()
 const DEFAULT_DATA = []
@@ -206,7 +206,7 @@ export class StockLine extends G2PlotChartView<MixOptions, Mix> {
     })
   }
 
-  drawChart(drawOptions: G2PlotDrawOptions<Mix>): Mix {
+  async drawChart(drawOptions: G2PlotDrawOptions<Mix>): Promise<Mix> {
     const { chart, action, container } = drawOptions
     if (!chart.data.data?.length) {
       return
@@ -341,7 +341,8 @@ export class StockLine extends G2PlotChartView<MixOptions, Mix> {
         ...averageLines
       ]
     })
-    const plot = new Mix(container, option)
+    const { Mix: MixClass } = await import('@antv/g2plot/esm/plots/mix')
+    const plot = new MixClass(container, option)
     this.registerEvent(data, plot, averagesLineData)
     plot.on('schema:click', evt => {
       const selectSchema = evt.data.data[xAxisDataeaseName]
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts
index bdbd824b2d..8f71c29927 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts
@@ -2,7 +2,7 @@ import {
   G2PlotChartView,
   G2PlotDrawOptions
 } from '@/views/chart/components/js/panel/types/impl/g2plot'
-import { Liquid as G2Liquid, LiquidOptions } from '@antv/g2plot/esm/plots/liquid'
+import type { Liquid as G2Liquid, LiquidOptions } from '@antv/g2plot/esm/plots/liquid'
 import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
 import { DEFAULT_MISC } from '@/views/chart/components/editor/util/chart'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
@@ -50,7 +50,7 @@ export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
     }
   }
 
-  drawChart(drawOptions: G2PlotDrawOptions<G2Liquid>): G2Liquid {
+  async drawChart(drawOptions: G2PlotDrawOptions<G2Liquid>): Promise<G2Liquid> {
     const { chart, container } = drawOptions
     if (!chart.data?.series) {
       return
@@ -59,6 +59,7 @@ export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
       percent: 0
     }
     const options = this.setupOptions(chart, initOptions)
+    const { Liquid: G2Liquid } = await import('@antv/g2plot/esm/plots/liquid')
     // 开始渲染
     return new G2Liquid(container, options)
   }
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts
index 48b99a0bbb..bd13c74e37 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts
@@ -2,7 +2,7 @@ import {
   L7PlotChartView,
   L7PlotDrawOptions
 } from '@/views/chart/components/js/panel/types/impl/l7plot'
-import { Choropleth, ChoroplethOptions } from '@antv/l7plot/dist/esm/plots/choropleth'
+import type { Choropleth, ChoroplethOptions } from '@antv/l7plot/dist/esm/plots/choropleth'
 import {
   filterChartDataByRange,
   flow,
@@ -17,7 +17,7 @@ import {
   mapRendered,
   mapRendering
 } from '@/views/chart/components/js/panel/common/common_antv'
-import { FeatureCollection } from '@antv/l7plot/dist/esm/plots/choropleth/types'
+import type { FeatureCollection } from '@antv/l7plot/dist/esm/plots/choropleth/types'
 import { cloneDeep, defaultsDeep } from 'lodash-es'
 import { useI18n } from '@/hooks/web/useI18n'
 import { valueFormatter } from '../../../formatter'
@@ -27,7 +27,7 @@ import {
   MAP_EDITOR_PROPERTY_INNER,
   MapMouseEvent
 } from '@/views/chart/components/js/panel/charts/map/common'
-import { CategoryLegendListItem } from '@antv/l7plot-component/dist/lib/types/legend'
+import type { CategoryLegendListItem } from '@antv/l7plot-component/dist/lib/types/legend'
 import createDom from '@antv/dom-util/esm/create-dom'
 import {
   CONTAINER_TPL,
@@ -143,6 +143,7 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
     }
     const context = { drawOption, geoJson }
     options = this.setupOptions(chart, options, context)
+    const { Choropleth } = await import('@antv/l7plot/dist/esm/plots/choropleth')
     const view = new Choropleth(container, options)
     this.configZoomButton(chart, view)
     mapRendering(container)
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts
index 764cb46edc..cbffc6fee8 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts
@@ -2,7 +2,7 @@ import {
   G2PlotChartView,
   G2PlotDrawOptions
 } from '@/views/chart/components/js/panel/types/impl/g2plot'
-import { DualAxes, DualAxesOptions } from '@antv/g2plot/esm/plots/dual-axes'
+import type { DualAxes, DualAxesOptions } from '@antv/g2plot/esm/plots/dual-axes'
 import {
   getAnalyse,
   getLabel,
@@ -21,10 +21,11 @@ import {
   CHART_MIX_EDITOR_PROPERTY_INNER,
   MixChartBasicStyle
 } from './chart-mix-common'
-import { Datum } from '@antv/g2plot/esm/types/common'
+import type { Datum } from '@antv/g2plot/esm/types/common'
 import { useI18n } from '@/hooks/web/useI18n'
 import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
-import { Options } from '@antv/g2plot/esm'
+import type { Options } from '@antv/g2plot/esm'
+import { Group } from '@antv/g-canvas'
 
 const { t } = useI18n()
 const DEFAULT_DATA = []
@@ -62,7 +63,7 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
       type: 'q'
     }
   }
-  drawChart(drawOptions: G2PlotDrawOptions<DualAxes>): DualAxes {
+  async drawChart(drawOptions: G2PlotDrawOptions<DualAxes>): Promise<DualAxes> {
     const { chart, action, container } = drawOptions
     if (!chart.data?.left?.data?.length && !chart.data?.right?.data?.length) {
       return
@@ -138,7 +139,7 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
       ]
     }
     const options = this.setupOptions(chart, initOptions)
-
+    const { DualAxes } = await import('@antv/g2plot/esm/plots/dual-axes')
     // 开始渲染
     const newChart = new DualAxes(container, options)
 
@@ -190,7 +191,7 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
             return
           }
           const value = valueFormatter(data.value, labelCfg.formatterCfg)
-          const group = new G2PlotChartView.engine.Group({})
+          const group = new Group({})
           group.addShape({
             type: 'text',
             attrs: {
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts
index 1a80a98cfe..0f9aa41d82 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts
@@ -1,4 +1,4 @@
-import { FunnelOptions, Funnel as G2Funnel } from '@antv/g2plot/esm/plots/funnel'
+import type { FunnelOptions, Funnel as G2Funnel } from '@antv/g2plot/esm/plots/funnel'
 import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot'
 import { flow, setUpSingleDimensionSeriesColor } from '@/views/chart/components/js/util'
 import { getPadding } from '../../common/common_antv'
@@ -53,7 +53,7 @@ export class Funnel extends G2PlotChartView<FunnelOptions, G2Funnel> {
     }
   }
 
-  public drawChart(drawOptions: G2PlotDrawOptions<G2Funnel>): G2Funnel {
+  async drawChart(drawOptions: G2PlotDrawOptions<G2Funnel>): Promise<G2Funnel> {
     const { chart, container, action } = drawOptions
     if (!chart.data?.data) {
       return
@@ -104,6 +104,7 @@ export class Funnel extends G2PlotChartView<FunnelOptions, G2Funnel> {
       }
     }
     const options = this.setupOptions(chart, baseOptions)
+    const { Funnel: G2Funnel } = await import('@antv/g2plot/esm/plots/funnel')
     const newChart = new G2Funnel(container, options)
     newChart.on('interval:click', action)
     return newChart
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/gauge.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/gauge.ts
index 35cd34b235..60e937847a 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/gauge.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/gauge.ts
@@ -2,7 +2,7 @@ import {
   G2PlotChartView,
   G2PlotDrawOptions
 } from '@/views/chart/components/js/panel/types/impl/g2plot'
-import { Gauge as G2Gauge, GaugeOptions } from '@antv/g2plot/esm/plots/gauge'
+import type { Gauge as G2Gauge, GaugeOptions } from '@antv/g2plot/esm/plots/gauge'
 import { flow, parseJson } from '@/views/chart/components/js/util'
 import {
   DEFAULT_LABEL,
@@ -64,7 +64,7 @@ export class Gauge extends G2PlotChartView<GaugeOptions, G2Gauge> {
     }
   }
 
-  drawChart(drawOptions: G2PlotDrawOptions<G2Gauge>): G2Gauge {
+  async drawChart(drawOptions: G2PlotDrawOptions<G2Gauge>): Promise<G2Gauge> {
     const { chart, container, scale } = drawOptions
     if (!chart.data?.series) {
       return
@@ -96,6 +96,7 @@ export class Gauge extends G2PlotChartView<GaugeOptions, G2Gauge> {
       }
     }
     const options = this.setupOptions(chart, initOptions, { scale })
+    const { Gauge: G2Gauge } = await import('@antv/g2plot/esm/plots/gauge')
     return new G2Gauge(container, options)
   }
 
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts
index f727840883..4ddcc8456d 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts
@@ -2,7 +2,7 @@ import {
   G2PlotChartView,
   G2PlotDrawOptions
 } from '@/views/chart/components/js/panel/types/impl/g2plot'
-import { ScatterOptions, Scatter as G2Scatter } from '@antv/g2plot/esm/plots/scatter'
+import type { ScatterOptions, Scatter as G2Scatter } from '@antv/g2plot/esm/plots/scatter'
 import { flow, parseJson, setUpSingleDimensionSeriesColor } from '../../../util'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -121,7 +121,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
     return [...new Set(arr.map(JSON.stringify))].map(JSON.parse) as T[]
   }
 
-  public drawChart(drawOptions: G2PlotDrawOptions<G2Scatter>) {
+  async drawChart(drawOptions: G2PlotDrawOptions<G2Scatter>): Promise<G2Scatter> {
     const { chart, container, action, quadrantDefaultBaseline } = drawOptions
     if (!chart.data?.data) {
       return
@@ -203,6 +203,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
     }
 
     const options = this.setupOptions(chart, baseOptions)
+    const { Scatter: G2Scatter } = await import('@antv/g2plot/esm/plots/scatter')
     const newChart = new G2Scatter(container, options)
     newChart.on('point:click', action)
     newChart.on('click', () => quadrantDefaultBaseline(defaultBaselineQuadrant))
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts
index 2e61a13be9..db57672dff 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts
@@ -1,11 +1,12 @@
-import { RadarOptions, Radar as G2Radar } from '@antv/g2plot/esm/plots/radar'
+import type { RadarOptions, Radar as G2Radar } from '@antv/g2plot/esm/plots/radar'
 import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot'
 import { flow, parseJson } from '../../../util'
 import { getPadding } from '../../common/common_antv'
 import { valueFormatter } from '../../../formatter'
-import { Datum } from '@antv/g2plot/esm/types/common'
+import type { Datum } from '@antv/g2plot/esm/types/common'
 import { useI18n } from '@/hooks/web/useI18n'
 import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
+import { Group } from '@antv/g-canvas'
 
 const { t } = useI18n()
 
@@ -59,7 +60,7 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
     }
   }
 
-  public drawChart(drawOptions: G2PlotDrawOptions<G2Radar>): G2Radar {
+  async drawChart(drawOptions: G2PlotDrawOptions<G2Radar>): Promise<G2Radar> {
     const { chart, container, action } = drawOptions
     if (!chart.data?.data) {
       return
@@ -112,6 +113,7 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
       ]
     }
     const options = this.setupOptions(chart, baseOptions)
+    const { Radar: G2Radar } = await import('@antv/g2plot/esm/plots/radar')
     const newChart = new G2Radar(container, options)
     newChart.on('point:click', action)
     return newChart
@@ -149,7 +151,7 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
           return
         }
         const value = valueFormatter(data.value, labelCfg.formatterCfg)
-        const group = new G2PlotChartView.engine.Group({})
+        const group = new Group({})
         group.addShape({
           type: 'text',
           attrs: {
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts
index e7c0ce11a1..d8facd28c2 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts
@@ -2,7 +2,7 @@ import {
   G2PlotChartView,
   G2PlotDrawOptions
 } from '@/views/chart/components/js/panel/types/impl/g2plot'
-import { Sankey, SankeyOptions } from '@antv/g2plot/esm/plots/sankey'
+import type { Sankey, SankeyOptions } from '@antv/g2plot/esm/plots/sankey'
 import { getPadding, setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
 import { cloneDeep, get } from 'lodash-es'
 import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
@@ -95,7 +95,7 @@ export class RangeBar extends G2PlotChartView<SankeyOptions, Sankey> {
     ]
   }
 
-  drawChart(drawOptions: G2PlotDrawOptions<Sankey>): Sankey {
+  async drawChart(drawOptions: G2PlotDrawOptions<Sankey>): Promise<Sankey> {
     const { chart, container, action } = drawOptions
     if (!chart.data?.data?.length) {
       return
@@ -158,7 +158,7 @@ export class RangeBar extends G2PlotChartView<SankeyOptions, Sankey> {
     }
 
     const options = this.setupOptions(chart, initOptions)
-
+    const { Sankey } = await import('@antv/g2plot/esm/plots/sankey')
     // 开始渲染
     const newChart = new Sankey(container, options)
 
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts
index 4c13ced8f3..bef607ecd4 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts
@@ -2,7 +2,7 @@ import {
   G2PlotChartView,
   G2PlotDrawOptions
 } from '@/views/chart/components/js/panel/types/impl/g2plot'
-import { ScatterOptions, Scatter as G2Scatter } from '@antv/g2plot/esm/plots/scatter'
+import type { ScatterOptions, Scatter as G2Scatter } from '@antv/g2plot/esm/plots/scatter'
 import { flow, parseJson } from '../../../util'
 import { valueFormatter } from '../../../formatter'
 import { getPadding } from '../../common/common_antv'
@@ -85,7 +85,7 @@ export class Scatter extends G2PlotChartView<ScatterOptions, G2Scatter> {
       limit: 1
     }
   }
-  public drawChart(drawOptions: G2PlotDrawOptions<G2Scatter>) {
+  async drawChart(drawOptions: G2PlotDrawOptions<G2Scatter>): Promise<G2Scatter> {
     const { chart, container, action } = drawOptions
     if (!chart.data?.data) {
       return
@@ -131,6 +131,7 @@ export class Scatter extends G2PlotChartView<ScatterOptions, G2Scatter> {
       ]
     }
     const options = this.setupOptions(chart, baseOptions)
+    const { Scatter: G2Scatter } = await import('@antv/g2plot/esm/plots/scatter')
     const newChart = new G2Scatter(container, options)
     newChart.on('point:click', action)
     return newChart
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/treemap.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/treemap.ts
index 3c1f8fa864..8a12792044 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/treemap.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/treemap.ts
@@ -55,7 +55,7 @@ export class Treemap extends G2PlotChartView<TreemapOptions, G2Treemap> {
     }
   }
 
-  public drawChart(drawOptions: G2PlotDrawOptions<G2Treemap>): G2Treemap {
+  async drawChart(drawOptions: G2PlotDrawOptions<G2Treemap>): Promise<G2Treemap> {
     const { chart, container, action } = drawOptions
     if (!chart.data?.data?.length) {
       return
@@ -102,6 +102,7 @@ export class Treemap extends G2PlotChartView<TreemapOptions, G2Treemap> {
       ]
     }
     const options = this.setupOptions(chart, baseOptions)
+    const { Treemap: G2Treemap } = await import('@antv/g2plot/esm/plots/treemap')
     const newChart = new G2Treemap(container, options)
     newChart.on('polygon:click', action)
     return newChart
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts
index 44b1563586..13afe0fa93 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts
@@ -2,7 +2,7 @@ import {
   G2PlotChartView,
   G2PlotDrawOptions
 } from '@/views/chart/components/js/panel/types/impl/g2plot'
-import { WordCloud as G2WordCloud, WordCloudOptions } from '@antv/g2plot/esm/plots/word-cloud'
+import type { WordCloud as G2WordCloud, WordCloudOptions } from '@antv/g2plot/esm/plots/word-cloud'
 import { flow, parseJson } from '@/views/chart/components/js/util'
 import { getPadding } from '@/views/chart/components/js/panel/common/common_antv'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
@@ -56,7 +56,7 @@ export class WordCloud extends G2PlotChartView<WordCloudOptions, G2WordCloud> {
       limit: 1
     }
   }
-  drawChart(drawOptions: G2PlotDrawOptions<G2WordCloud>): G2WordCloud {
+  async drawChart(drawOptions: G2PlotDrawOptions<G2WordCloud>): Promise<G2WordCloud> {
     const { chart, container, action } = drawOptions
     if (chart?.data) {
       // data
@@ -80,6 +80,7 @@ export class WordCloud extends G2PlotChartView<WordCloudOptions, G2WordCloud> {
         interactions: []
       }
       const options = this.setupOptions(chart, initOptions)
+      const { WordCloud: G2WordCloud } = await import('@antv/g2plot/esm/plots/word-cloud')
       const newChart = new G2WordCloud(container, options)
       newChart.on('point:click', param => {
         action({ x: param.x, y: param.y, data: { data: param.data.data.datum } })
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts
index be12faae9d..9dafb6c8fc 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts
@@ -2,7 +2,7 @@ import {
   G2PlotChartView,
   G2PlotDrawOptions
 } from '@/views/chart/components/js/panel/types/impl/g2plot'
-import { Pie as G2Pie, PieOptions } from '@antv/g2plot/esm/plots/pie'
+import type { Pie as G2Pie, PieOptions } from '@antv/g2plot/esm/plots/pie'
 import {
   flow,
   hexColorToRGBA,
@@ -20,7 +20,7 @@ import {
   PIE_EDITOR_PROPERTY,
   PIE_EDITOR_PROPERTY_INNER
 } from '@/views/chart/components/js/panel/charts/pie/common'
-import { Datum } from '@antv/g2plot/esm/types/common'
+import type { Datum } from '@antv/g2plot/esm/types/common'
 import { add } from 'mathjs'
 import isEmpty from 'lodash-es/isEmpty'
 import { cloneDeep } from 'lodash-es'
@@ -35,7 +35,7 @@ export class Pie extends G2PlotChartView<PieOptions, G2Pie> {
   }
   axisConfig = PIE_AXIS_CONFIG
 
-  drawChart(drawOptions: G2PlotDrawOptions<G2Pie>): G2Pie {
+  async drawChart(drawOptions: G2PlotDrawOptions<G2Pie>): Promise<G2Pie> {
     const { chart, container, action } = drawOptions
     if (!chart.data?.data?.length) {
       return
@@ -114,7 +114,7 @@ export class Pie extends G2PlotChartView<PieOptions, G2Pie> {
       }
     }
     const options = this.setupOptions(chart, initOptions)
-
+    const { Pie: G2Pie } = await import('@antv/g2plot/esm/plots/pie')
     const newChart = new G2Pie(container, options)
     newChart.on('interval:click', action)
     return newChart
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts
index 6388184ca1..288b22626b 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts
@@ -26,7 +26,7 @@ export class Rose extends G2PlotChartView<RoseOptions, G2Rose> {
   propertyInner: EditorPropertyInner = PIE_EDITOR_PROPERTY_INNER
   axisConfig = PIE_AXIS_CONFIG
 
-  drawChart(drawOptions: G2PlotDrawOptions<G2Rose>): G2Rose {
+  async drawChart(drawOptions: G2PlotDrawOptions<G2Rose>): Promise<G2Rose> {
     const { chart, container, action } = drawOptions
     if (!chart?.data?.data?.length) {
       return
@@ -79,9 +79,8 @@ export class Rose extends G2PlotChartView<RoseOptions, G2Rose> {
       }
     }
     const options = this.setupOptions(chart, baseOptions)
-    // custom color
-    // options.color = antVCustomColor(chart)
 
+    const { Rose: G2Rose } = await import('@antv/g2plot/esm/plots/rose')
     // 开始渲染
     const plot = new G2Rose(container, options)
 
diff --git a/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts b/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts
index 5bc5b91243..93d2ef5934 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts
@@ -1,5 +1,5 @@
-import { PickOptions } from '@antv/g2plot/esm/core/plot'
-import { Plot } from '@antv/g2plot/esm/core/plot'
+import type { PickOptions } from '@antv/g2plot/esm/core/plot'
+import type { Plot } from '@antv/g2plot/esm/core/plot'
 import {
   getAnalyse,
   getAnalyseHorizontal,
@@ -18,7 +18,7 @@ import {
   ChartLibraryType,
   ChartWrapper
 } from '@/views/chart/components/js/panel/types'
-import { getEngine } from '@antv/g2/esm/core'
+
 import {
   getColor,
   getGroupColor,
@@ -79,14 +79,12 @@ export abstract class G2PlotChartView<
   O extends PickOptions = PickOptions,
   P extends Plot<O> = Plot<O>
 > extends AntVAbstractChartView {
-  protected static engine = getEngine('canvas')
-
   /**
    * 根据参数构建图表对象然后返回
    * @param drawOptions 图表配置参数
    * @return 生成的图表对象，类型为 Plot 的子类
    */
-  public abstract drawChart(drawOptions: G2PlotDrawOptions<P>): G2PlotWrapper<O, P> | P
+  public abstract drawChart(drawOptions: G2PlotDrawOptions<P>): G2PlotWrapper<O, P> | P | Promise<P>
 
   protected configTheme(chart: Chart, options: O): O {
     const theme = getTheme(chart)
diff --git a/core/core-frontend/src/views/chart/components/js/panel/types/impl/l7.ts b/core/core-frontend/src/views/chart/components/js/panel/types/impl/l7.ts
index 894fd5bc76..02edfc6728 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/types/impl/l7.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/types/impl/l7.ts
@@ -1,4 +1,4 @@
-import { Scene } from '@antv/l7-scene'
+import type { Scene } from '@antv/l7-scene'
 import {
   AntVAbstractChartView,
   AntVDrawOptions,
@@ -7,7 +7,7 @@ import {
 } from '@/views/chart/components/js/panel/types'
 import { cloneDeep, defaultsDeep } from 'lodash-es'
 import { parseJson } from '@/views/chart/components/js/util'
-import { ILayer } from '@antv/l7plot'
+import type { ILayer } from '@antv/l7plot'
 import {
   configL7Label,
   configL7Tooltip,
diff --git a/core/core-frontend/src/views/chart/components/js/panel/types/impl/l7plot.ts b/core/core-frontend/src/views/chart/components/js/panel/types/impl/l7plot.ts
index aeef5f90e9..8639d8a516 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/types/impl/l7plot.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/types/impl/l7plot.ts
@@ -1,7 +1,7 @@
-import { ViewLevel } from '@antv/l7plot/dist/esm/plots/choropleth/types'
-import { FeatureCollection } from '@antv/l7plot/dist/esm/plots/choropleth/types'
-import { PlotOptions } from '@antv/l7plot/dist/esm/types/plot'
-import { Plot as L7Plot } from '@antv/l7plot/dist/esm/core/plot'
+import type { ViewLevel } from '@antv/l7plot/dist/esm/plots/choropleth/types'
+import type { FeatureCollection } from '@antv/l7plot/dist/esm/plots/choropleth/types'
+import type { PlotOptions } from '@antv/l7plot/dist/esm/types/plot'
+import type { Plot as L7Plot } from '@antv/l7plot/dist/esm/core/plot'
 import {
   configL7Label,
   configL7Legend,
diff --git a/core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts b/core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts
index 00fc52bc77..5cdcd1a2ef 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts
@@ -3,7 +3,7 @@ import {
   AntVDrawOptions,
   ChartLibraryType
 } from '@/views/chart/components/js/panel/types'
-import {
+import type {
   S2Theme,
   SpreadSheet,
   Style,
diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
index aba5f1f1b0..d0c81edb3e 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
@@ -225,7 +225,7 @@ const renderChart = async (view, callback?) => {
       await renderL7(chart, chartView as L7ChartView<any, any>, callback)
       break
     case ChartLibraryType.G2_PLOT:
-      renderG2Plot(chart, chartView as G2PlotChartView<any, any>)
+      await renderG2Plot(chart, chartView as G2PlotChartView<any, any>)
       callback?.()
       break
     default:
@@ -233,9 +233,9 @@ const renderChart = async (view, callback?) => {
   }
 }
 let myChart = null
-const renderG2Plot = (chart, chartView: G2PlotChartView<any, any>) => {
+const renderG2Plot = async (chart, chartView: G2PlotChartView<any, any>) => {
   myChart?.destroy()
-  myChart = chartView.drawChart({
+  myChart = await chartView.drawChart({
     chartObj: myChart,
     container: containerId,
     chart: chart,