diff --git a/common/changes/@visactor/vchart/feat-react-vchart-morphing_2024-09-14-02-31.json b/common/changes/@visactor/vchart/feat-react-vchart-morphing_2024-09-14-02-31.json
new file mode 100644
index 0000000000..dae1756144
--- /dev/null
+++ b/common/changes/@visactor/vchart/feat-react-vchart-morphing_2024-09-14-02-31.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat(react-vchart): support `morphConfig` of react-vchart, close #3219\n\n",
+      "type": "none",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "dingling112@gmail.com"
+}
\ No newline at end of file
diff --git a/docs/assets/guide/en/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md b/docs/assets/guide/en/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md
index 847d8ad552..572c94f2f3 100644
--- a/docs/assets/guide/en/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md
+++ b/docs/assets/guide/en/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md
@@ -177,6 +177,16 @@ interface VChartProps extends EventsProps {
    * @since 1.6.5
    **/
   skipFunctionDiff?: boolean;
+  /**
+   * The animation configuration for chart updates, with morph animations disabled by default. The default values are:
+   * {
+   *   morph: false,
+   *   enableExitAnimation: false
+   * }
+   * @since 1.12.7
+   */
+
+  morphConfig?: IVChartRenderOption['morphConfig'];
 }
 ```
 
@@ -448,39 +458,39 @@ interface VChartSimpleProps extends EventsProps {
 
 - Use semantic tags, from version **1.11.0**, all semantic tags support on-demand loading by default, with the default registered components for each type of chart as follows:
 
-| Chart                        | Category         | Additional Registered Components     |
-| ---------------------------- | ---------------- | ------------------------------------ |
-| `<LineChart/>`               | Cartesian Charts | `registerLabel`                      |
-| `<AreaChart/>`               | Cartesian Charts | `registerLabel`, `registerTotalLabel`|
-| `<BarChart/>`                | Cartesian Charts | `registerLabel`, `registerTotalLabel`|
-| `<Bar3dChart/>`              | Cartesian Charts | `registerLabel`, `registerTotalLabel`|
-| `<BoxPlotChart/>`            | Cartesian Charts | `registerLabel`,                     |
-| `<HeatmapChart/>`            | Cartesian Charts | `registerLabel`                      |
-| `<Histogram3dChart/>`        | Cartesian Charts | `registerLabel`                      |
-| `<HistogramChart/>`          | Cartesian Charts | `registerLabel`                      |
-| `<LinearProgressChart/>`     | Cartesian Charts | `registerLabel`                      |
-| `<RangeColumnChart/>`        | Cartesian Charts | `registerLabel`                      |
-| `<RangeColumn3dChart/>`      | Cartesian Charts | `registerLabel`                      |
-| `<ScatterChart/>`            | Cartesian Charts | `registerLabel`                      |
-| `<SequenceChart/>`           | Cartesian Charts | `registerLabel`                      |
-| `<WaterfallChart/>`          | Cartesian Charts | `registerLabel`, `registerTotalLabel`|
-| `<RadarChart/>`              | Polar Charts     | `registerLabel`                      |
-| `<RoseChart/>`               | Polar Charts     | `registerLabel`                      |
-| `<CircularProgressChart/>`   | Polar Charts     | `registerLabel`, `registerIndicator` |
-| `<Pie3dChart/>`              | General Charts   | `registerLabel`, `registerIndicator` |
-| `<PieChart/>`                | General Charts   | `registerLabel`, `registerIndicator` |
-| `<CirclePackingChart/>`      | General Charts   | None                                 |
-| `<FunnelChart/>`             | General Charts   | `registerLabel`                      |
-| `<Funnel3dChart/>`           | General Charts   | `registerLabel`                      |
-| `<GaugeChart/>`              | General Charts   | None                                 |
-| `<MapChart/>`                | General Charts   | `registerLabel`                      |
-| `<SankeyChart/>`             | General Charts   | None                                 |
-| `<SunburstChart/>`           | General Charts   | None                                 |
-| `<TreemapChart/>`            | General Charts   | None                                 |
-| `<VennChart/>`               | General Charts   | None                                 |
-| `<WordCloud3dChart/>`        | General Charts   | None                                 |
-| `<WordCloudChart/>`          | General Charts   | None                                 |
-| `<LiquidChart/>`             | General Charts   | `registerIndicator`                  |
+| Chart                      | Category         | Additional Registered Components      |
+| -------------------------- | ---------------- | ------------------------------------- |
+| `<LineChart/>`             | Cartesian Charts | `registerLabel`                       |
+| `<AreaChart/>`             | Cartesian Charts | `registerLabel`, `registerTotalLabel` |
+| `<BarChart/>`              | Cartesian Charts | `registerLabel`, `registerTotalLabel` |
+| `<Bar3dChart/>`            | Cartesian Charts | `registerLabel`, `registerTotalLabel` |
+| `<BoxPlotChart/>`          | Cartesian Charts | `registerLabel`,                      |
+| `<HeatmapChart/>`          | Cartesian Charts | `registerLabel`                       |
+| `<Histogram3dChart/>`      | Cartesian Charts | `registerLabel`                       |
+| `<HistogramChart/>`        | Cartesian Charts | `registerLabel`                       |
+| `<LinearProgressChart/>`   | Cartesian Charts | `registerLabel`                       |
+| `<RangeColumnChart/>`      | Cartesian Charts | `registerLabel`                       |
+| `<RangeColumn3dChart/>`    | Cartesian Charts | `registerLabel`                       |
+| `<ScatterChart/>`          | Cartesian Charts | `registerLabel`                       |
+| `<SequenceChart/>`         | Cartesian Charts | `registerLabel`                       |
+| `<WaterfallChart/>`        | Cartesian Charts | `registerLabel`, `registerTotalLabel` |
+| `<RadarChart/>`            | Polar Charts     | `registerLabel`                       |
+| `<RoseChart/>`             | Polar Charts     | `registerLabel`                       |
+| `<CircularProgressChart/>` | Polar Charts     | `registerLabel`, `registerIndicator`  |
+| `<Pie3dChart/>`            | General Charts   | `registerLabel`, `registerIndicator`  |
+| `<PieChart/>`              | General Charts   | `registerLabel`, `registerIndicator`  |
+| `<CirclePackingChart/>`    | General Charts   | None                                  |
+| `<FunnelChart/>`           | General Charts   | `registerLabel`                       |
+| `<Funnel3dChart/>`         | General Charts   | `registerLabel`                       |
+| `<GaugeChart/>`            | General Charts   | None                                  |
+| `<MapChart/>`              | General Charts   | `registerLabel`                       |
+| `<SankeyChart/>`           | General Charts   | None                                  |
+| `<SunburstChart/>`         | General Charts   | None                                  |
+| `<TreemapChart/>`          | General Charts   | None                                  |
+| `<VennChart/>`             | General Charts   | None                                  |
+| `<WordCloud3dChart/>`      | General Charts   | None                                  |
+| `<WordCloudChart/>`        | General Charts   | None                                  |
+| `<LiquidChart/>`           | General Charts   | `registerIndicator`                   |
 
 For Cartesian charts, the default registered components are as follows:
 
diff --git a/docs/assets/guide/zh/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md b/docs/assets/guide/zh/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md
index 907385ef26..420962d8cb 100644
--- a/docs/assets/guide/zh/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md
+++ b/docs/assets/guide/zh/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md
@@ -177,6 +177,15 @@ interface VChartProps extends EventsProps {
    * @since 1.6.5
    **/
   skipFunctionDiff?: boolean;
+  /**
+   *  图表更新的动画配置，默认会关闭morph动画，默认值为：
+   * {
+   *   morph: false,
+   *   enableExitAnimation: false
+   * }
+   * @since 1.12.6
+   */
+  morphConfig?: IVChartRenderOption['morphConfig'];
 }
 ```
 
diff --git a/packages/react-vchart/src/charts/BaseChart.tsx b/packages/react-vchart/src/charts/BaseChart.tsx
index 4662ddca6f..b0c3d35805 100644
--- a/packages/react-vchart/src/charts/BaseChart.tsx
+++ b/packages/react-vchart/src/charts/BaseChart.tsx
@@ -1,4 +1,12 @@
-import type { IVChart, IData, IInitOption, ISpec, IVChartConstructor, IHierarchyData } from '@visactor/vchart';
+import type {
+  IVChart,
+  IData,
+  IInitOption,
+  ISpec,
+  IVChartConstructor,
+  IHierarchyData,
+  IVChartRenderOption
+} from '@visactor/vchart';
 import type { ReactNode } from 'react';
 import React, { useState, useEffect, useRef, useImperativeHandle } from 'react';
 import type { ContainerProps } from '../containers/withContainer';
@@ -56,6 +64,11 @@ export interface BaseChartProps
   options?: ChartOptions;
   /** skip function diff when component update */
   skipFunctionDiff?: boolean;
+  /**
+   * add `morphConfig` for chart
+   * @since 1.12.7
+   */
+  morphConfig?: IVChartRenderOption['morphConfig'];
   /** 图表渲染完成事件 */
   onReady?: (instance: IVChart, isInitial: boolean) => void;
   /** throw error when chart run into an error */
@@ -81,8 +94,13 @@ const notSpecKeys = [
   'onReady',
   'spec',
   'container',
-  'options'
+  'options',
+  'morphConfig'
 ];
+const defaultMorphConfig = {
+  morph: false,
+  enableExitAnimation: false
+};
 
 const getComponentId = (child: React.ReactNode, index: number) => {
   const componentName = child && (child as any).type && ((child as any).type.displayName || (child as any).type.name);
@@ -106,13 +124,13 @@ const parseSpecFromChildren = (props: Props) => {
       const specResult = parseSpec(childProps);
 
       if (specResult.isSingle) {
-        specFromChildren[specResult.specName] = specResult.spec;
+        (specFromChildren as any)[specResult.specName] = specResult.spec;
       } else {
-        if (!specFromChildren[specResult.specName]) {
-          specFromChildren[specResult.specName] = [];
+        if (!(specFromChildren as any)[specResult.specName]) {
+          (specFromChildren as any)[specResult.specName] = [];
         }
 
-        specFromChildren[specResult.specName].push(specResult.spec);
+        (specFromChildren as any)[specResult.specName].push(specResult.spec);
       }
     }
   });
@@ -214,10 +232,7 @@ const BaseChart: React.FC<Props> = React.forwardRef((props, ref) => {
 
     if (hasSpec) {
       if (!isEqual(eventsBinded.current.spec, props.spec, { skipFunction: skipFunctionDiff })) {
-        chartContext.current.chart.updateSpecSync(parseSpec(props), undefined, {
-          morph: false,
-          enableExitAnimation: false
-        });
+        chartContext.current.chart.updateSpecSync(parseSpec(props), undefined, props.morphConfig ?? defaultMorphConfig);
         handleChartRender();
         eventsBinded.current = props;
       } else if (eventsBinded.current.data !== props.data) {
@@ -237,10 +252,7 @@ const BaseChart: React.FC<Props> = React.forwardRef((props, ref) => {
       prevSpec.current = newSpec;
       specFromChildren.current = newSpecFromChildren;
 
-      chartContext.current.chart.updateSpecSync(parseSpec(props), undefined, {
-        morph: false,
-        enableExitAnimation: false
-      });
+      chartContext.current.chart.updateSpecSync(parseSpec(props), undefined, props.morphConfig ?? defaultMorphConfig);
       handleChartRender();
       eventsBinded.current = props;
     }