diff --git a/docs/zh-CN/charts.md b/docs/zh-CN/charts.md
new file mode 100644
index 0000000000..737f053db0
--- /dev/null
+++ b/docs/zh-CN/charts.md
@@ -0,0 +1,3 @@
+# Charts
+
+<code src="./demos/demo1.tsx"/>
diff --git a/docs/zh-CN/demos/demo1.tsx b/docs/zh-CN/demos/demo1.tsx
new file mode 100644
index 0000000000..794bfbca7f
--- /dev/null
+++ b/docs/zh-CN/demos/demo1.tsx
@@ -0,0 +1,84 @@
+import { APIClient, APIClientProvider, G2Plot, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+
+const api = new APIClient();
+
+const mock = new MockAdapter(api.axios);
+
+mock.onGet('/test').reply(200, {
+  data: [
+    {
+      Date: '2010-01',
+      scales: 1998,
+    },
+    {
+      Date: '2010-02',
+      scales: 1850,
+    },
+    {
+      Date: '2010-03',
+      scales: 1720,
+    },
+    {
+      Date: '2010-04',
+      scales: 1818,
+    },
+    {
+      Date: '2010-05',
+      scales: 1920,
+    },
+    {
+      Date: '2010-06',
+      scales: 1802,
+    },
+    {
+      Date: '2010-07',
+      scales: 1945,
+    },
+    {
+      Date: '2010-08',
+      scales: 1856,
+    },
+    {
+      Date: '2010-09',
+      scales: 2107,
+    },
+  ],
+});
+
+const fetchData = async (api: APIClient, options) => {
+  const response = await api.request(options);
+  return response?.data?.data;
+};
+
+const schema = {
+  type: 'void',
+  name: 'line',
+  'x-designer': 'G2Plot.Designer',
+  'x-decorator': 'CardItem',
+  'x-component': 'G2Plot',
+  'x-component-props': {
+    plot: 'Line',
+    config: {
+      data: '{{ fetchData(api, { url: "/test" }) }}',
+      padding: 'auto',
+      xField: 'Date',
+      yField: 'scales',
+      xAxis: {
+        // type: 'timeCat',
+        tickCount: 5,
+      },
+    },
+  },
+};
+
+export default () => {
+  return (
+    <APIClientProvider apiClient={api}>
+      <SchemaComponentProvider>
+        <SchemaComponent schema={schema} components={{ G2Plot }} scope={{ api, fetchData }} />
+      </SchemaComponentProvider>
+    </APIClientProvider>
+  );
+};
diff --git a/packages/core/client/src/schema-component/antd/g2plot/G2Plot.tsx b/packages/core/client/src/schema-component/antd/g2plot/G2Plot.tsx
index d81f382999..7d31528bb2 100644
--- a/packages/core/client/src/schema-component/antd/g2plot/G2Plot.tsx
+++ b/packages/core/client/src/schema-component/antd/g2plot/G2Plot.tsx
@@ -1,5 +1,7 @@
 import { Area, Bar, Column, Line, Pie } from '@antv/g2plot';
+import { Field } from '@formily/core';
 import { observer, useField } from '@formily/react';
+import { Spin } from 'antd';
 import cls from 'classnames';
 import React, { forwardRef, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -56,10 +58,23 @@ export const G2PlotRenderer = forwardRef(function <O = any>(props: ReactG2PlotPr
 
 export const G2Plot: any = observer((props: any) => {
   const { plot, config } = props;
-  const field = useField();
+  const field = useField<Field>();
   const { t } = useTranslation();
+  useEffect(() => {
+    field.data = field.data || {};
+    field.data.loaded = false;
+    if (typeof config?.data?.then === 'function') {
+      config?.data?.then((data) => {
+        field.componentProps.config.data = data;
+        field.data.loaded = true;
+      });
+    }
+  }, []);
   if (!plot || !config) {
-    return <div style={{ opacity: .3 }}>{t('In configuration')}...</div>
+    return <div style={{ opacity: 0.3 }}>{t('In configuration')}...</div>;
+  }
+  if (!field?.data?.loaded) {
+    return <Spin />;
   }
   return (
     <div>