diff --git a/packages/plots/src/core/plots/area/type.ts b/packages/plots/src/core/plots/area/type.ts
index 939cba7f4..5edb9890c 100644
--- a/packages/plots/src/core/plots/area/type.ts
+++ b/packages/plots/src/core/plots/area/type.ts
@@ -1,3 +1,8 @@
 import type { Options } from '../../types/common';
 
-export type AreaOptions = Options;
+export type AreaOptions = Omit<Options, 'yField'> & {
+  /**
+   * @title y轴字段
+   */
+  readonly yField?: string | string[];
+};
diff --git a/packages/plots/src/core/plots/dual-axes/index.ts b/packages/plots/src/core/plots/dual-axes/index.ts
index a5c0e9d83..42f1b6900 100644
--- a/packages/plots/src/core/plots/dual-axes/index.ts
+++ b/packages/plots/src/core/plots/dual-axes/index.ts
@@ -17,7 +17,7 @@ export class DualAxes extends Plot<DualAxesOptions> {
     return {
       type: 'view',
       axis: {
-        y: { title: false },
+        y: { title: false, tick: false },
         x: { title: false },
       },
     };
diff --git a/site/.dumirc.ts b/site/.dumirc.ts
index a93dd61a5..a6b47d8ef 100644
--- a/site/.dumirc.ts
+++ b/site/.dumirc.ts
@@ -10,7 +10,7 @@ export default defineConfig({
     title: 'Ant Design Charts',
     description: 'AntV react component library',
     defaultLanguage: 'zh',
-    siteUrl: 'https://charts.ant.design',
+    siteUrl: 'https://ant-design-charts.antgroup.com',
     showChinaMirror: false,
     footerTheme: 'light', // 白色 底部主题
     githubUrl: repository.url,
@@ -127,7 +127,7 @@ export default defineConfig({
       },
     ],
     detail: {
-      engine:{
+      engine: {
         zh: 'AntV react',
         en: 'AntV react',
       },
diff --git a/site/examples/statistics/area/demo/area-difference.js b/site/examples/statistics/area/demo/area-difference.js
index 67b350544..81d8ab63a 100644
--- a/site/examples/statistics/area/demo/area-difference.js
+++ b/site/examples/statistics/area/demo/area-difference.js
@@ -21,7 +21,7 @@ const DemoArea = () => {
     colorField: 'city',
     shapeField: 'hvh',
     diff: true,
-    meta: {
+    scale: {
       color: { range: ['#67a9cf', '#ef8a62'] },
     },
     line: {
diff --git a/site/examples/statistics/area/demo/orderly-area.js b/site/examples/statistics/area/demo/orderly-area.js
index 8c6e25e04..202c0ebc5 100644
--- a/site/examples/statistics/area/demo/orderly-area.js
+++ b/site/examples/statistics/area/demo/orderly-area.js
@@ -12,9 +12,6 @@ const DemoArea = () => {
     yField: 'unemployed',
     colorField: 'industry',
     shapeField: 'smooth',
-    meta: {
-      x: { utc: true },
-    },
     axis: {
       x: { title: 'Date' },
       y: { labelFormatter: '~s' },
diff --git a/site/examples/statistics/area/demo/range-spline-area.js b/site/examples/statistics/area/demo/range-spline-area.js
index 88709b4d8..ed9bac337 100644
--- a/site/examples/statistics/area/demo/range-spline-area.js
+++ b/site/examples/statistics/area/demo/range-spline-area.js
@@ -25,7 +25,7 @@ const DemoArea = () => {
     axis: {
       y: { title: false },
     },
-    meta: {
+    scale: {
       x: { type: 'linear', tickCount: 10 },
     },
     point: {
diff --git a/site/examples/statistics/box/demo/box-tooltip.js b/site/examples/statistics/box/demo/box-tooltip.js
index 4423f0880..38c5eafda 100644
--- a/site/examples/statistics/box/demo/box-tooltip.js
+++ b/site/examples/statistics/box/demo/box-tooltip.js
@@ -4,30 +4,30 @@ import { Box } from '@ant-design/plots';
 
 const DemoBox = () => {
   const data = [
-    { x: 'Oceania', y: [ 1, 9, 16, 22, 24 ]},
-    { x: 'East Europe', y: [ 1, 5, 8, 12, 16 ]},
-    { x: 'Australia', y: [ 1, 8, 12, 19, 26 ]},
-    { x: 'South America', y: [ 2, 8, 12, 21, 28 ]},
-    { x: 'North Africa', y: [ 1, 8, 14, 18, 24 ]},
-    { x: 'North America', y: [ 3, 10, 17, 28, 30 ]},
-    { x: 'West Europe', y: [ 1, 7, 10, 17, 22 ]},
-    { x: 'West Africa', y: [ 1, 6, 8, 13, 16 ]},
+    { x: 'Oceania', y: [1, 9, 16, 22, 24] },
+    { x: 'East Europe', y: [1, 5, 8, 12, 16] },
+    { x: 'Australia', y: [1, 8, 12, 19, 26] },
+    { x: 'South America', y: [2, 8, 12, 21, 28] },
+    { x: 'North Africa', y: [1, 8, 14, 18, 24] },
+    { x: 'North America', y: [3, 10, 17, 28, 30] },
+    { x: 'West Europe', y: [1, 7, 10, 17, 22] },
+    { x: 'West Africa', y: [1, 6, 8, 13, 16] },
   ];
 
   const config = {
     data: {
-       value: data,
+      value: data,
     },
     xField: 'x',
     yField: 'y',
-    meta: { x: { paddingInner: 0.6, paddingOuter: 0.3 }, y: { zero: true } },
+    scale: { x: { paddingInner: 0.6, paddingOuter: 0.3 }, y: { zero: true } },
     tooltip: {
       items: [
-        { name: "最低值", channel: "y" },
-        { name: "下四分位数", channel: "y1" },
-        { name: "最低值", channel: "y2" },
-        { name: "上四分位数", channel: "y3" },
-        { name: "最高值", channel: "y4" },
+        { name: '最低值', channel: 'y' },
+        { name: '下四分位数', channel: 'y1' },
+        { name: '最低值', channel: 'y2' },
+        { name: '上四分位数', channel: 'y3' },
+        { name: '最高值', channel: 'y4' },
       ],
     },
   };
diff --git a/site/examples/statistics/box/demo/box.js b/site/examples/statistics/box/demo/box.js
index e7f96867e..4039f9dcc 100644
--- a/site/examples/statistics/box/demo/box.js
+++ b/site/examples/statistics/box/demo/box.js
@@ -4,14 +4,14 @@ import { Box } from '@ant-design/plots';
 
 const DemoBox = () => {
   const data = [
-    { x: 'Oceania', y: [ 1, 9, 16, 22, 24 ]},
-    { x: 'East Europe', y: [ 1, 5, 8, 12, 16 ]},
-    { x: 'Australia', y: [ 1, 8, 12, 19, 26 ]},
-    { x: 'South America', y: [ 2, 8, 12, 21, 28 ]},
-    { x: 'North Africa', y: [ 1, 8, 14, 18, 24 ]},
-    { x: 'North America', y: [ 3, 10, 17, 28, 30 ]},
-    { x: 'West Europe', y: [ 1, 7, 10, 17, 22 ]},
-    { x: 'West Africa', y: [ 1, 6, 8, 13, 16 ]},
+    { x: 'Oceania', y: [1, 9, 16, 22, 24] },
+    { x: 'East Europe', y: [1, 5, 8, 12, 16] },
+    { x: 'Australia', y: [1, 8, 12, 19, 26] },
+    { x: 'South America', y: [2, 8, 12, 21, 28] },
+    { x: 'North Africa', y: [1, 8, 14, 18, 24] },
+    { x: 'North America', y: [3, 10, 17, 28, 30] },
+    { x: 'West Europe', y: [1, 7, 10, 17, 22] },
+    { x: 'West Africa', y: [1, 6, 8, 13, 16] },
   ];
 
   const config = {
@@ -27,7 +27,7 @@ const DemoBox = () => {
     style: {
       stroke: 'black',
     },
-    meta: {
+    scale: {
       x: { paddingInner: 0.6, paddingOuter: 0.3 },
       y: { zero: true },
     },
diff --git a/site/examples/statistics/box/demo/grouped-box.js b/site/examples/statistics/box/demo/grouped-box.js
index dc23f62ec..5fc3caaa8 100644
--- a/site/examples/statistics/box/demo/grouped-box.js
+++ b/site/examples/statistics/box/demo/grouped-box.js
@@ -89,7 +89,7 @@ const DemoBox = () => {
     style: {
       stroke: 'black',
     },
-    meta: {
+    scale: {
       x: { paddingInner: 0.2, paddingOuter: 0.1 },
       y: { zero: true },
       series: { paddingInner: 0.3, paddingOuter: 0.1 },
diff --git a/site/examples/statistics/box/demo/polar-box.js b/site/examples/statistics/box/demo/polar-box.js
index 526a5b8cc..6cc908d8d 100644
--- a/site/examples/statistics/box/demo/polar-box.js
+++ b/site/examples/statistics/box/demo/polar-box.js
@@ -21,9 +21,9 @@ const DemoBox = () => {
     xField: 'x',
     yField: 'y',
     colorField: 'x',
-    meta: { x: { paddingInner: 0.6, paddingOuter: 0.3 }, y: { zero: true } },
-    coordinate: { type: "polar", innerRadius: 0.2 },
-    style: { stroke: "black" },
+    scale: { x: { paddingInner: 0.6, paddingOuter: 0.3 }, y: { zero: true } },
+    coordinate: { type: 'polar', innerRadius: 0.2 },
+    style: { stroke: 'black' },
     axis: { y: { tickCount: 5 } },
     legend: false,
   };
diff --git a/site/examples/statistics/column/demo/column-maxwidth.js b/site/examples/statistics/column/demo/column-maxwidth.js
index 0799203d3..4c3d18b31 100644
--- a/site/examples/statistics/column/demo/column-maxwidth.js
+++ b/site/examples/statistics/column/demo/column-maxwidth.js
@@ -7,7 +7,7 @@ const DemoColumn = () => {
     data: [{ letter: 'A', frequency: 120 }],
     xField: 'letter',
     yField: 'frequency',
-    meta: {
+    scale: {
       x: { padding: 0.5 },
     },
     style: {
diff --git a/site/examples/statistics/column/demo/region-annotation.js b/site/examples/statistics/column/demo/region-annotation.js
index 268063388..4267cd473 100644
--- a/site/examples/statistics/column/demo/region-annotation.js
+++ b/site/examples/statistics/column/demo/region-annotation.js
@@ -22,7 +22,7 @@ const DemoColumn = () => {
     data,
     xField: 'month',
     yField: 'value',
-    meta: {
+    scale: {
       y: {
         domainMax: 2000,
         domainMin: -1000,
diff --git a/site/examples/statistics/dual-axes/demo/basic.js b/site/examples/statistics/dual-axes/demo/basic.js
index 78988493a..aa6cfa49b 100644
--- a/site/examples/statistics/dual-axes/demo/basic.js
+++ b/site/examples/statistics/dual-axes/demo/basic.js
@@ -18,13 +18,6 @@ const DemoDualAxes = () => {
         type: 'interval',
         xField: 'time',
         yField: 'waiting',
-        axis: {
-          y: { title: 'Waiting', style: { titleFill: '#5B8FF9' } },
-        },
-        label: {
-          text: 'waiting',
-          position: 'inside',
-        },
       },
       {
         type: 'line',
@@ -35,10 +28,7 @@ const DemoDualAxes = () => {
           stroke: '#fdae6b',
           lineWidth: 2,
         },
-        label: {
-          text: 'people',
-        },
-        meta: {
+        scale: {
           y: {
             independent: true,
           },
@@ -46,11 +36,7 @@ const DemoDualAxes = () => {
         axis: {
           y: {
             position: 'right',
-            grid: null,
-            title: 'People',
-            style: {
-              titleFill: '#fdae6b',
-            },
+            // grid: null,
           },
         },
       },
diff --git a/site/examples/statistics/dual-axes/demo/column-line.js b/site/examples/statistics/dual-axes/demo/column-line.js
index 53313ac5a..287e3fa0f 100644
--- a/site/examples/statistics/dual-axes/demo/column-line.js
+++ b/site/examples/statistics/dual-axes/demo/column-line.js
@@ -14,7 +14,6 @@ const DemoDualAxes = () => {
   const config = {
     data,
     xField: 'time',
-    axis: { y: { title: null } },
     children: [
       {
         type: 'interval',
@@ -28,7 +27,7 @@ const DemoDualAxes = () => {
           stroke: '#5AD8A6',
           lineWidth: 2,
         },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         axis: { y: { position: 'right' } },
       },
     ],
diff --git a/site/examples/statistics/dual-axes/demo/column-multi-line.js b/site/examples/statistics/dual-axes/demo/column-multi-line.js
index c932d42aa..5931a638d 100644
--- a/site/examples/statistics/dual-axes/demo/column-multi-line.js
+++ b/site/examples/statistics/dual-axes/demo/column-multi-line.js
@@ -5,8 +5,8 @@ import ReactDOM from 'react-dom';
 const lineColor = {
   a: 'rgb(90, 216, 166)',
   b: 'rgb(93, 112, 146)',
-  c: 'rgb(246, 189, 22)'
-}
+  c: 'rgb(246, 189, 22)',
+};
 
 const DemoDualAxes = () => {
   const uvData = [
@@ -54,7 +54,7 @@ const DemoDualAxes = () => {
           lineWidth: 2,
           stroke: (d) => lineColor[d[0].name],
         },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         axis: { y: { position: 'right' } },
       },
     ],
diff --git a/site/examples/statistics/dual-axes/demo/custom-column-line.js b/site/examples/statistics/dual-axes/demo/custom-column-line.js
index 6ed947350..1c30bbd72 100644
--- a/site/examples/statistics/dual-axes/demo/custom-column-line.js
+++ b/site/examples/statistics/dual-axes/demo/custom-column-line.js
@@ -14,7 +14,6 @@ const DemoDualAxes = () => {
   const config = {
     data,
     xField: 'time',
-    axis: { y: { title: null } },
     children: [
       {
         type: 'interval',
@@ -23,7 +22,7 @@ const DemoDualAxes = () => {
         label: { position: 'inside' },
         interaction: {
           elementHighlight: true,
-          elementHighlightByColor: { background: true }
+          elementHighlightByColor: { background: true },
         },
       },
       {
@@ -34,14 +33,14 @@ const DemoDualAxes = () => {
           stroke: '#5AD8A6',
           lineWidth: 2,
         },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         axis: { y: { position: 'right' } },
         interaction: {
           tooltip: {
             crosshairs: false,
             marker: false,
-          }
-        }
+          },
+        },
       },
     ],
     annotations: [
diff --git a/site/examples/statistics/dual-axes/demo/custom-dual-line.js b/site/examples/statistics/dual-axes/demo/custom-dual-line.js
index 2cf0d5ff7..d340b1b9a 100644
--- a/site/examples/statistics/dual-axes/demo/custom-dual-line.js
+++ b/site/examples/statistics/dual-axes/demo/custom-dual-line.js
@@ -34,7 +34,7 @@ const DemoDualAxes = () => {
             textAnchor: 'middle',
           },
         },
-        meta: {
+        scale: {
           y: { independent: true },
         },
         axis: {
diff --git a/site/examples/statistics/dual-axes/demo/custom-grouped-column-line.js b/site/examples/statistics/dual-axes/demo/custom-grouped-column-line.js
index eb9791439..d36502128 100644
--- a/site/examples/statistics/dual-axes/demo/custom-grouped-column-line.js
+++ b/site/examples/statistics/dual-axes/demo/custom-grouped-column-line.js
@@ -1,4 +1,3 @@
-
 import { DualAxes } from '@ant-design/plots';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -43,7 +42,7 @@ const DemoDualAxes = () => {
         style: { maxWidth: 50 },
         label: { position: 'inside' },
         scale: { color: { range: ['#5B8FF9', '#5D7092'] } },
-        interaction: { elementHighlightByColor: { background: true, } },
+        interaction: { elementHighlightByColor: { background: true } },
       },
       {
         data: transformData,
@@ -53,14 +52,14 @@ const DemoDualAxes = () => {
           stroke: '#5AD8A6',
           lineWidth: 2,
         },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         axis: { y: { position: 'right' } },
         interaction: {
           tooltip: {
             crosshairs: false,
             marker: false,
-          }
-        }
+          },
+        },
       },
     ],
   };
diff --git a/site/examples/statistics/dual-axes/demo/custom-stacked-column-line.js b/site/examples/statistics/dual-axes/demo/custom-stacked-column-line.js
index 74007f905..640964804 100644
--- a/site/examples/statistics/dual-axes/demo/custom-stacked-column-line.js
+++ b/site/examples/statistics/dual-axes/demo/custom-stacked-column-line.js
@@ -30,10 +30,9 @@ const DemoDualAxes = () => {
       color: {
         itemMarker: 'round',
         itemMarkerSize: 14,
-        position: 'right'
+        position: 'right',
       },
     },
-    axis: { y: { title: null } },
     children: [
       {
         data: uvBillData,
@@ -43,10 +42,10 @@ const DemoDualAxes = () => {
         colorField: 'type',
         style: { maxWidth: 80 },
         label: { position: 'inside' },
-        meta: { y: { domainMax: 1200 } },
+        scale: { y: { domainMax: 1200 } },
         interaction: {
           elementHighlight: true,
-          elementHighlightByColor: { background: true }
+          elementHighlightByColor: { background: true },
         },
       },
       {
@@ -55,14 +54,14 @@ const DemoDualAxes = () => {
         yField: 'count',
         colorField: () => 'count',
         style: { lineWidth: 2 },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         axis: { y: { position: 'right' } },
         interaction: {
           tooltip: {
             crosshairs: false,
             marker: false,
-          }
-        }
+          },
+        },
       },
     ],
     theme: { category10: ['#F4A49E', '#FACDAA', '#EE7B91', '#E85285', '#BE408C', '#BE408C'] },
diff --git a/site/examples/statistics/dual-axes/demo/dual-aggregated-line-area.js b/site/examples/statistics/dual-axes/demo/dual-aggregated-line-area.js
index b3adfbfe2..2fc97615e 100644
--- a/site/examples/statistics/dual-axes/demo/dual-aggregated-line-area.js
+++ b/site/examples/statistics/dual-axes/demo/dual-aggregated-line-area.js
@@ -5,43 +5,43 @@ import ReactDOM from 'react-dom';
 const DemoDualAxes = () => {
   const config = {
     data: {
-      type: "fetch",
-      value: "https://assets.antv.antgroup.com/g2/weather.json",
-      transform: [{ type: "filter", callback: (d) => d.location === "Seattle" }],
+      type: 'fetch',
+      value: 'https://assets.antv.antgroup.com/g2/weather.json',
+      transform: [{ type: 'filter', callback: (d) => d.location === 'Seattle' }],
     },
     children: [
       {
-        type: "area",
+        type: 'area',
         xField: (d) => new Date(d.date).getUTCMonth(),
-        yField: ["temp_max", "temp_min"],
-        transform: [{ type: "groupX", y: "mean", y1: "mean" }],
-        meta: { y: { nice: true } },
-        style: { fill: "#85c5A6", fillOpacity: 0.3 },
-        axis: { y: { title: "Avg. Temperature (°C)", titleFill: "#85C5A6" } },
+        yField: ['temp_max', 'temp_min'],
+        transform: [{ type: 'groupX', y: 'mean', y1: 'mean' }],
+        scale: { y: { nice: true } },
+        style: { fill: '#85c5A6', fillOpacity: 0.3 },
+        axis: { y: { title: 'Avg. Temperature (°C)', titleFill: '#85C5A6' } },
         tooltip: {
           items: [
-            { channel: "y", valueFormatter: ".1f" },
-            { channel: "y1", valueFormatter: ".1f" },
+            { channel: 'y', valueFormatter: '.1f' },
+            { channel: 'y1', valueFormatter: '.1f' },
           ],
         },
       },
       {
-        type: "line",
+        type: 'line',
         xField: (d) => new Date(d.date).getMonth(),
         yField: 'precipitation',
         shapeField: 'smooth',
-        transform: [{ type: "groupX", y: "mean" }],
-        meta: { y: { independent: true } },
-        style: { stroke: "steelblue" },
+        transform: [{ type: 'groupX', y: 'mean' }],
+        scale: { y: { independent: true } },
+        style: { stroke: 'steelblue' },
         axis: {
           y: {
-            position: "right",
+            position: 'right',
             grid: null,
-            title: "Precipitation (inches)",
-            titleFill: "steelblue",
+            title: 'Precipitation (inches)',
+            titleFill: 'steelblue',
           },
         },
-        tooltip: { items: [{ channel: "y", valueFormatter: ".1f" }] },
+        tooltip: { items: [{ channel: 'y', valueFormatter: '.1f' }] },
       },
     ],
   };
diff --git a/site/examples/statistics/dual-axes/demo/dual-line.js b/site/examples/statistics/dual-axes/demo/dual-line.js
index d6d52a64b..dac7c9c4c 100644
--- a/site/examples/statistics/dual-axes/demo/dual-line.js
+++ b/site/examples/statistics/dual-axes/demo/dual-line.js
@@ -40,7 +40,7 @@ const DemoDualAxes = () => {
           stroke: '#5AD8A6',
           lineWidth: 2,
         },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         axis: {
           y: {
             position: 'right',
diff --git a/site/examples/statistics/dual-axes/demo/dual-step-line.js b/site/examples/statistics/dual-axes/demo/dual-step-line.js
index a4bea526d..9a70b5cfd 100644
--- a/site/examples/statistics/dual-axes/demo/dual-step-line.js
+++ b/site/examples/statistics/dual-axes/demo/dual-step-line.js
@@ -27,7 +27,7 @@ const DemoDualAxes = () => {
           stroke: '#29cae4',
           lineWidth: 2,
         },
-        meta: {
+        scale: {
           y: { independent: true },
         },
       },
diff --git a/site/examples/statistics/dual-axes/demo/grouped-column-line.js b/site/examples/statistics/dual-axes/demo/grouped-column-line.js
index c7cd6f66c..71aee3344 100644
--- a/site/examples/statistics/dual-axes/demo/grouped-column-line.js
+++ b/site/examples/statistics/dual-axes/demo/grouped-column-line.js
@@ -33,7 +33,7 @@ const DemoDualAxes = () => {
         yField: 'value',
         colorField: 'type',
         group: true,
-        interaction: { elementHighlightByColor: { background: true, } },
+        interaction: { elementHighlightByColor: { background: true } },
       },
       {
         data: transformData,
@@ -43,14 +43,14 @@ const DemoDualAxes = () => {
           stroke: '#5D7092',
           lineWidth: 2,
         },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         axis: { y: { position: 'right' } },
         interaction: {
           tooltip: {
             crosshairs: false,
             marker: false,
-          }
-        }
+          },
+        },
       },
     ],
   };
diff --git a/site/examples/statistics/dual-axes/demo/grouped-column-multi-line.js b/site/examples/statistics/dual-axes/demo/grouped-column-multi-line.js
index 47d6158d1..793d7fb23 100644
--- a/site/examples/statistics/dual-axes/demo/grouped-column-multi-line.js
+++ b/site/examples/statistics/dual-axes/demo/grouped-column-multi-line.js
@@ -44,7 +44,7 @@ const DemoDualAxes = () => {
         colorField: 'type',
         group: true,
         style: { maxWidth: 80 },
-        interaction: { elementHighlightByColor: { background: true, } },
+        interaction: { elementHighlightByColor: { background: true } },
       },
       {
         data: transformData,
@@ -52,14 +52,14 @@ const DemoDualAxes = () => {
         yField: 'count',
         colorField: 'name',
         style: { lineWidth: 2 },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         axis: { y: { position: 'right' } },
         interaction: {
           tooltip: {
             crosshairs: false,
             marker: false,
-          }
-        }
+          },
+        },
       },
     ],
   };
diff --git a/site/examples/statistics/dual-axes/demo/multi-line.js b/site/examples/statistics/dual-axes/demo/multi-line.js
index 56226682f..5c1d4ff3c 100644
--- a/site/examples/statistics/dual-axes/demo/multi-line.js
+++ b/site/examples/statistics/dual-axes/demo/multi-line.js
@@ -87,7 +87,7 @@ const DemoDualAxes = () => {
         yField: 'Temperature',
         shapeField: 'smooth',
         colorField: '#EE6666',
-        meta: {
+        scale: {
           y: { independent: true, domainMax: 30 },
         },
         axis: {
@@ -104,7 +104,7 @@ const DemoDualAxes = () => {
         type: 'interval',
         yField: 'Evaporation',
         colorField: '#5470C6',
-        meta: {
+        scale: {
           y: { independent: true, domainMax: 200 },
         },
         style: {
@@ -125,7 +125,7 @@ const DemoDualAxes = () => {
         yField: 'Precipitation',
         shapeField: 'smooth',
         colorField: '#91CC75',
-        meta: {
+        scale: {
           y: { independent: true },
         },
         style: {
diff --git a/site/examples/statistics/dual-axes/demo/pareto.js b/site/examples/statistics/dual-axes/demo/pareto.js
index 64a1bd727..fa86c4ddf 100644
--- a/site/examples/statistics/dual-axes/demo/pareto.js
+++ b/site/examples/statistics/dual-axes/demo/pareto.js
@@ -5,19 +5,19 @@ import ReactDOM from 'react-dom';
 const DemoDualAxes = () => {
   const config = {
     data: {
-      type: "inline",
+      type: 'inline',
       value: [
-        { x: "Parking Difficult", value: 95 },
-        { x: "Sales Rep was Rude", value: 60 },
-        { x: "Poor Lighting", value: 45 },
-        { x: "Layout Confusing", value: 37 },
-        { x: "Sizes Limited", value: 30 },
-        { x: "Clothing Faded", value: 27 },
-        { x: "Clothing Shrank", value: 18 },
+        { x: 'Parking Difficult', value: 95 },
+        { x: 'Sales Rep was Rude', value: 60 },
+        { x: 'Poor Lighting', value: 45 },
+        { x: 'Layout Confusing', value: 37 },
+        { x: 'Sizes Limited', value: 30 },
+        { x: 'Clothing Faded', value: 27 },
+        { x: 'Clothing Shrank', value: 18 },
       ],
       transform: [
         {
-          type: "custom",
+          type: 'custom',
           callback: (data) => {
             const sum = data.reduce((r, curr) => r + curr.value, 0);
             return data
@@ -41,46 +41,44 @@ const DemoDualAxes = () => {
     xField: 'x',
     children: [
       {
-        type: "interval",
+        type: 'interval',
         yField: 'value',
-        meta: { x: { padding: 0.5 }, y: { domainMax: 312, tickCount: 5 } },
-        style: { fill: (d) => (d.percentage < 0.1 ? "#E24B26" : "#78B3F0") },
-        axis: { x: { title: null }, y: { title: "Defect frequency" } },
+        scale: { x: { padding: 0.5 }, y: { domainMax: 312, tickCount: 5 } },
+        style: { fill: (d) => (d.percentage < 0.1 ? '#E24B26' : '#78B3F0') },
+        axis: { x: { title: null }, y: { title: 'Defect frequency' } },
         labels: [
           {
             text: (d) => `${(d.percentage * 100).toFixed(1)}%`,
-            textBaseline: "bottom",
+            textBaseline: 'bottom',
           },
         ],
       },
       {
-        type: "line",
+        type: 'line',
         yField: 'accumulate',
-        meta: { y: { independent: true, domainMin: 0, tickCount: 5 } },
+        scale: { y: { independent: true, domainMin: 0, tickCount: 5 } },
         axis: {
           y: {
-            position: "right",
-            title: "Cumulative Percentage",
+            position: 'right',
+            title: 'Cumulative Percentage',
             grid: null,
             labelFormatter: (d) => `${(d * 100).toFixed(0)}%`,
           },
         },
         tooltip: {
-          items: [
-            { channel: "y", valueFormatter: (d) => `${(d * 100).toFixed(2)}%` },
-          ],
+          items: [{ channel: 'y', valueFormatter: (d) => `${(d * 100).toFixed(2)}%` }],
         },
       },
       {
-        type: "point",
+        type: 'point',
         yField: 'accumulate',
         shapeField: 'diamond',
-        meta: { y: { independent: true, domainMin: 0 } },
+        scale: { y: { independent: true, domainMin: 0 } },
         axis: { y: null },
         tooltip: null,
       },
     ],
-    title: "Pareto Chart of Customer Complaints",
+    title: 'Pareto Chart of Customer Complaints',
   };
   return <DualAxes {...config} />;
 };
diff --git a/site/examples/statistics/dual-axes/demo/pattern-with-callback.js b/site/examples/statistics/dual-axes/demo/pattern-with-callback.js
index cf9dd1647..c6c77e346 100644
--- a/site/examples/statistics/dual-axes/demo/pattern-with-callback.js
+++ b/site/examples/statistics/dual-axes/demo/pattern-with-callback.js
@@ -1,4 +1,3 @@
-
 import { DualAxes } from '@ant-design/plots';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -42,7 +41,7 @@ const DemoDualAxes = () => {
         group: true,
         label: { position: 'inside' },
         scale: { color: { range: ['#5B8FF9', '#5D7092'] } },
-        interaction: { elementHighlightByColor: { background: true, } },
+        interaction: { elementHighlightByColor: { background: true } },
       },
       {
         data: transformData,
@@ -52,14 +51,14 @@ const DemoDualAxes = () => {
           stroke: '#5AD8A6',
           lineWidth: 2,
         },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         axis: { y: { position: 'right' } },
         interaction: {
           tooltip: {
             crosshairs: false,
             marker: false,
-          }
-        }
+          },
+        },
       },
     ],
   };
diff --git a/site/examples/statistics/dual-axes/demo/range-column-line.js b/site/examples/statistics/dual-axes/demo/range-column-line.js
index 9942067ed..0a6634437 100644
--- a/site/examples/statistics/dual-axes/demo/range-column-line.js
+++ b/site/examples/statistics/dual-axes/demo/range-column-line.js
@@ -4,11 +4,11 @@ import ReactDOM from 'react-dom';
 
 const DemoDualAxes = () => {
   const data = [
-    { time: '2019-03', value: [200, 350], count: 800, },
-    { time: '2019-04', value: [400, 650], count: 600, },
-    { time: '2019-05', value: [150, 350], count: 400, },
-    { time: '2019-06', value: [100, 450], count: 380, },
-    { time: '2019-07', value: [500, 550], count: 220, },
+    { time: '2019-03', value: [200, 350], count: 800 },
+    { time: '2019-04', value: [400, 650], count: 600 },
+    { time: '2019-05', value: [150, 350], count: 400 },
+    { time: '2019-06', value: [100, 450], count: 380 },
+    { time: '2019-07', value: [500, 550], count: 220 },
   ];
 
   const config = {
@@ -22,7 +22,6 @@ const DemoDualAxes = () => {
           stroke: '#5B8FF9',
           maxWidth: 100,
         },
-        axis: { y: { style: { titleFill: '#5B8FF9' }, }, },
       },
       {
         type: 'line',
@@ -31,7 +30,7 @@ const DemoDualAxes = () => {
           stroke: '#5AD8A6',
           lineWidth: 2,
         },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         axis: {
           y: {
             position: 'right',
diff --git a/site/examples/statistics/dual-axes/demo/slider-column-line.js b/site/examples/statistics/dual-axes/demo/slider-column-line.js
index 10197c15d..93cb8da65 100644
--- a/site/examples/statistics/dual-axes/demo/slider-column-line.js
+++ b/site/examples/statistics/dual-axes/demo/slider-column-line.js
@@ -4,36 +4,36 @@ import ReactDOM from 'react-dom';
 
 const DemoDualAxes = () => {
   const data = [
-    { time: '2020-08-20', consumeTime: 10868, completeTime: 649.483, },
-    { time: '2020-08-21', consumeTime: 8786, completeTime: 1053.7, },
-    { time: '2020-08-22', consumeTime: 10824, completeTime: 679.817, },
-    { time: '2020-08-23', consumeTime: 7860, completeTime: 638.117, },
-    { time: '2020-08-24', consumeTime: 13253, completeTime: 843.3, },
-    { time: '2020-08-25', consumeTime: 17015, completeTime: 1092.983, },
-    { time: '2020-08-26', consumeTime: 19298, completeTime: 1036.317, },
-    { time: '2020-08-27', consumeTime: 13937, completeTime: 1031.9, },
-    { time: '2020-08-28', consumeTime: 11541, completeTime: 803.467, },
-    { time: '2020-08-29', consumeTime: 15244, completeTime: 830.733, },
-    { time: '2020-08-30', consumeTime: 14247, completeTime: 709.867, },
-    { time: '2020-08-31', consumeTime: 9402, completeTime: 665.233, },
-    { time: '2020-09-01', consumeTime: 10440, completeTime: 696.367, },
-    { time: '2020-09-02', consumeTime: 9345, completeTime: 692.867, },
-    { time: '2020-09-03', consumeTime: 18459, completeTime: 936.017, },
-    { time: '2020-09-04', consumeTime: 9763, completeTime: 782.867, },
-    { time: '2020-09-05', consumeTime: 11074, completeTime: 653.8, },
-    { time: '2020-09-06', consumeTime: 11770, completeTime: 856.683, },
-    { time: '2020-09-07', consumeTime: 12206, completeTime: 777.15, },
-    { time: '2020-09-08', consumeTime: 11434, completeTime: 773.283, },
-    { time: '2020-09-09', consumeTime: 16218, completeTime: 833.3, },
-    { time: '2020-09-10', consumeTime: 11914, completeTime: 793.517, },
-    { time: '2020-09-11', consumeTime: 16781, completeTime: 894.45, },
-    { time: '2020-09-12', consumeTime: 10555, completeTime: 725.55, },
-    { time: '2020-09-13', consumeTime: 10899, completeTime: 709.967, },
-    { time: '2020-09-14', consumeTime: 10713, completeTime: 787.6, },
-    { time: '2020-09-15', consumeTime: 0, completeTime: 644.183, },
-    { time: '2020-09-16', consumeTime: 0, completeTime: 1066.65, },
-    { time: '2020-09-17', consumeTime: 20357, completeTime: 932.45, },
-    { time: '2020-09-18', consumeTime: 10424, completeTime: 753.583, },
+    { time: '2020-08-20', consumeTime: 10868, completeTime: 649.483 },
+    { time: '2020-08-21', consumeTime: 8786, completeTime: 1053.7 },
+    { time: '2020-08-22', consumeTime: 10824, completeTime: 679.817 },
+    { time: '2020-08-23', consumeTime: 7860, completeTime: 638.117 },
+    { time: '2020-08-24', consumeTime: 13253, completeTime: 843.3 },
+    { time: '2020-08-25', consumeTime: 17015, completeTime: 1092.983 },
+    { time: '2020-08-26', consumeTime: 19298, completeTime: 1036.317 },
+    { time: '2020-08-27', consumeTime: 13937, completeTime: 1031.9 },
+    { time: '2020-08-28', consumeTime: 11541, completeTime: 803.467 },
+    { time: '2020-08-29', consumeTime: 15244, completeTime: 830.733 },
+    { time: '2020-08-30', consumeTime: 14247, completeTime: 709.867 },
+    { time: '2020-08-31', consumeTime: 9402, completeTime: 665.233 },
+    { time: '2020-09-01', consumeTime: 10440, completeTime: 696.367 },
+    { time: '2020-09-02', consumeTime: 9345, completeTime: 692.867 },
+    { time: '2020-09-03', consumeTime: 18459, completeTime: 936.017 },
+    { time: '2020-09-04', consumeTime: 9763, completeTime: 782.867 },
+    { time: '2020-09-05', consumeTime: 11074, completeTime: 653.8 },
+    { time: '2020-09-06', consumeTime: 11770, completeTime: 856.683 },
+    { time: '2020-09-07', consumeTime: 12206, completeTime: 777.15 },
+    { time: '2020-09-08', consumeTime: 11434, completeTime: 773.283 },
+    { time: '2020-09-09', consumeTime: 16218, completeTime: 833.3 },
+    { time: '2020-09-10', consumeTime: 11914, completeTime: 793.517 },
+    { time: '2020-09-11', consumeTime: 16781, completeTime: 894.45 },
+    { time: '2020-09-12', consumeTime: 10555, completeTime: 725.55 },
+    { time: '2020-09-13', consumeTime: 10899, completeTime: 709.967 },
+    { time: '2020-09-14', consumeTime: 10713, completeTime: 787.6 },
+    { time: '2020-09-15', consumeTime: 0, completeTime: 644.183 },
+    { time: '2020-09-16', consumeTime: 0, completeTime: 1066.65 },
+    { time: '2020-09-17', consumeTime: 20357, completeTime: 932.45 },
+    { time: '2020-09-18', consumeTime: 10424, completeTime: 753.583 },
   ];
 
   const config = {
@@ -51,7 +51,7 @@ const DemoDualAxes = () => {
         type: 'line',
         yField: 'completeTime',
         style: { stroke: '#5AD8A6', lineWidth: 2 },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         axis: { y: { position: 'right' } },
       },
     ],
diff --git a/site/examples/statistics/dual-axes/demo/stacked-column-line.js b/site/examples/statistics/dual-axes/demo/stacked-column-line.js
index 1f7750438..7c87965ca 100644
--- a/site/examples/statistics/dual-axes/demo/stacked-column-line.js
+++ b/site/examples/statistics/dual-axes/demo/stacked-column-line.js
@@ -26,7 +26,6 @@ const DemoDualAxes = () => {
 
   const config = {
     xField: 'time',
-    axis: { y: { title: null } },
     children: [
       {
         data: uvBillData,
@@ -35,8 +34,8 @@ const DemoDualAxes = () => {
         stack: true,
         colorField: 'type',
         style: { maxWidth: 80 },
-        meta: { y: { domainMax: 1200 } },
-        interaction: { elementHighlightByColor: { background: true, } },
+        scale: { y: { domainMax: 1200 } },
+        interaction: { elementHighlightByColor: { background: true } },
       },
       {
         data: transformData,
@@ -45,13 +44,13 @@ const DemoDualAxes = () => {
         colorField: () => 'count',
         style: { lineWidth: 2 },
         axis: { y: { position: 'right' } },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         interaction: {
           tooltip: {
             crosshairs: false,
             marker: false,
-          }
-        }
+          },
+        },
       },
     ],
   };
diff --git a/site/examples/statistics/dual-axes/demo/stacked-column-multi-line.js b/site/examples/statistics/dual-axes/demo/stacked-column-multi-line.js
index 619345174..0f0631062 100644
--- a/site/examples/statistics/dual-axes/demo/stacked-column-multi-line.js
+++ b/site/examples/statistics/dual-axes/demo/stacked-column-multi-line.js
@@ -36,7 +36,6 @@ const DemoDualAxes = () => {
 
   const config = {
     xField: 'time',
-    axis: { y: { title: null } },
     interaction: { tooltip: { sort: (d) => ['uv', 'bill', 'a', 'b', 'c'].indexOf(d.name) } },
     children: [
       {
@@ -46,8 +45,8 @@ const DemoDualAxes = () => {
         colorField: 'type',
         stack: true,
         style: { maxWidth: 80 },
-        meta: { y: { domainMax: 1200 } },
-        interaction: { elementHighlightByColor: { background: true, } },
+        scale: { y: { domainMax: 1200 } },
+        interaction: { elementHighlightByColor: { background: true } },
       },
       {
         data: transformData,
@@ -58,24 +57,24 @@ const DemoDualAxes = () => {
           lineWidth: 2,
           opacity: (d) => {
             if (d[0].name === 'a') {
-              return 1
+              return 1;
             }
-            return 0.5
+            return 0.5;
           },
           lineDash: (d) => {
             if (d[0].name === 'a') {
-              return [1, 4]
+              return [1, 4];
             }
           },
         },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         axis: { y: { position: 'right' } },
         interaction: {
           tooltip: {
             crosshairs: false,
             marker: false,
-          }
-        }
+          },
+        },
       },
     ],
   };
diff --git a/site/examples/statistics/dual-axes/demo/stacked-percent-column-line.js b/site/examples/statistics/dual-axes/demo/stacked-percent-column-line.js
index a9119dfea..592e8f53e 100644
--- a/site/examples/statistics/dual-axes/demo/stacked-percent-column-line.js
+++ b/site/examples/statistics/dual-axes/demo/stacked-percent-column-line.js
@@ -37,7 +37,7 @@ const DemoDualAxes = () => {
         style: { maxWidth: 80 },
         tooltip: { channel: 'y0', valueFormatter: '.0%' },
         axis: { y: { title: 'value', style: { titleFill: '#5B8FF9' } } },
-        interaction: { elementHighlightByColor: { background: true, } },
+        interaction: { elementHighlightByColor: { background: true } },
       },
       {
         data: transformData,
@@ -45,7 +45,7 @@ const DemoDualAxes = () => {
         yField: 'count',
         colorField: () => 'count',
         style: { lineWidth: 2 },
-        meta: { y: { independent: true } },
+        scale: { y: { independent: true } },
         axis: {
           y: {
             position: 'right',
@@ -56,8 +56,8 @@ const DemoDualAxes = () => {
           tooltip: {
             crosshairs: false,
             marker: false,
-          }
-        }
+          },
+        },
       },
     ],
   };
diff --git a/site/examples/statistics/gauge/demo/gauge-color.js b/site/examples/statistics/gauge/demo/gauge-color.js
index 842a741b0..86b0d8b0c 100644
--- a/site/examples/statistics/gauge/demo/gauge-color.js
+++ b/site/examples/statistics/gauge/demo/gauge-color.js
@@ -8,20 +8,20 @@ const DemoGauge = () => {
     height: 720,
     autoFit: true,
     data: {
-        target: 159,
-        total: 400,
-        name: 'score',
-        thresholds: [100, 200, 400],
+      target: 159,
+      total: 400,
+      name: 'score',
+      thresholds: [100, 200, 400],
     },
     legend: false,
-    meta: {
+    scale: {
       color: {
-        range: ['#F4664A', '#FAAD14', 'green']
+        range: ['#F4664A', '#FAAD14', 'green'],
       },
     },
     style: {
-      textContent:(target, total) => `得分：${target}\n占比：${(target / total) * 100}%`,
-    }
+      textContent: (target, total) => `得分：${target}\n占比：${(target / total) * 100}%`,
+    },
   };
   return <Gauge {...config} />;
 };
diff --git a/site/examples/statistics/histogram/demo/binWidth.js b/site/examples/statistics/histogram/demo/binWidth.js
index cd57558c9..8318a46bf 100644
--- a/site/examples/statistics/histogram/demo/binWidth.js
+++ b/site/examples/statistics/histogram/demo/binWidth.js
@@ -68,7 +68,7 @@ const DemoHistogram = () => {
     binField: 'value',
     channel: 'count',
     binWidth: 4,
-    meta: {
+    scale: {
       x: { domainMin: 0, tickCount: 10 },
       y: {
         domainMax: 15,
diff --git a/site/examples/statistics/line/demo/basic.js b/site/examples/statistics/line/demo/basic.js
index 1ecde7310..ec475abc2 100644
--- a/site/examples/statistics/line/demo/basic.js
+++ b/site/examples/statistics/line/demo/basic.js
@@ -3,40 +3,33 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 const DemoLine = () => {
+  const data = [
+    { year: '1991', value: 3 },
+    { year: '1992', value: 4 },
+    { year: '1993', value: 3.5 },
+    { year: '1994', value: 5 },
+    { year: '1995', value: 4.9 },
+    { year: '1996', value: 6 },
+    { year: '1997', value: 7 },
+    { year: '1998', value: 9 },
+    { year: '1999', value: 13 },
+  ];
   const config = {
-    data: {
-      type: 'fetch',
-      value: 'https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json',
+    data,
+    xField: 'year',
+    yField: 'value',
+    point: {
+      shapeField: 'square',
+      sizeField: 4,
+    },
+    interaction: {
+      tooltip: {
+        marker: false,
+      },
     },
-    xField: 'Date',
-    yField: 'scales',
-    shapeField: 'smooth',
     style: {
       lineWidth: 2,
     },
-    annotations: [
-      {
-        type: 'text',
-        data: ['2014-03', 1834],
-        style: {
-          text: '2014-03, 受比特币影响，blockchain 1834',
-          wordWrap: true,
-          wordWrapWidth: 164,
-          dx: -174,
-          dy: 30,
-          fill: '#2C3542',
-          fillOpacity: 0.65,
-          fontSize: 10,
-          background: true,
-          backgroundRadius: 2,
-          connector: true,
-          startMarker: true,
-          startMarkerFill: '#2C3542',
-          startMarkerFillOpacity: 0.65,
-        },
-        tooltip: false,
-      },
-    ],
   };
   return <Line {...config} />;
 };
diff --git a/site/examples/statistics/line/demo/color.js b/site/examples/statistics/line/demo/color.js
index 12353236f..64b5eec70 100644
--- a/site/examples/statistics/line/demo/color.js
+++ b/site/examples/statistics/line/demo/color.js
@@ -11,13 +11,12 @@ const DemoLine = () => {
     xField: (d) => new Date(d.date),
     yField: 'value',
     colorField: 'condition',
-    seriesField: () => 'a',
     shapeField: 'hvh',
     style: {
       gradient: 'x',
       lineWidth: 2,
     },
-    meta: {
+    scale: {
       y: { nice: true },
       color: {
         domain: ['CLR', 'FEW', 'SCT', 'BKN', 'OVC', 'VV '],
diff --git a/site/examples/statistics/line/demo/line-threshold.js b/site/examples/statistics/line/demo/line-threshold.js
index 002f4db81..7422c8ebb 100644
--- a/site/examples/statistics/line/demo/line-threshold.js
+++ b/site/examples/statistics/line/demo/line-threshold.js
@@ -20,7 +20,7 @@ const DemoLine = () => {
       lineWidth: 1.5,
       lineJoin: 'round',
     },
-    meta: {
+    scale: {
       x: { utc: true },
       y: { nice: true },
       color: { type: 'threshold', domain: [55], range: ['black', 'red'] },
diff --git a/site/examples/statistics/line/demo/line-var-size.js b/site/examples/statistics/line/demo/line-var-size.js
index 88b25d239..79c79a3ca 100644
--- a/site/examples/statistics/line/demo/line-var-size.js
+++ b/site/examples/statistics/line/demo/line-var-size.js
@@ -8,10 +8,9 @@ const DemoLine = () => {
       type: 'fetch',
       value: 'https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json',
     },
-    xField: 'year',
+    xField: (d) => new Date(d.year),
     yField: 'value',
     sizeField: 'value',
-    stack: true,
     shapeField: 'trail',
     legend: { size: false },
     colorField: 'category',
diff --git a/site/examples/statistics/line/demo/meta.json b/site/examples/statistics/line/demo/meta.json
index 69194fcff..e00061cdb 100644
--- a/site/examples/statistics/line/demo/meta.json
+++ b/site/examples/statistics/line/demo/meta.json
@@ -10,7 +10,7 @@
         "zh": "基础折线图",
         "en": "Basic line plot"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*N1NWR7N-BDsAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EH-dTLnE4bcAAAAAAAAAAAAADmJ7AQ/original"
     },
     {
       "filename": "line-var-size.js",
diff --git a/site/examples/statistics/line/demo/normalize.js b/site/examples/statistics/line/demo/normalize.js
index 26cc1037f..9fcd8c1dd 100644
--- a/site/examples/statistics/line/demo/normalize.js
+++ b/site/examples/statistics/line/demo/normalize.js
@@ -12,7 +12,7 @@ const DemoLine = () => {
     yField: 'Close',
     colorField: 'Symbol',
     normalize: { basis: 'first', groupBy: 'color' },
-    meta: {
+    scale: {
       y: { type: 'log' },
     },
     axis: {
diff --git a/site/examples/statistics/pie/demo/quarter-circle.js b/site/examples/statistics/pie/demo/quarter-circle.js
index 0a810f994..cea7e0763 100644
--- a/site/examples/statistics/pie/demo/quarter-circle.js
+++ b/site/examples/statistics/pie/demo/quarter-circle.js
@@ -12,7 +12,6 @@ const DemoPie = () => {
       { type: '分类五', value: 10 },
       { type: '其他', value: 5 },
     ],
-    appendPadding: 10,
     angleField: 'value',
     colorField: 'type',
     startAngle: Math.PI,
diff --git a/site/examples/statistics/pie/demo/spider-label.js b/site/examples/statistics/pie/demo/spider-label.js
index 70809ea49..cf234b122 100644
--- a/site/examples/statistics/pie/demo/spider-label.js
+++ b/site/examples/statistics/pie/demo/spider-label.js
@@ -15,16 +15,10 @@ const DemoPie = () => {
     data,
     angleField: 'value',
     colorField: 'type',
-    inset: 5,
-    paddingRight: 80,
+    radius: 0.8,
     label: {
       text: (d) => `${d.type}\n ${d.value}`,
       position: 'spider',
-      transform: [
-        {
-          type: 'overlapDodgeY',
-        },
-      ],
     },
     legend: {
       color: {
diff --git a/site/examples/statistics/radar/demo/area-radial.js b/site/examples/statistics/radar/demo/area-radial.js
index 4a16d6adf..895d46f85 100644
--- a/site/examples/statistics/radar/demo/area-radial.js
+++ b/site/examples/statistics/radar/demo/area-radial.js
@@ -22,33 +22,32 @@ const DemoRadar = () => {
     },
     xField: 'date',
     yField: 'avg',
-    meta: { x: { utc: true } },
-    style: { stroke: "steelblue", strokeWidth: 1.5 },
-    tooltip: { items: [{ channel: "y", valueFormatter: ".1f" }] },
+    scale: { x: { utc: true } },
+    style: { stroke: 'steelblue', strokeWidth: 1.5 },
+    tooltip: { items: [{ channel: 'y', valueFormatter: '.1f' }] },
     innerRadius: 0.4,
     axis: {
       y: {
         zIndex: 1,
-        direction: "center",
+        direction: 'center',
         title: null,
-        labelFormatter: (d, i, array) =>
-          i === array.length - 1 ? `${d}°F` : `${d}`,
-        style: { labelStroke: "#fff", labelStrokeWidth: 5 },
+        labelFormatter: (d, i, array) => (i === array.length - 1 ? `${d}°F` : `${d}`),
+        style: { labelStroke: '#fff', labelStrokeWidth: 5 },
       },
-      x: { grid: true, position: "inner" },
+      x: { grid: true, position: 'inner' },
     },
     annotations: [
       {
-        type: "area",
-        xField: "date",
-        yField: ["minmin", "maxmax"],
-        style: { fill: "lightsteelblue", fillOpacity: 0.2 },
+        type: 'area',
+        xField: 'date',
+        yField: ['minmin', 'maxmax'],
+        style: { fill: 'lightsteelblue', fillOpacity: 0.2 },
       },
       {
-        type: "area",
-        xField: "date",
-        yField: ["min", "max"],
-        style: { fill: "steelblue", fillOpacity: 0.2 },
+        type: 'area',
+        xField: 'date',
+        yField: ['min', 'max'],
+        style: { fill: 'steelblue', fillOpacity: 0.2 },
       },
     ],
   };
diff --git a/site/examples/statistics/radar/demo/basic.js b/site/examples/statistics/radar/demo/basic.js
index 6076e5e84..5d371c5e4 100644
--- a/site/examples/statistics/radar/demo/basic.js
+++ b/site/examples/statistics/radar/demo/basic.js
@@ -20,16 +20,16 @@ const DemoRadar = () => {
     area: {
       style: {
         fillOpacity: 0.2,
-      }
+      },
     },
-    meta: {
+    scale: {
       x: {
         padding: 0.5,
         align: 0,
       },
       y: {
         nice: true,
-      }
+      },
     },
     axis: {
       x: {
diff --git a/site/examples/statistics/radar/demo/parallel-radar.js b/site/examples/statistics/radar/demo/parallel-radar.js
index eee0b2335..325bdd018 100644
--- a/site/examples/statistics/radar/demo/parallel-radar.js
+++ b/site/examples/statistics/radar/demo/parallel-radar.js
@@ -28,13 +28,13 @@ const DemoRadar = () => {
     colorField: 'weight (lb)',
     coordinateType: 'radar',
     positionField: [
-      "economy (mpg)",
-      "cylinders",
-      "displacement (cc)",
-      "power (hp)",
-      "weight (lb)",
-      "0-60 mph (s)",
-      "year",
+      'economy (mpg)',
+      'cylinders',
+      'displacement (cc)',
+      'power (hp)',
+      'weight (lb)',
+      '0-60 mph (s)',
+      'year',
     ],
     axis: {
       position: axis,
@@ -48,15 +48,15 @@ const DemoRadar = () => {
     },
     legend: {
       color: {
-        position: "bottom",
-        labelFormatter: "~s",
+        position: 'bottom',
+        labelFormatter: '~s',
         length: 200,
-        layout: { justifyContent: "center" },
+        layout: { justifyContent: 'center' },
       },
     },
     style: { strokeWidth: 1.5, strokeOpacity: 0.4 },
     interaction: { tooltip: { series: false } },
-    meta: { color: { palette: "brBG", offset: (t) => 1 - t } },
+    scale: { color: { palette: 'brBG', offset: (t) => 1 - t } },
   };
   return <Radar {...config} />;
 };
diff --git a/site/examples/statistics/radar/demo/radar.js b/site/examples/statistics/radar/demo/radar.js
index 96f20b469..7cc6c79b6 100644
--- a/site/examples/statistics/radar/demo/radar.js
+++ b/site/examples/statistics/radar/demo/radar.js
@@ -37,7 +37,7 @@ const DemoRadar = () => {
         fillOpacity: 0.5,
       },
     },
-    meta: { x: { padding: 0.5, align: 0 }, y: { tickCount: 5, domainMax: 80 } },
+    scale: { x: { padding: 0.5, align: 0 }, y: { tickCount: 5, domainMax: 80 } },
     axis: { x: { grid: true }, y: { zIndex: 1, title: false } },
     interaction: { tooltip: { style: { crosshairsLineDash: [4, 4] } } },
     style: {
diff --git a/site/examples/statistics/radial-bar/demo/round-corner.js b/site/examples/statistics/radial-bar/demo/round-corner.js
index 37cbff543..0089e8392 100644
--- a/site/examples/statistics/radial-bar/demo/round-corner.js
+++ b/site/examples/statistics/radial-bar/demo/round-corner.js
@@ -2,7 +2,6 @@ import { RadialBar } from '@ant-design/plots';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-
 const data = [
   { name: 'X6', star: 297 },
   { name: 'G', star: 506 },
@@ -19,13 +18,13 @@ const DemoRadialBar = () => {
     data,
     xField: 'name',
     yField: 'star',
-    maxAngle: 90, 
+    maxAngle: 90,
     radius: 1,
     innerRadius: 0.2,
     style: {
-      radius:26, // 圆角
+      radius: 26, // 圆角
     },
-    meta: {
+    scale: {
       y: { nice: true },
     },
   };
diff --git a/site/examples/statistics/rose/demo/rose-label.js b/site/examples/statistics/rose/demo/rose-label.js
index c06629d0d..179905379 100644
--- a/site/examples/statistics/rose/demo/rose-label.js
+++ b/site/examples/statistics/rose/demo/rose-label.js
@@ -9,26 +9,25 @@ const DemoRose = () => {
     autoFit: false,
     radius: 0.85,
     data: {
-      type: "fetch",
-      value:
-        "https://render.alipay.com/p/yuyan/180020010001215413/antd-charts/rose-rose-label.json",
+      type: 'fetch',
+      value: 'https://render.alipay.com/p/yuyan/180020010001215413/antd-charts/rose-rose-label.json',
     },
     xField: 'year',
     yField: 'people',
     colorField: 'year',
-    transform: [{ type: "groupX", y: "sum" }],
-    meta: { y: { type: "sqrt" }, x: { padding: 0 } },
+    transform: [{ type: 'groupX', y: 'sum' }],
+    scale: { y: { type: 'sqrt' }, x: { padding: 0 } },
     axis: false,
-    legend: { color: { length: 400, layout: { justifyContent: "center" } } },
+    legend: { color: { length: 400, layout: { justifyContent: 'center' } } },
     labels: [
       {
-        text: "people",
-        position: "outside",
-        formatter: "~s",
-        transform: [{ type: "overlapDodgeY" }],
+        text: 'people',
+        position: 'outside',
+        formatter: '~s',
+        transform: [{ type: 'overlapDodgeY' }],
       },
     ],
-    tooltip: { items: [{ channel: "y", valueFormatter: "~s" }] },
+    tooltip: { items: [{ channel: 'y', valueFormatter: '~s' }] },
   };
   return <Rose {...config} />;
 };
diff --git a/site/examples/statistics/rose/demo/rose.js b/site/examples/statistics/rose/demo/rose.js
index 3a9efe6d8..3aa9d38a0 100644
--- a/site/examples/statistics/rose/demo/rose.js
+++ b/site/examples/statistics/rose/demo/rose.js
@@ -8,24 +8,23 @@ const DemoRose = () => {
     height: 720,
     autoFit: false,
     data: {
-      type: "fetch",
-      value:
-        "https://render.alipay.com/p/yuyan/180020010001215413/antd-charts/rose-rose.json",
+      type: 'fetch',
+      value: 'https://render.alipay.com/p/yuyan/180020010001215413/antd-charts/rose-rose.json',
     },
     xField: 'year',
     yField: 'people',
-    meta: { y: { type: "sqrt" } },
-    transform: [{ type: "groupX", y: "sum" }],
+    scale: { y: { type: 'sqrt' } },
+    transform: [{ type: 'groupX', y: 'sum' }],
     axis: {
       y: {
         title: 'sum of people',
-        labelFormatter: "~s",
+        labelFormatter: '~s',
         tickCount: 5,
         tickFilter: (d, i) => i !== 0,
-        direction: "right",
+        direction: 'right',
       },
     },
-    tooltip: { items: [{ channel: "y", valueFormatter: "~s" }] },
+    tooltip: { items: [{ channel: 'y', valueFormatter: '~s' }] },
   };
   return <Rose {...config} />;
 };
diff --git a/site/examples/statistics/rose/demo/stacked-rose.js b/site/examples/statistics/rose/demo/stacked-rose.js
index 5cd4b2fd9..9d52f1451 100644
--- a/site/examples/statistics/rose/demo/stacked-rose.js
+++ b/site/examples/statistics/rose/demo/stacked-rose.js
@@ -3,16 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 const DemoRose = () => {
-
-  const colors = [
-    '#98abc5',
-    '#8a89a6',
-    '#7b6888',
-    '#6b486b',
-    '#a05d56',
-    '#d0743c',
-    '#ff8c00',
-  ];
+  const colors = ['#98abc5', '#8a89a6', '#7b6888', '#6b486b', '#a05d56', '#d0743c', '#ff8c00'];
 
   const config = {
     width: 800,
@@ -20,23 +11,22 @@ const DemoRose = () => {
     autoFit: false,
     innerRadius: 0.4,
     data: {
-      type: "fetch",
-      value:
-      "https://render.alipay.com/p/yuyan/180020010001215413/antd-charts/rose-stacked-rose.json",
+      type: 'fetch',
+      value: 'https://render.alipay.com/p/yuyan/180020010001215413/antd-charts/rose-stacked-rose.json',
       transform: [
         {
-          type: "fold",
+          type: 'fold',
           fields: [
-            "Under 5 Years",
-            "5 to 13 Years",
-            "14 to 17 Years",
-            "18 to 24 Years",
-            "25 to 44 Years",
-            "45 to 64 Years",
-            "65 Years and Over",
+            'Under 5 Years',
+            '5 to 13 Years',
+            '14 to 17 Years',
+            '18 to 24 Years',
+            '25 to 44 Years',
+            '45 to 64 Years',
+            '65 Years and Over',
           ],
-          key: "Age",
-          value: "Population",
+          key: 'Age',
+          value: 'Population',
         },
       ],
     },
@@ -44,21 +34,21 @@ const DemoRose = () => {
     yField: 'Population',
     colorField: 'Age',
     stack: true,
-    meta: {
-      y: { type: "sqrt" },
+    scale: {
+      y: { type: 'sqrt' },
       color: {
         range: colors,
       },
     },
     axis: {
-      x: { position: "inner" },
+      x: { position: 'inner' },
       y: {
-        labelFormatter: "~s",
+        labelFormatter: '~s',
         tickFilter: (_, i) => i !== 0,
-        direction: "center",
+        direction: 'center',
       },
     },
-    legend: { color: { position: "center", display: "grid", gridCol: 1 } },
+    legend: { color: { position: 'center', display: 'grid', gridCol: 1 } },
   };
   return <Rose {...config} />;
 };
diff --git a/site/examples/statistics/scatter/demo/point-aggregated.js b/site/examples/statistics/scatter/demo/point-aggregated.js
index ea4ed0bca..afa63f746 100644
--- a/site/examples/statistics/scatter/demo/point-aggregated.js
+++ b/site/examples/statistics/scatter/demo/point-aggregated.js
@@ -8,20 +8,19 @@ const DemoScatter = () => {
     height: 240,
     inset: 10,
     data: {
-      type: "fetch",
-      value: "https://assets.antv.antgroup.com/g2/commits.json",
+      type: 'fetch',
+      value: 'https://assets.antv.antgroup.com/g2/commits.json',
     },
-    style: { mainStroke: "black" },
     xField: (d) => new Date(d.time).getUTCHours(),
     yField: (d) => new Date(d.time).getUTCDay(),
-    sizeField: "count",
-    colorField: "count",
-    shapeField: "point",
-    transform: [{ type: "group", size: "sum" }, { type: "sortY" }],
-    meta: { y: { type: "point" } },
+    sizeField: 'count',
+    colorField: 'count',
+    shapeField: 'point',
+    transform: [{ type: 'group', size: 'sum' }, { type: 'sortY' }],
+    scale: { y: { type: 'point' } },
     axis: {
-      x: { title: "time (hours)", tickCount: 24 },
-      y: { title: "time (day)", grid: true },
+      x: { title: 'time (hours)', tickCount: 24 },
+      y: { title: 'time (day)', grid: true },
     },
   };
   return <Scatter {...config} />;
diff --git a/site/examples/statistics/scatter/demo/point-dot.js b/site/examples/statistics/scatter/demo/point-dot.js
index cedbaedb5..234f9c677 100644
--- a/site/examples/statistics/scatter/demo/point-dot.js
+++ b/site/examples/statistics/scatter/demo/point-dot.js
@@ -5,29 +5,28 @@ import ReactDOM from 'react-dom';
 const DemoScatter = () => {
   const config = {
     data: {
-      type: "fetch",
-      value:
-        "https://render.alipay.com/p/yuyan/180020010001215413/antd-charts/scatter-point-dot.json",
+      type: 'fetch',
+      value: 'https://render.alipay.com/p/yuyan/180020010001215413/antd-charts/scatter-point-dot.json',
     },
     width: 800,
     height: 1200,
     autoFit: false,
-    coordinate: { transform: [{ type: "transpose" }] },
+    coordinate: { transform: [{ type: 'transpose' }] },
     interaction: { tooltip: { shared: true } },
     xField: 'state',
     yField: 'population',
     colorField: 'age',
-    shapeField: "point",
-    meta: { color: { palette: "spectral" } },
-    tooltip: { title: "state", items: ["population"] },
+    shapeField: 'point',
+    scale: { color: { palette: 'spectral' } },
+    tooltip: { title: 'state', items: ['population'] },
     annotations: [
       {
-        type: "link",
-        xField: "state",
-        yField: "population",
-        transform: [{ type: "groupX", y: "min", y1: "max" }],
-        meta: { y: { labelFormatter: ".0%" } },
-        style: { stroke: "#000" },
+        type: 'link',
+        xField: 'state',
+        yField: 'population',
+        transform: [{ type: 'groupX', y: 'min', y1: 'max' }],
+        scale: { y: { labelFormatter: '.0%' } },
+        style: { stroke: '#000' },
         tooltip: false,
       },
     ],
diff --git a/site/examples/statistics/scatter/demo/point-label.js b/site/examples/statistics/scatter/demo/point-label.js
index fd633c3aa..23dd89726 100644
--- a/site/examples/statistics/scatter/demo/point-label.js
+++ b/site/examples/statistics/scatter/demo/point-label.js
@@ -5,18 +5,17 @@ import ReactDOM from 'react-dom';
 const DemoScatter = () => {
   const config = {
     data: {
-      type: "fetch",
-      value:
-        "https://render.alipay.com/p/yuyan/180020010001215413/antd-charts/scatter-point-label.json",
+      type: 'fetch',
+      value: 'https://render.alipay.com/p/yuyan/180020010001215413/antd-charts/scatter-point-label.json',
     },
     xField: 'mpg',
     yField: 'hp',
     colorField: 'steelblue',
-    meta: {
+    scale: {
       x: { nice: true, domainMax: 38 },
       y: { nice: true },
     },
-    label: { 
+    label: {
       text: 'name',
       style: {
         stroke: '#fff',
diff --git a/site/examples/statistics/scatter/demo/point-log.js b/site/examples/statistics/scatter/demo/point-log.js
index c621bcb84..01242c120 100644
--- a/site/examples/statistics/scatter/demo/point-log.js
+++ b/site/examples/statistics/scatter/demo/point-log.js
@@ -5,17 +5,16 @@ import ReactDOM from 'react-dom';
 const DemoScatter = () => {
   const config = {
     data: {
-      type: "fetch",
-      value:
-        "https://gw.alipayobjects.com/os/antvdemo/assets/data/bubble.json",
+      type: 'fetch',
+      value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/bubble.json',
     },
     xField: 'GDP',
     yField: 'LifeExpectancy',
     sizeField: 'Population',
     colorField: 'continent',
     shapeField: 'point',
-    meta: {
-      size: { type: "log", range: [4, 20] },
+    scale: {
+      size: { type: 'log', range: [4, 20] },
     },
     style: { fillOpacity: 0.3, lineWidth: 1 },
   };
diff --git a/site/examples/statistics/scatter/demo/point-sequential.js b/site/examples/statistics/scatter/demo/point-sequential.js
index 953ae36be..f54879d12 100644
--- a/site/examples/statistics/scatter/demo/point-sequential.js
+++ b/site/examples/statistics/scatter/demo/point-sequential.js
@@ -6,9 +6,8 @@ const DemoScatter = () => {
   const config = {
     paddingLeft: 60,
     data: {
-      type: "fetch",
-      value:
-        "https://render.alipay.com/p/yuyan/180020010001215413/antd-charts/scatter-point-sequential.json",
+      type: 'fetch',
+      value: 'https://render.alipay.com/p/yuyan/180020010001215413/antd-charts/scatter-point-sequential.json',
     },
     xField: (d) => new Date(d.date),
     yField: 'value',
@@ -18,17 +17,14 @@ const DemoScatter = () => {
       stroke: '#000',
       strokeOpacity: 0.2,
     },
-    meta: {
+    scale: {
       color: {
         palette: 'rdBu',
         offset: (t) => 1 - t,
       },
     },
-    tooltip: [
-      { channel: 'x', name: 'year', valueFormatter: (d) => d.getFullYear() },
-      { channel: 'y' },
-    ],
-    annotations: [{ type: "lineY", data: [0], style: { stroke: "#000", strokeOpacity: 0.2 } }]
+    tooltip: [{ channel: 'x', name: 'year', valueFormatter: (d) => d.getFullYear() }, { channel: 'y' }],
+    annotations: [{ type: 'lineY', data: [0], style: { stroke: '#000', strokeOpacity: 0.2 } }],
   };
   return <Scatter {...config} />;
 };
diff --git a/site/examples/statistics/scatter/demo/point-shape.js b/site/examples/statistics/scatter/demo/point-shape.js
index 261eaf1f4..8354f5f6c 100644
--- a/site/examples/statistics/scatter/demo/point-shape.js
+++ b/site/examples/statistics/scatter/demo/point-shape.js
@@ -13,7 +13,7 @@ const DemoScatter = () => {
     colorField: 'category',
     sizeField: 5,
     shapeField: 'category',
-    meta: {
+    scale: {
       shape: { range: ['point', 'plus', 'diamond'] },
     },
   };
diff --git a/site/examples/statistics/scatter/demo/point-stacked.js b/site/examples/statistics/scatter/demo/point-stacked.js
index a3d8dc01d..aa51ac97f 100644
--- a/site/examples/statistics/scatter/demo/point-stacked.js
+++ b/site/examples/statistics/scatter/demo/point-stacked.js
@@ -5,32 +5,31 @@ import ReactDOM from 'react-dom';
 const DemoScatter = () => {
   const config = {
     data: {
-      type: "fetch",
-      value:
-        "https://gw.alipayobjects.com/os/bmw-prod/88c601cd-c1ff-4c9b-90d5-740d0b710b7e.json",
+      type: 'fetch',
+      value: 'https://gw.alipayobjects.com/os/bmw-prod/88c601cd-c1ff-4c9b-90d5-740d0b710b7e.json',
     },
     height: 360,
     autoFit: false,
     stack: {
-      y1: 'y'
+      y1: 'y',
     },
     xField: (d) => 2021 - d.birth,
     yField: (d) => (d.gender === 'M' ? 1 : -1),
     colorField: 'gender',
     shapeField: 'point',
-    meta: {
+    scale: {
       x: { nice: true },
     },
     axis: {
       y: {
-        title: "← Women · Men →",
+        title: '← Women · Men →',
         labelFormatter: (d) => `${Math.abs(+d)}`,
       },
-      x: { title: "Age →" },
+      x: { title: 'Age →' },
     },
-    legend: { color: { title: "Gender" } },
-    tooltip: { items: [{ channel: "x", name: "age" }] },
-    annotations: [{ type: "lineY", data: [0], style: { stroke: "black" } }],
+    legend: { color: { title: 'Gender' } },
+    tooltip: { items: [{ channel: 'x', name: 'age' }] },
+    annotations: [{ type: 'lineY', data: [0], style: { stroke: 'black' } }],
   };
   return <Scatter {...config} />;
 };
diff --git a/site/examples/statistics/tiny/demo/area-annotation.js b/site/examples/statistics/tiny/demo/area-annotation.js
index b5a22044e..ebaa21123 100644
--- a/site/examples/statistics/tiny/demo/area-annotation.js
+++ b/site/examples/statistics/tiny/demo/area-annotation.js
@@ -15,7 +15,7 @@ const DemoArea = () => {
     shapeField: 'smooth',
     xField: (_, idx) => idx,
     yField: (d) => d,
-    meta: {
+    scale: {
       y: { zero: true },
     },
     style: {
diff --git a/site/examples/statistics/tiny/demo/basic-area.js b/site/examples/statistics/tiny/demo/basic-area.js
index 140677c3d..eeeec8f05 100644
--- a/site/examples/statistics/tiny/demo/basic-area.js
+++ b/site/examples/statistics/tiny/demo/basic-area.js
@@ -13,7 +13,7 @@ const DemoArea = () => {
     shapeField: 'smooth',
     xField: (_, idx) => idx,
     yField: (d) => d,
-    meta: {
+    scale: {
       y: { zero: true },
     },
     style: {
diff --git a/site/examples/statistics/tiny/demo/filled-area.js b/site/examples/statistics/tiny/demo/filled-area.js
index 95817f546..5a52a4a1c 100644
--- a/site/examples/statistics/tiny/demo/filled-area.js
+++ b/site/examples/statistics/tiny/demo/filled-area.js
@@ -13,7 +13,7 @@ const DemoArea = () => {
     shapeField: 'smooth',
     xField: (_, idx) => idx,
     yField: (d) => d,
-    meta: {
+    scale: {
       y: { zero: true },
     },
     style: {
diff --git a/site/package.json b/site/package.json
index 285a3956c..a67170528 100644
--- a/site/package.json
+++ b/site/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@ant-design/charts-site",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0",
   "description": "React Visual component library",
   "keywords": [
     "antv",