diff --git a/packages/f2/src/components/pictorial/pictorial.tsx b/packages/f2/src/components/pictorial/pictorial.tsx
index 16fe55785..032ee5ce2 100644
--- a/packages/f2/src/components/pictorial/pictorial.tsx
+++ b/packages/f2/src/components/pictorial/pictorial.tsx
@@ -2,76 +2,20 @@ import { jsx } from '@antv/f-engine';
 import { GeometryProps } from '../geometry';
 import { withInterval } from '../interval';
 import { DataRecord } from '../../chart/Data';
-import { deepMix } from '@antv/util';
-
-const parsePercent = (value: number | string, total: number) => {
-  if (typeof value === 'number') {
-    return value;
-  } else if (typeof value === 'string') {
-    if (value.endsWith('%')) {
-      return (parseFloat(value) / 100) * total;
-    } else {
-      return 0;
-    }
-  }
-};
-
 export interface PictorialProps<TRecord extends DataRecord = DataRecord>
   extends GeometryProps<TRecord> {
   symbol?: any;
-  symbolSize?: (number | string)[];
-  symbolOffset?: (number | string)[];
 }
 
 export default class Pictorial extends withInterval({}) {
   props: PictorialProps;
-  // 默认初始大小
-  symbolDefaultSize: number = 400;
-
-  defalutBound(type) {
-    switch (type) {
-      case 'ellipse':
-        return {
-          rx: this.symbolDefaultSize / 2,
-          ry: this.symbolDefaultSize / 2,
-        };
-
-      default:
-        return {
-          width: this.symbolDefaultSize,
-          height: this.symbolDefaultSize,
-        };
-    }
-  }
-
-  preSymbolBound(symbol) {
-    symbol.props = deepMix(
-      {
-        style: this.defalutBound(symbol?.type),
-      },
-      symbol.props
-    );
-
-    return {
-      width: this.symbolDefaultSize,
-      height: this.symbolDefaultSize,
-    };
-  }
-
-  parsePercentArray(array, [w, h]) {
-    const x = parsePercent(array[0], w);
-    const y = parsePercent(array[1], h);
-    return [x, y];
-  }
 
   render() {
     const { props, context } = this;
     const { px2hd } = context;
-    const { symbol, symbolSize = ['100%', '100%'], symbolOffset = [0, 0] } = px2hd(props);
+    const { symbol: Symbol } = px2hd(props);
     const records = this.mapping();
 
-    const { width: symbolW, height: symbolH } = this.preSymbolBound(symbol);
-
     return (
       <group>
         {records.map((record) => {
@@ -79,26 +23,8 @@ export default class Pictorial extends withInterval({}) {
           return (
             <group key={key}>
               {children.map((item) => {
-                const [width, height] = this.parsePercentArray(symbolSize, [
-                  item.xMax - item.xMin,
-                  item.yMax - item.yMin,
-                ]);
-                const [offsetX, offsetY] = this.parsePercentArray(symbolOffset, [width, height]);
-                const position = [item.xMin + offsetX, item.yMin + offsetY];
-
-                const symbolScale = [width / symbolW, height / symbolH];
-                const transform = `translate(${position[0]},${position[1]}) scale(${symbolScale[0]},${symbolScale[1]})`;
-
-                return deepMix(
-                  {
-                    props: {
-                      style: {
-                        transform,
-                      },
-                    },
-                  },
-                  symbol
-                );
+                const { xMax, xMin, yMax, yMin } = item;
+                return <Symbol {...item} symbolSize={[xMax - xMin, yMax - yMin]} px2hd={px2hd} />;
               })}
             </group>
           );
diff --git a/packages/f2/test/components/pictorial/basic.test.tsx b/packages/f2/test/components/pictorial/basic.test.tsx
index b730e2386..14d848e43 100644
--- a/packages/f2/test/components/pictorial/basic.test.tsx
+++ b/packages/f2/test/components/pictorial/basic.test.tsx
@@ -3,42 +3,14 @@ import { Canvas, Chart, Pictorial, Axis, Tooltip } from '../../../src';
 import { createContext, delay, gestureSimulator } from '../../util';
 const context = createContext();
 
-const symbol = (
-  <image
-    style={{
-      src:
-        'https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/mNyB6MXFwnxLMwzfEWHYt/juxingbeifen_6.png',
-    }}
-  />
-);
-
-const symbolTop = (
-  <image
-    style={{
-      src:
-        'https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/VV9WVNGexcXLVYpQxjBFH/tuoyuanxingbeifen_13.png',
-    }}
-  />
-);
-
-const symbolBottom = (
-  <image
-    style={{
-      src:
-        'https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/76LdyFixxEmUqrGG6rmCG/tuoyuanxingbeifen_32.png',
-    }}
-  />
-);
 const data = [
   {
     x: '产品1',
     value: 4927,
-    bValue: 0,
   },
   {
     x: '产品2',
     value: 11607,
-    bValue: 0,
   },
 ];
 
@@ -49,21 +21,43 @@ describe('pictorial', () => {
         <Chart data={data}>
           <Axis field="value" min={0}></Axis>
 
-          <Pictorial
-            x="x"
-            y="bValue"
-            symbol={symbolBottom}
-            symbolOffset={[0, '-50%']}
-            symbolSize={['100%', '20px']}
-          />
-
-          <Pictorial x="x" y="value" symbol={symbol} />
           <Pictorial
             x="x"
             y="value"
-            symbol={symbolTop}
-            symbolSize={['100%', '20px']}
-            symbolOffset={[0, '-50%']}
+            symbol={({ xMin, xMax, yMin, yMax, px2hd }) => (
+              <group>
+                <image
+                  style={{
+                    x: xMin,
+                    y: yMax - px2hd('20px') / 2,
+                    width: xMax - xMin,
+                    height: '20px',
+                    src:
+                      'https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/76LdyFixxEmUqrGG6rmCG/tuoyuanxingbeifen_32.png',
+                  }}
+                />
+                <image
+                  style={{
+                    x: xMin,
+                    y: yMin,
+                    width: xMax - xMin,
+                    height: yMax - yMin,
+                    src:
+                      'https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/mNyB6MXFwnxLMwzfEWHYt/juxingbeifen_6.png',
+                  }}
+                />
+                <image
+                  style={{
+                    x: xMin,
+                    y: yMin - px2hd('20px') / 2,
+                    width: xMax - xMin,
+                    height: '20px',
+                    src:
+                      'https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/VV9WVNGexcXLVYpQxjBFH/tuoyuanxingbeifen_13.png',
+                  }}
+                />
+              </group>
+            )}
           />
         </Chart>
       </Canvas>
@@ -81,45 +75,41 @@ describe('pictorial', () => {
       <Canvas context={context} pixelRatio={1}>
         <Chart data={data}>
           <Axis field="value" min={0}></Axis>
-
-          <Pictorial
-            x="x"
-            y="bValue"
-            symbol={
-              <ellipse
-                style={{
-                  fill: 'l(90) 0:#1f7eff 1:#64adff',
-                }}
-              />
-            }
-            symbolOffset={['50%', 0]}
-            symbolSize={['100%', '40px']}
-          />
-
-          <Pictorial
-            x="x"
-            y="value"
-            symbol={
-              <rect
-                style={{
-                  fill: 'l(90) 0:#9cc1ff 1:#ecf5ff',
-                  fillOpacity: 0.9,
-                }}
-              />
-            }
-          />
           <Pictorial
             x="x"
             y="value"
-            symbol={
-              <ellipse
-                style={{
-                  fill: 'l(90) 0:#1f7eff 1:#64adff',
-                }}
-              />
-            }
-            symbolSize={['100%', '40px']}
-            symbolOffset={['50%', 0]}
+            symbol={({ xMin, xMax, yMin, yMax, symbolSize, origin }) => (
+              <group>
+                <ellipse
+                  style={{
+                    cx: xMin + symbolSize[0] / 2,
+                    cy: yMax,
+                    rx: symbolSize[0] / 2,
+                    ry: '20px',
+                    fill: 'l(90) 0:#1f7eff 1:#64adff',
+                  }}
+                />
+                <rect
+                  style={{
+                    x: xMin,
+                    y: yMin,
+                    width: symbolSize[0],
+                    height: symbolSize[1],
+                    fill: 'l(90) 0:#9cc1ff 1:#ecf5ff',
+                    fillOpacity: 0.9,
+                  }}
+                />
+                <ellipse
+                  style={{
+                    cx: xMin + symbolSize[0] / 2,
+                    cy: yMin,
+                    rx: symbolSize[0] / 2,
+                    ry: '20px',
+                    fill: 'l(90) 0:#1f7eff 1:#64adff',
+                  }}
+                />
+              </group>
+            )}
           />
         </Chart>
       </Canvas>