diff --git a/src/runtime/option-preprocess/index.ts b/src/runtime/option-preprocess/index.ts
index 180dfd0c6b..ccac1d62ef 100644
--- a/src/runtime/option-preprocess/index.ts
+++ b/src/runtime/option-preprocess/index.ts
@@ -1,10 +1,8 @@
-import { get } from '@antv/util';
-import { G2View, G2ViewTree } from '../types/options';
-import { convertScale } from './scale';
+import { G2ViewTree } from '../types/options';
+import { flow } from '../../utils/flow';
+import { columnWidthRatio } from './style';
 
-export function optionPreprocess<T extends G2ViewTree = G2ViewTree>(
-  options: T,
-): T {
+export function optionPreprocess(options: G2ViewTree): G2ViewTree {
   const convertedOptions = preprocess(options);
   // If there are children, recursively convert each child node.
   if (convertedOptions.children && Array.isArray(convertedOptions.children)) {
@@ -17,19 +15,7 @@ export function optionPreprocess<T extends G2ViewTree = G2ViewTree>(
 }
 
 // Entry point for all syntactic sugar functions.
-export function preprocess<T extends G2ViewTree = G2ViewTree>(options: T): T {
-  const { style, scale, type } = options;
-  const scaleOption: G2View = {};
-  // style: { columnWidthRatio: 0.2 } => scale: { x: { padding: 0.8 } }
-  const columnWidthRatio = get(style, 'columnWidthRatio');
-  if (columnWidthRatio && type === 'interval') {
-    scaleOption.x = {
-      ...scale?.x,
-      ...convertScale(columnWidthRatio),
-    };
-  }
-  return {
-    ...options,
-    scale: { ...scale, ...scaleOption },
-  };
+export function preprocess(options: G2ViewTree): G2ViewTree {
+  //@todo define a type for params of flow
+  return flow(columnWidthRatio)(options);
 }
diff --git a/src/runtime/option-preprocess/scale.ts b/src/runtime/option-preprocess/scale.ts
deleted file mode 100644
index 78df60ad85..0000000000
--- a/src/runtime/option-preprocess/scale.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export function convertScale(columnWidthRatio: number) {
-  return {
-    padding: 1 - columnWidthRatio,
-  };
-}
diff --git a/src/runtime/option-preprocess/style.ts b/src/runtime/option-preprocess/style.ts
new file mode 100644
index 0000000000..ff988b8ed0
--- /dev/null
+++ b/src/runtime/option-preprocess/style.ts
@@ -0,0 +1,19 @@
+import { get } from '@antv/util';
+import { G2View, G2ViewTree } from '../types/options';
+
+// style: { columnWidthRatio: 0.2 } => scale: { x: { padding: 0.8 } }
+export function columnWidthRatio(option: G2ViewTree) {
+  const { style, scale, type } = option;
+  const scaleOption: G2View = {};
+  const columnWidthRatio = get(style, 'columnWidthRatio');
+  if (columnWidthRatio && type === 'interval') {
+    scaleOption.x = {
+      ...scale?.x,
+      padding: 1 - columnWidthRatio,
+    };
+  }
+  return {
+    ...option,
+    scale: { ...scale, ...scaleOption },
+  };
+}
diff --git a/src/runtime/render.ts b/src/runtime/render.ts
index d4078ed0be..50690228cf 100644
--- a/src/runtime/render.ts
+++ b/src/runtime/render.ts
@@ -73,8 +73,8 @@ export function render<T extends G2ViewTree = G2ViewTree>(
   // Initialize the context if it is not provided.
   const { width = 640, height = 480, depth = 0 } = options;
   // Preprocessing here, such as syntactic sugar.
-  const optionsPre = optionPreprocess(options);
-  const keyed = inferKeys(optionsPre);
+  const preprocessOptions = optionPreprocess(options);
+  const keyed = inferKeys(preprocessOptions);
   const {
     canvas = Canvas(width, height),
     emitter = new EventEmitter(),
diff --git a/src/utils/flow.ts b/src/utils/flow.ts
new file mode 100644
index 0000000000..924dc0042b
--- /dev/null
+++ b/src/utils/flow.ts
@@ -0,0 +1,13 @@
+type FlowFunction<P> = (param: P) => P;
+
+/**
+ * 类似 lodash.flow 的方法
+ * @param flows
+ */
+export function flow<P>(...flows: FlowFunction<P>[]): FlowFunction<P> {
+  return (param: P) => {
+    return flows.reduce((result: P, f: FlowFunction<P>) => {
+      return f(result);
+    }, param);
+  };
+}