diff --git a/__tests__/unit/plots/progress/index-spec.ts b/__tests__/unit/plots/progress/index-spec.ts
index 89d847a97d..a9217ad007 100644
--- a/__tests__/unit/plots/progress/index-spec.ts
+++ b/__tests__/unit/plots/progress/index-spec.ts
@@ -19,10 +19,8 @@ describe('progress', () => {
     expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
 
     progress.update({
-      width: 200,
-      height: 100,
+      ...progress.options,
       percent: 0.5,
-      autoFit: false,
     });
     expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
     expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.5);
@@ -50,11 +48,8 @@ describe('progress', () => {
     expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#654321');
 
     progress.update({
-      width: 200,
-      height: 100,
-      percent: 0.6,
-      color: () => ['#654321', '#123456'],
-      autoFit: false,
+      ...progress.options,
+      color: ['#654321', '#123456'],
     });
     expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
     expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
@@ -91,7 +86,7 @@ describe('progress', () => {
     expect(progress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(2);
     expect(progress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([2, 2]);
 
-    const progressStyle = (x, percent, type) => {
+    const progressStyle = (percent, type) => {
       if (type === 'current') {
         return percent > 0.5
           ? {
@@ -120,11 +115,8 @@ describe('progress', () => {
     };
 
     progress.update({
-      width: 200,
-      height: 100,
-      percent: 0.6,
+      ...progress.options,
       progressStyle,
-      autoFit: false,
     });
     expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
     expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
@@ -140,11 +132,8 @@ describe('progress', () => {
     expect(progress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]);
 
     progress.update({
-      width: 200,
-      height: 100,
+      ...progress.options,
       percent: 0.4,
-      progressStyle,
-      autoFit: false,
     });
 
     expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
@@ -160,4 +149,18 @@ describe('progress', () => {
     expect(progress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
     expect(progress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]);
   });
+
+  it('barWidthRatio', () => {
+    const progress = new Progress(createDiv(), {
+      width: 200,
+      height: 100,
+      percent: 0.6,
+      barWidthRatio: 0.1,
+      autoFit: false,
+    });
+
+    progress.render();
+
+    expect(progress.chart.getTheme().columnWidthRatio).toBe(0.1);
+  });
 });
diff --git a/__tests__/unit/plots/ring-progress/index-spec.ts b/__tests__/unit/plots/ring-progress/index-spec.ts
index a854546f32..142b49f7b5 100644
--- a/__tests__/unit/plots/ring-progress/index-spec.ts
+++ b/__tests__/unit/plots/ring-progress/index-spec.ts
@@ -3,7 +3,7 @@ import { createDiv } from '../../../utils/dom';
 
 describe('ring-progress', () => {
   it('data', () => {
-    const ringGrogress = new RingProgress(createDiv(), {
+    const ringProgress = new RingProgress(createDiv(), {
       radius: 1,
       innerRadius: 0.5,
       width: 200,
@@ -12,38 +12,37 @@ describe('ring-progress', () => {
       autoFit: false,
     });
 
-    ringGrogress.render();
-    expect(ringGrogress.chart.geometries[0].coordinate.type).toBe('theta');
-    expect(ringGrogress.chart.geometries[0].coordinate.radius).toBe(1);
-    expect(ringGrogress.chart.geometries[0].coordinate.innerRadius).toBe(0.5);
-    expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current');
-    expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
-    expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
-    expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
-    expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
+    ringProgress.render();
+    expect(ringProgress.chart.geometries[0].coordinate.type).toBe('theta');
+    expect(ringProgress.chart.geometries[0].coordinate.radius).toBe(1);
+    expect(ringProgress.chart.geometries[0].coordinate.innerRadius).toBe(0.5);
 
-    ringGrogress.update({
-      radius: 1,
-      innerRadius: 0.5,
-      width: 200,
-      height: 100,
+    expect(ringProgress.chart.geometries[0].elements[0].getData().type).toBe('current');
+    expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
+    expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
+    expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
+    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
+    expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
+
+    ringProgress.update({
+      ...ringProgress.options,
+      radius: 0.98,
+      innerRadius: 0.8,
       percent: 0.5,
-      autoFit: false,
     });
-    expect(ringGrogress.chart.geometries[0].coordinate.type).toBe('theta');
-    expect(ringGrogress.chart.geometries[0].coordinate.radius).toBe(1);
-    expect(ringGrogress.chart.geometries[0].coordinate.innerRadius).toBe(0.5);
-    expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current');
-    expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.5);
-    expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
-    expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.5);
-    expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
+    expect(ringProgress.chart.geometries[0].coordinate.type).toBe('theta');
+    expect(ringProgress.chart.geometries[0].coordinate.radius).toBe(0.98);
+    expect(ringProgress.chart.geometries[0].coordinate.innerRadius).toBe(0.8);
+    expect(ringProgress.chart.geometries[0].elements[0].getData().type).toBe('current');
+    expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.5);
+    expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
+    expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
+    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.5);
+    expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
   });
 
   it('data with color', () => {
-    const ringGrogress = new RingProgress(createDiv(), {
+    const ringProgress = new RingProgress(createDiv(), {
       radius: 1,
       innerRadius: 0.5,
       width: 200,
@@ -53,33 +52,28 @@ describe('ring-progress', () => {
       autoFit: false,
     });
 
-    ringGrogress.render();
-    expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current');
-    expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
-    expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#123456');
-    expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
-    expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#654321');
+    ringProgress.render();
+    expect(ringProgress.chart.geometries[0].elements[0].getData().type).toBe('current');
+    expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
+    expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#123456');
+    expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
+    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
+    expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#654321');
 
-    ringGrogress.update({
-      radius: 1,
-      innerRadius: 0.5,
-      width: 200,
-      height: 100,
-      percent: 0.6,
-      color: () => ['#654321', '#123456'],
-      autoFit: false,
+    ringProgress.update({
+      ...ringProgress.options,
+      color: ['#654321', '#123456'],
     });
-    expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current');
-    expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
-    expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#654321');
-    expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
-    expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#123456');
+    expect(ringProgress.chart.geometries[0].elements[0].getData().type).toBe('current');
+    expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
+    expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#654321');
+    expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
+    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
+    expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#123456');
   });
 
   it('data with progressStyle', () => {
-    const ringGrogress = new RingProgress(createDiv(), {
+    const ringProgress = new RingProgress(createDiv(), {
       radius: 1,
       innerRadius: 0.5,
       width: 200,
@@ -93,21 +87,21 @@ describe('ring-progress', () => {
       autoFit: false,
     });
 
-    ringGrogress.render();
-    expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current');
-    expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
-    expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
-    expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('stroke')).toBe('#123456');
-    expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(2);
-    expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([2, 2]);
-    expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
-    expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
-    expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#123456');
-    expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(2);
-    expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([2, 2]);
+    ringProgress.render();
+    expect(ringProgress.chart.geometries[0].elements[0].getData().type).toBe('current');
+    expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
+    expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
+    expect(ringProgress.chart.geometries[0].elements[0].shape.attr('stroke')).toBe('#123456');
+    expect(ringProgress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(2);
+    expect(ringProgress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([2, 2]);
+    expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
+    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
+    expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
+    expect(ringProgress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#123456');
+    expect(ringProgress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(2);
+    expect(ringProgress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([2, 2]);
 
-    const progressStyle = (x, percent, type) => {
+    const progressStyle = (percent, type) => {
       if (type === 'current') {
         return percent > 0.5
           ? {
@@ -135,69 +129,59 @@ describe('ring-progress', () => {
       }
     };
 
-    ringGrogress.update({
-      radius: 1,
-      innerRadius: 0.5,
-      width: 200,
-      height: 100,
-      percent: 0.6,
+    ringProgress.update({
+      ...ringProgress.options,
       progressStyle,
-      autoFit: false,
     });
-    expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current');
-    expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
-    expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
-    expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('stroke')).toBe('#654321');
-    expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(4);
-    expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
-    expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
-    expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
-    expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#123456');
-    expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
-    expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]);
+    expect(ringProgress.chart.geometries[0].elements[0].getData().type).toBe('current');
+    expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
+    expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
+    expect(ringProgress.chart.geometries[0].elements[0].shape.attr('stroke')).toBe('#654321');
+    expect(ringProgress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(4);
+    expect(ringProgress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
+    expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
+    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
+    expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
+    expect(ringProgress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#123456');
+    expect(ringProgress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
+    expect(ringProgress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]);
 
-    ringGrogress.update({
-      radius: 1,
-      innerRadius: 0.5,
-      width: 200,
-      height: 100,
+    ringProgress.update({
+      ...ringProgress.options,
       percent: 0.4,
-      progressStyle,
-      autoFit: false,
     });
 
-    expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current');
-    expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.4);
-    expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
-    expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('stroke')).toBe('#123456');
-    expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(4);
-    expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
-    expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.6);
-    expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
-    expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#654321');
-    expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
-    expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]);
+    expect(ringProgress.chart.geometries[0].elements[0].getData().type).toBe('current');
+    expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.4);
+    expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
+    expect(ringProgress.chart.geometries[0].elements[0].shape.attr('stroke')).toBe('#123456');
+    expect(ringProgress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(4);
+    expect(ringProgress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
+    expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
+    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.6);
+    expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
+    expect(ringProgress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#654321');
+    expect(ringProgress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
+    expect(ringProgress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]);
   });
 
   it('data without radius', () => {
-    const ringGrogress = new RingProgress(createDiv(), {
+    const ringProgress = new RingProgress(createDiv(), {
       width: 200,
       height: 100,
       percent: 0.6,
       autoFit: false,
     });
 
-    ringGrogress.render();
-    expect(ringGrogress.chart.geometries[0].coordinate.type).toBe('theta');
-    expect(ringGrogress.chart.geometries[0].coordinate.radius).toBe(1);
-    expect(ringGrogress.chart.geometries[0].coordinate.innerRadius).toBe(0.8);
-    expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current');
-    expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
-    expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
-    expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
-    expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
+    ringProgress.render();
+    expect(ringProgress.chart.geometries[0].coordinate.type).toBe('theta');
+    expect(ringProgress.chart.geometries[0].coordinate.radius).toBe(0.98);
+    expect(ringProgress.chart.geometries[0].coordinate.innerRadius).toBe(0.8);
+    expect(ringProgress.chart.geometries[0].elements[0].getData().type).toBe('current');
+    expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
+    expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
+    expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
+    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
+    expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
   });
 });
diff --git a/__tests__/unit/plots/tiny-area/index-spec.ts b/__tests__/unit/plots/tiny-area/index-spec.ts
index 7c45790349..17eaf95c50 100644
--- a/__tests__/unit/plots/tiny-area/index-spec.ts
+++ b/__tests__/unit/plots/tiny-area/index-spec.ts
@@ -113,7 +113,6 @@ describe('tiny-area', () => {
           return item.value;
         }),
       autoFit: false,
-      tooltip: true,
     });
 
     tinyArea.render();
@@ -127,7 +126,7 @@ describe('tiny-area', () => {
     expect(tooltipOption.containerTpl).toBe('<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>');
     expect(tooltipOption.domStyles).toEqual({
       'g2-tooltip': {
-        padding: '2px',
+        padding: '2px 4px',
         fontSize: '10px',
       },
     });
diff --git a/__tests__/unit/plots/tiny-column/index-spec.ts b/__tests__/unit/plots/tiny-column/index-spec.ts
index 42e50ffe73..828b8373e3 100644
--- a/__tests__/unit/plots/tiny-column/index-spec.ts
+++ b/__tests__/unit/plots/tiny-column/index-spec.ts
@@ -10,7 +10,7 @@ describe('tiny-column', () => {
       width: 200,
       height: 100,
       meta: {
-        value: {
+        y: {
           min: 0,
           max: 5000,
         },
@@ -86,7 +86,6 @@ describe('tiny-column', () => {
           return item.value;
         }),
       autoFit: false,
-      tooltip: true,
     });
 
     tinyColumn.render();
@@ -100,7 +99,7 @@ describe('tiny-column', () => {
     expect(tooltipOption.containerTpl).toBe('<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>');
     expect(tooltipOption.domStyles).toEqual({
       'g2-tooltip': {
-        padding: '2px',
+        padding: '2px 4px',
         fontSize: '10px',
       },
     });
@@ -150,4 +149,27 @@ describe('tiny-column', () => {
     expect(geometryTooltipOption.fields).toEqual(['x', 'y']);
     expect(geometryTooltipOption.callback(1, '3000')).toEqual({ value: '有3千' });
   });
+
+  it('columnWidthRatio', () => {
+    const tinyColumn = new TinyColumn(createDiv(), {
+      width: 400,
+      height: 100,
+      meta: {
+        y: {
+          min: 0,
+          max: 5000,
+        },
+      },
+      data: partySupport
+        .filter((o) => o.type === 'FF')
+        .map((item) => {
+          return item.value;
+        }),
+      autoFit: false,
+      columnWidthRatio: 0.9,
+    });
+
+    tinyColumn.render();
+    expect(tinyColumn.chart.getTheme().columnWidthRatio).toBe(0.9);
+  });
 });
diff --git a/__tests__/unit/plots/tiny-line/index-spec.ts b/__tests__/unit/plots/tiny-line/index-spec.ts
index a03bf94130..455495e0d1 100644
--- a/__tests__/unit/plots/tiny-line/index-spec.ts
+++ b/__tests__/unit/plots/tiny-line/index-spec.ts
@@ -9,18 +9,12 @@ describe('tiny-line', () => {
     const tinyLine = new TinyLine(createDiv(), {
       width: 80,
       height: 40,
-      meta: {
-        value: {
-          min: 0,
-          max: 5000,
-        },
-      },
       data: partySupport
         .filter((o) => o.type === 'FF')
         .map((item) => {
           return item.value;
         }),
-      autoFit: false,
+      autoFit: true,
     });
 
     tinyLine.render();
@@ -32,7 +26,7 @@ describe('tiny-line', () => {
       width: 80,
       height: 40,
       meta: {
-        value: {
+        y: {
           min: 0,
           max: 5000,
         },
@@ -42,7 +36,7 @@ describe('tiny-line', () => {
         .map((item) => {
           return item.value;
         }),
-      autoFit: false,
+      autoFit: true,
       smooth: true,
     });
 
@@ -63,7 +57,11 @@ describe('tiny-line', () => {
       lineStyle: {
         lineDash: [2, 2],
       },
-      autoFit: false,
+      tooltip: {
+        showCrosshairs: true,
+        showMarkers: true,
+      },
+      autoFit: true,
       appendPadding: 10,
     });
 
@@ -91,8 +89,7 @@ describe('tiny-line', () => {
         .map((item) => {
           return item.value;
         }),
-      autoFit: false,
-      tooltip: true,
+      autoFit: true,
     });
 
     tinyLine.render();
@@ -106,7 +103,7 @@ describe('tiny-line', () => {
     expect(tooltipOption.containerTpl).toBe('<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>');
     expect(tooltipOption.domStyles).toEqual({
       'g2-tooltip': {
-        padding: '2px',
+        padding: '2px 4px',
         fontSize: '10px',
       },
     });
diff --git a/examples/progress/basic/demo/meta.json b/examples/progress/basic/demo/meta.json
new file mode 100644
index 0000000000..346359caec
--- /dev/null
+++ b/examples/progress/basic/demo/meta.json
@@ -0,0 +1,40 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "progress.ts",
+      "title": {
+        "zh": "迷你进度条图",
+        "en": "basic Progress chart"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "progress-style.ts",
+      "title": {
+        "zh": "迷你进度条图样式",
+        "en": "Tiny Progress style"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*fQihRrLMIWsAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "progress-style-callback.ts",
+      "title": {
+        "zh": "迷你进度条图回调样式",
+        "en": "Tiny Progress style callback"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*lSOiS4lGCaIAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "progress-width.ts",
+      "title": {
+        "zh": "迷你进度条图大小",
+        "en": "Tiny Progress width"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*4NmuSaVRZ44AAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
diff --git a/examples/progress/basic/demo/progress-style-callback.ts b/examples/progress/basic/demo/progress-style-callback.ts
new file mode 100644
index 0000000000..5d08bd85c5
--- /dev/null
+++ b/examples/progress/basic/demo/progress-style-callback.ts
@@ -0,0 +1,16 @@
+import { Progress } from '@antv/g2plot';
+
+const progress = new Progress('container', {
+  height: 100,
+  width: 300,
+  autoFit: false,
+  percent: 0.7,
+  progressStyle: (percent: number, type: string) => {
+    if (type === 'current') {
+      return { fill: 'green' };
+    }
+    return { fill: '#999', lineDash: [1, 1], stroke: '#333' };
+  },
+});
+
+progress.render();
diff --git a/examples/progress/basic/demo/progress-style.ts b/examples/progress/basic/demo/progress-style.ts
new file mode 100644
index 0000000000..584e48df56
--- /dev/null
+++ b/examples/progress/basic/demo/progress-style.ts
@@ -0,0 +1,15 @@
+import { Progress } from '@antv/g2plot';
+
+const progress = new Progress('container', {
+  height: 100,
+  width: 300,
+  autoFit: false,
+  percent: 0.7,
+  progressStyle: {
+    stroke: 'grey',
+    lineDash: [4, 4],
+    lineWidth: 1,
+  },
+});
+
+progress.render();
diff --git a/examples/progress/basic/demo/progress-width.ts b/examples/progress/basic/demo/progress-width.ts
new file mode 100644
index 0000000000..08a994a6fb
--- /dev/null
+++ b/examples/progress/basic/demo/progress-width.ts
@@ -0,0 +1,11 @@
+import { Progress } from '@antv/g2plot';
+
+const progress = new Progress('container', {
+  height: 100,
+  width: 300,
+  autoFit: false,
+  percent: 0.7,
+  barWidthRatio: 0.1,
+});
+
+progress.render();
diff --git a/examples/progress/basic/demo/progress.ts b/examples/progress/basic/demo/progress.ts
new file mode 100644
index 0000000000..ebe9d32aec
--- /dev/null
+++ b/examples/progress/basic/demo/progress.ts
@@ -0,0 +1,10 @@
+import { Progress } from '@antv/g2plot';
+
+const progress = new Progress('container', {
+  height: 100,
+  width: 300,
+  autoFit: false,
+  percent: 0.7,
+});
+
+progress.render();
diff --git a/examples/progress/basic/design.en.md b/examples/progress/basic/design.en.md
new file mode 100644
index 0000000000..6d7c247589
--- /dev/null
+++ b/examples/progress/basic/design.en.md
@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范
diff --git a/examples/progress/basic/design.zh.md b/examples/progress/basic/design.zh.md
new file mode 100644
index 0000000000..6d7c247589
--- /dev/null
+++ b/examples/progress/basic/design.zh.md
@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范
diff --git a/examples/progress/basic/index.en.md b/examples/progress/basic/index.en.md
new file mode 100644
index 0000000000..863322de4a
--- /dev/null
+++ b/examples/progress/basic/index.en.md
@@ -0,0 +1,4 @@
+---
+title: 进度条图
+order: 0
+---
diff --git a/examples/progress/basic/index.zh.md b/examples/progress/basic/index.zh.md
new file mode 100644
index 0000000000..863322de4a
--- /dev/null
+++ b/examples/progress/basic/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 进度条图
+order: 0
+---
diff --git a/examples/ring-progress/basic/demo/meta.json b/examples/ring-progress/basic/demo/meta.json
new file mode 100644
index 0000000000..59d64d8922
--- /dev/null
+++ b/examples/ring-progress/basic/demo/meta.json
@@ -0,0 +1,40 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "ring-progress.ts",
+      "title": {
+        "zh": "迷你进度环图",
+        "en": "basic Ring chart"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "ring-progress-style.ts",
+      "title": {
+        "zh": "迷你进度环图样式",
+        "en": "Tiny Ring style"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*fQihRrLMIWsAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "ring-progress-style-callback.ts",
+      "title": {
+        "zh": "迷你进度环图回调样式",
+        "en": "Tiny Ring style callback"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*lSOiS4lGCaIAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "ring-progress-radius.ts",
+      "title": {
+        "zh": "迷你进度环图半径大小",
+        "en": "Tiny Ring radius"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*4NmuSaVRZ44AAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
diff --git a/examples/ring-progress/basic/demo/ring-progress-radius.ts b/examples/ring-progress/basic/demo/ring-progress-radius.ts
new file mode 100644
index 0000000000..2a0630da56
--- /dev/null
+++ b/examples/ring-progress/basic/demo/ring-progress-radius.ts
@@ -0,0 +1,12 @@
+import { RingProgress } from '@antv/g2plot';
+
+const ringProgress = new RingProgress('container', {
+  height: 100,
+  width: 100,
+  autoFit: false,
+  percent: 0.7,
+  innerRadius: 0.95,
+  radius: 0.95,
+});
+
+ringProgress.render();
diff --git a/examples/ring-progress/basic/demo/ring-progress-style-callback.ts b/examples/ring-progress/basic/demo/ring-progress-style-callback.ts
new file mode 100644
index 0000000000..c2b7ecc40d
--- /dev/null
+++ b/examples/ring-progress/basic/demo/ring-progress-style-callback.ts
@@ -0,0 +1,16 @@
+import { RingProgress } from '@antv/g2plot';
+
+const ringProgress = new RingProgress('container', {
+  height: 100,
+  width: 100,
+  autoFit: false,
+  percent: 0.7,
+  progressStyle: (percent: number, type: string) => {
+    if (type === 'current') {
+      return { fill: 'green' };
+    }
+    return { fill: '#999', lineDash: [1, 1], stroke: '#333' };
+  },
+});
+
+ringProgress.render();
diff --git a/examples/ring-progress/basic/demo/ring-progress-style.ts b/examples/ring-progress/basic/demo/ring-progress-style.ts
new file mode 100644
index 0000000000..d22d3d5687
--- /dev/null
+++ b/examples/ring-progress/basic/demo/ring-progress-style.ts
@@ -0,0 +1,15 @@
+import { RingProgress } from '@antv/g2plot';
+
+const ringProgress = new RingProgress('container', {
+  height: 100,
+  width: 100,
+  autoFit: false,
+  percent: 0.7,
+  progressStyle: {
+    stroke: 'grey',
+    lineDash: [4, 4],
+    lineWidth: 1,
+  },
+});
+
+ringProgress.render();
diff --git a/examples/ring-progress/basic/demo/ring-progress.ts b/examples/ring-progress/basic/demo/ring-progress.ts
new file mode 100644
index 0000000000..540f66bafe
--- /dev/null
+++ b/examples/ring-progress/basic/demo/ring-progress.ts
@@ -0,0 +1,10 @@
+import { RingProgress } from '@antv/g2plot';
+
+const ringProgress = new RingProgress('container', {
+  height: 100,
+  width: 100,
+  autoFit: false,
+  percent: 0.7,
+});
+
+ringProgress.render();
diff --git a/examples/ring-progress/basic/design.en.md b/examples/ring-progress/basic/design.en.md
new file mode 100644
index 0000000000..6d7c247589
--- /dev/null
+++ b/examples/ring-progress/basic/design.en.md
@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范
diff --git a/examples/ring-progress/basic/design.zh.md b/examples/ring-progress/basic/design.zh.md
new file mode 100644
index 0000000000..6d7c247589
--- /dev/null
+++ b/examples/ring-progress/basic/design.zh.md
@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范
diff --git a/examples/ring-progress/basic/index.en.md b/examples/ring-progress/basic/index.en.md
new file mode 100644
index 0000000000..b3ab2c6525
--- /dev/null
+++ b/examples/ring-progress/basic/index.en.md
@@ -0,0 +1,4 @@
+---
+title: 进度环图
+order: 0
+---
diff --git a/examples/ring-progress/basic/index.zh.md b/examples/ring-progress/basic/index.zh.md
new file mode 100644
index 0000000000..b3ab2c6525
--- /dev/null
+++ b/examples/ring-progress/basic/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 进度环图
+order: 0
+---
diff --git a/examples/tiny-area/basic/demo/area-style.ts b/examples/tiny-area/basic/demo/area-style.ts
new file mode 100644
index 0000000000..d9612ec6d4
--- /dev/null
+++ b/examples/tiny-area/basic/demo/area-style.ts
@@ -0,0 +1,18 @@
+import { TinyArea } from '@antv/g2plot';
+
+const tinyArea = new TinyArea('container', {
+  height: 60,
+  width: 300,
+  autoFit: false,
+  data: new Array(100).fill(0).map(() => Math.random() * 100),
+  smooth: true,
+  lineStyle: {
+    lineDash: [2, 2],
+    stroke: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
+  },
+  areaStyle: {
+    fill: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
+  },
+});
+
+tinyArea.render();
diff --git a/examples/tiny-area/basic/demo/area-with-scale.ts b/examples/tiny-area/basic/demo/area-with-scale.ts
new file mode 100644
index 0000000000..b656c43f2a
--- /dev/null
+++ b/examples/tiny-area/basic/demo/area-with-scale.ts
@@ -0,0 +1,21 @@
+import { TinyArea } from '@antv/g2plot';
+
+const tinyArea = new TinyArea('container', {
+  height: 60,
+  width: 300,
+  autoFit: false,
+  data: new Array(100).fill(0).map(() => Math.random() * 100),
+  smooth: true,
+  tooltip: {
+    showCrosshairs: true,
+    showMarkers: true,
+  },
+  meta: {
+    y: {
+      max: 150,
+      min: -50,
+    },
+  },
+});
+
+tinyArea.render();
diff --git a/examples/tiny-area/basic/demo/area.ts b/examples/tiny-area/basic/demo/area.ts
new file mode 100644
index 0000000000..f93e35c953
--- /dev/null
+++ b/examples/tiny-area/basic/demo/area.ts
@@ -0,0 +1,14 @@
+import { TinyArea } from '@antv/g2plot';
+
+const tinyArea = new TinyArea('container', {
+  height: 60,
+  width: 300,
+  autoFit: false,
+  data: new Array(100).fill(0).map(() => Math.random() * 100),
+  smooth: true,
+  tooltip: {
+    formatter: (x, y) => `NO.${x}: ${y.toFixed(2)}`,
+  },
+});
+
+tinyArea.render();
diff --git a/examples/tiny-area/basic/demo/meta.json b/examples/tiny-area/basic/demo/meta.json
new file mode 100644
index 0000000000..ead19a988b
--- /dev/null
+++ b/examples/tiny-area/basic/demo/meta.json
@@ -0,0 +1,32 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "area.ts",
+      "title": {
+        "zh": "基础迷你面积图",
+        "en": "basic Line chart"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "area-style.ts",
+      "title": {
+        "zh": "迷你面积图样式",
+        "en": "Tiny Line style"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*fQihRrLMIWsAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "area-with-scale.ts",
+      "title": {
+        "zh": "迷你面积图比例尺",
+        "en": "Tiny Line scale"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*4NmuSaVRZ44AAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
diff --git a/examples/tiny-area/basic/design.en.md b/examples/tiny-area/basic/design.en.md
new file mode 100644
index 0000000000..6d7c247589
--- /dev/null
+++ b/examples/tiny-area/basic/design.en.md
@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范
diff --git a/examples/tiny-area/basic/design.zh.md b/examples/tiny-area/basic/design.zh.md
new file mode 100644
index 0000000000..6d7c247589
--- /dev/null
+++ b/examples/tiny-area/basic/design.zh.md
@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范
diff --git a/examples/tiny-area/basic/index.en.md b/examples/tiny-area/basic/index.en.md
new file mode 100644
index 0000000000..d57884b618
--- /dev/null
+++ b/examples/tiny-area/basic/index.en.md
@@ -0,0 +1,4 @@
+---
+title: 迷你面积图
+order: 0
+---
diff --git a/examples/tiny-area/basic/index.zh.md b/examples/tiny-area/basic/index.zh.md
new file mode 100644
index 0000000000..d57884b618
--- /dev/null
+++ b/examples/tiny-area/basic/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 迷你面积图
+order: 0
+---
diff --git a/examples/tiny-column/basic/demo/column-style-callback.ts b/examples/tiny-column/basic/demo/column-style-callback.ts
new file mode 100644
index 0000000000..686ff34d6d
--- /dev/null
+++ b/examples/tiny-column/basic/demo/column-style-callback.ts
@@ -0,0 +1,15 @@
+import { TinyColumn } from '@antv/g2plot';
+
+const tinyColumn = new TinyColumn('container', {
+  height: 60,
+  width: 300,
+  autoFit: false,
+  data: new Array(100).fill(0).map(() => Math.random() * 100),
+  columnStyle: (x, y) => {
+    return {
+      fill: y > 80 ? 'red' : 'green',
+    };
+  },
+});
+
+tinyColumn.render();
diff --git a/examples/tiny-column/basic/demo/column-style.ts b/examples/tiny-column/basic/demo/column-style.ts
new file mode 100644
index 0000000000..908ef902fe
--- /dev/null
+++ b/examples/tiny-column/basic/demo/column-style.ts
@@ -0,0 +1,13 @@
+import { TinyColumn } from '@antv/g2plot';
+
+const tinyColumn = new TinyColumn('container', {
+  height: 60,
+  width: 300,
+  autoFit: false,
+  data: new Array(100).fill(0).map(() => Math.random() * 100),
+  columnStyle: {
+    fill: '#222',
+  },
+});
+
+tinyColumn.render();
diff --git a/examples/tiny-column/basic/demo/column-width-ratio.ts b/examples/tiny-column/basic/demo/column-width-ratio.ts
new file mode 100644
index 0000000000..200ff56087
--- /dev/null
+++ b/examples/tiny-column/basic/demo/column-width-ratio.ts
@@ -0,0 +1,17 @@
+import { TinyColumn } from '@antv/g2plot';
+
+const tinyColumn = new TinyColumn('container', {
+  height: 60,
+  width: 300,
+  autoFit: false,
+  data: new Array(100).fill(0).map(() => Math.random() * 100),
+  columnWidthRatio: 0.9,
+  meta: {
+    y: {
+      max: 150,
+      min: -50,
+    },
+  },
+});
+
+tinyColumn.render();
diff --git a/examples/tiny-column/basic/demo/column.ts b/examples/tiny-column/basic/demo/column.ts
new file mode 100644
index 0000000000..fe5e47891d
--- /dev/null
+++ b/examples/tiny-column/basic/demo/column.ts
@@ -0,0 +1,13 @@
+import { TinyColumn } from '@antv/g2plot';
+
+const tinyColumn = new TinyColumn('container', {
+  height: 60,
+  width: 300,
+  autoFit: false,
+  data: new Array(100).fill(0).map(() => Math.random() * 100),
+  tooltip: {
+    formatter: (x, y) => `NO.${x}: ${y.toFixed(2)}`,
+  },
+});
+
+tinyColumn.render();
diff --git a/examples/tiny-column/basic/demo/meta.json b/examples/tiny-column/basic/demo/meta.json
new file mode 100644
index 0000000000..05a5d8bd4b
--- /dev/null
+++ b/examples/tiny-column/basic/demo/meta.json
@@ -0,0 +1,40 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "column.ts",
+      "title": {
+        "zh": "基础迷你柱形图",
+        "en": "basic Column chart"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "column-style.ts",
+      "title": {
+        "zh": "迷你柱形图样式",
+        "en": "Tiny Column style"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*fQihRrLMIWsAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "column-style-callback.ts",
+      "title": {
+        "zh": "迷你柱形图回调样式",
+        "en": "Tiny Column style callback"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*lSOiS4lGCaIAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "line-width-ratio.ts",
+      "title": {
+        "zh": "迷你柱形图比例尺",
+        "en": "Tiny Column scale"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*4NmuSaVRZ44AAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
diff --git a/examples/tiny-column/basic/design.en.md b/examples/tiny-column/basic/design.en.md
new file mode 100644
index 0000000000..6d7c247589
--- /dev/null
+++ b/examples/tiny-column/basic/design.en.md
@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范
diff --git a/examples/tiny-column/basic/design.zh.md b/examples/tiny-column/basic/design.zh.md
new file mode 100644
index 0000000000..6d7c247589
--- /dev/null
+++ b/examples/tiny-column/basic/design.zh.md
@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范
diff --git a/examples/tiny-column/basic/index.en.md b/examples/tiny-column/basic/index.en.md
new file mode 100644
index 0000000000..7b93c235cd
--- /dev/null
+++ b/examples/tiny-column/basic/index.en.md
@@ -0,0 +1,4 @@
+---
+title: 迷你柱形图
+order: 0
+---
diff --git a/examples/tiny-column/basic/index.zh.md b/examples/tiny-column/basic/index.zh.md
new file mode 100644
index 0000000000..7b93c235cd
--- /dev/null
+++ b/examples/tiny-column/basic/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 迷你柱形图
+order: 0
+---
diff --git a/examples/tiny-line/basic/demo/line-style-callback.ts b/examples/tiny-line/basic/demo/line-style-callback.ts
new file mode 100644
index 0000000000..161b559a0f
--- /dev/null
+++ b/examples/tiny-line/basic/demo/line-style-callback.ts
@@ -0,0 +1,18 @@
+import { TinyLine } from '@antv/g2plot';
+
+const tinyLine = new TinyLine('container', {
+  height: 60,
+  width: 300,
+  autoFit: false,
+  data: new Array(100).fill(0).map(() => Math.random() * 100),
+  smooth: true,
+  tooltip: false,
+  lineStyle: () => {
+    return {
+      stroke: 'green',
+      lineWidth: 1,
+    };
+  },
+});
+
+tinyLine.render();
diff --git a/examples/tiny-line/basic/demo/line-style.ts b/examples/tiny-line/basic/demo/line-style.ts
new file mode 100644
index 0000000000..0b51508c4c
--- /dev/null
+++ b/examples/tiny-line/basic/demo/line-style.ts
@@ -0,0 +1,14 @@
+import { TinyLine } from '@antv/g2plot';
+
+const tinyLine = new TinyLine('container', {
+  height: 60,
+  width: 300,
+  autoFit: false,
+  data: new Array(100).fill(0).map(() => Math.random() * 100),
+  smooth: true,
+  lineStyle: {
+    lineDash: [2, 2],
+  },
+});
+
+tinyLine.render();
diff --git a/examples/tiny-line/basic/demo/line-with-scale.ts b/examples/tiny-line/basic/demo/line-with-scale.ts
new file mode 100644
index 0000000000..cf2510a25c
--- /dev/null
+++ b/examples/tiny-line/basic/demo/line-with-scale.ts
@@ -0,0 +1,21 @@
+import { TinyLine } from '@antv/g2plot';
+
+const tinyLine = new TinyLine('container', {
+  height: 60,
+  width: 300,
+  autoFit: false,
+  data: new Array(100).fill(0).map(() => Math.random() * 100),
+  smooth: true,
+  tooltip: {
+    showCrosshairs: true,
+    showMarkers: true,
+  },
+  meta: {
+    y: {
+      max: 150,
+      min: -50,
+    },
+  },
+});
+
+tinyLine.render();
diff --git a/examples/tiny-line/basic/demo/line.ts b/examples/tiny-line/basic/demo/line.ts
new file mode 100644
index 0000000000..64f2b519b2
--- /dev/null
+++ b/examples/tiny-line/basic/demo/line.ts
@@ -0,0 +1,14 @@
+import { TinyLine } from '@antv/g2plot';
+
+const tinyLine = new TinyLine('container', {
+  height: 60,
+  width: 300,
+  autoFit: false,
+  data: new Array(100).fill(0).map(() => Math.random() * 100),
+  smooth: true,
+  tooltip: {
+    formatter: (x, y) => `NO.${x}: ${y.toFixed(2)}`,
+  },
+});
+
+tinyLine.render();
diff --git a/examples/tiny-line/basic/demo/meta.json b/examples/tiny-line/basic/demo/meta.json
new file mode 100644
index 0000000000..0b51b6193f
--- /dev/null
+++ b/examples/tiny-line/basic/demo/meta.json
@@ -0,0 +1,40 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "line.ts",
+      "title": {
+        "zh": "基础迷你折线图",
+        "en": "basic Line chart"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "line-style.ts",
+      "title": {
+        "zh": "迷你折线图样式",
+        "en": "Tiny Line style"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*fQihRrLMIWsAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "line-style-callback.ts",
+      "title": {
+        "zh": "迷你折线图回调样式",
+        "en": "Tiny Line style callback"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*lSOiS4lGCaIAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "line-with-scale.ts",
+      "title": {
+        "zh": "迷你折线图比例尺",
+        "en": "Tiny Line scale"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*4NmuSaVRZ44AAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
diff --git a/examples/tiny-line/basic/design.en.md b/examples/tiny-line/basic/design.en.md
new file mode 100644
index 0000000000..6d7c247589
--- /dev/null
+++ b/examples/tiny-line/basic/design.en.md
@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范
diff --git a/examples/tiny-line/basic/design.zh.md b/examples/tiny-line/basic/design.zh.md
new file mode 100644
index 0000000000..6d7c247589
--- /dev/null
+++ b/examples/tiny-line/basic/design.zh.md
@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范
diff --git a/examples/tiny-line/basic/index.en.md b/examples/tiny-line/basic/index.en.md
new file mode 100644
index 0000000000..4d3493e766
--- /dev/null
+++ b/examples/tiny-line/basic/index.en.md
@@ -0,0 +1,4 @@
+---
+title: 迷你折线图
+order: 0
+---
diff --git a/examples/tiny-line/basic/index.zh.md b/examples/tiny-line/basic/index.zh.md
new file mode 100644
index 0000000000..4d3493e766
--- /dev/null
+++ b/examples/tiny-line/basic/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 迷你折线图
+order: 0
+---
diff --git a/gatsby-config.js b/gatsby-config.js
index b16ea66721..e3bb766d8a 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -135,6 +135,46 @@ module.exports = {
           en: 'Funnel Charts',
         },
       },
+      {
+        slug: 'tiny-line',
+        icon: 'line',
+        title: {
+          zh: '迷你折线图',
+          en: 'Tiny Line',
+        },
+      },
+      {
+        slug: 'tiny-area',
+        icon: 'area',
+        title: {
+          zh: '迷你面积图',
+          en: 'Tiny Area',
+        },
+      },
+      {
+        slug: 'tiny-column',
+        icon: 'column',
+        title: {
+          zh: '迷你柱形图',
+          en: 'Tiny Column',
+        },
+      },
+      {
+        slug: 'ring-progress',
+        icon: 'other',
+        title: {
+          zh: '进度环图',
+          en: 'Ring Progress',
+        },
+      },
+      {
+        slug: 'progress',
+        icon: 'other',
+        title: {
+          zh: '进度条图',
+          en: 'Tiny Progress',
+        },
+      },
       // OTHERS
       {
         slug: 'general',
diff --git a/src/plots/progress/adaptor.ts b/src/plots/progress/adaptor.ts
index a17172acc8..be137ac064 100644
--- a/src/plots/progress/adaptor.ts
+++ b/src/plots/progress/adaptor.ts
@@ -1,101 +1,35 @@
-import { isFunction } from '@antv/util';
+import { isNil } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { flow } from '../../utils';
-import { scale } from '../../adaptor/common';
+import { scale, animation, theme } from '../../adaptor/common';
+import { geometry } from '../ring-progress/adaptor';
 import { ProgressOptions } from './types';
 
 /**
- * 字段
- * @param params
- */
-function field(params: Params<ProgressOptions>): Params<ProgressOptions> {
-  const { chart, options } = params;
-  const { percent, color } = options;
-
-  const data = [
-    {
-      type: 'current',
-      percent: percent,
-    },
-    {
-      type: 'target',
-      percent: 1 - percent,
-    },
-  ];
-
-  chart.data(data);
-
-  const geometry = chart.interval().position('1*percent').adjust('stack');
-  const values = isFunction(color) ? color(percent) : color || ['#FAAD14', '#E8EDF3'];
-
-  geometry.color('type', values);
-
-  return params;
-}
-
-/**
- * axis 配置
- * @param params
- */
-function axis(params: Params<ProgressOptions>): Params<ProgressOptions> {
-  const { chart } = params;
-
-  chart.axis(false);
-
-  return params;
-}
-
-/**
- * legend 配置
- * @param params
- */
-function legend(params: Params<ProgressOptions>): Params<ProgressOptions> {
-  const { chart } = params;
-
-  chart.legend(false);
-
-  return params;
-}
-
-/**
- * tooltip 配置
+ * coordinate 配置
  * @param params
  */
-function tooltip(params: Params<ProgressOptions>): Params<ProgressOptions> {
+function coordinate(params: Params<ProgressOptions>): Params<ProgressOptions> {
   const { chart } = params;
 
-  chart.tooltip(false);
+  chart.coordinate('rect').transpose();
 
   return params;
 }
 
 /**
- * 样式
+ * widthRatio 配置
  * @param params
  */
-function style(params: Params<ProgressOptions>): Params<ProgressOptions> {
+function widthRatio(params: Params<ProgressOptions>): Params<ProgressOptions> {
   const { chart, options } = params;
-  const { progressStyle } = options;
+  const { barWidthRatio } = options;
 
-  const geometry = chart.geometries[0];
-  if (progressStyle && geometry) {
-    if (isFunction(progressStyle)) {
-      geometry.style('1*percent*type', progressStyle);
-    } else {
-      geometry.style(progressStyle);
-    }
+  if (!isNil(widthRatio)) {
+    chart.theme({
+      columnWidthRatio: barWidthRatio,
+    });
   }
-  return params;
-}
-
-/**
- * coordinate 配置
- * @param params
- */
-function coordinate(params: Params<ProgressOptions>): Params<ProgressOptions> {
-  const { chart } = params;
-
-  chart.coordinate('rect').transpose();
 
   return params;
 }
@@ -106,5 +40,5 @@ function coordinate(params: Params<ProgressOptions>): Params<ProgressOptions> {
  * @param options
  */
 export function adaptor(params: Params<ProgressOptions>) {
-  return flow(field, scale({}), axis, legend, tooltip, style, coordinate)(params);
+  return flow(geometry, scale({}), coordinate, widthRatio, animation, theme)(params);
 }
diff --git a/src/plots/progress/index.ts b/src/plots/progress/index.ts
index 39b54d1d31..49c33b5386 100644
--- a/src/plots/progress/index.ts
+++ b/src/plots/progress/index.ts
@@ -9,6 +9,13 @@ export class Progress extends Plot<ProgressOptions> {
   /** 图表类型 */
   public type: string = 'process';
 
+  protected getDefaultOptions() {
+    return {
+      percent: 0.2,
+      color: ['#FAAD14', '#E8EDF3'],
+    };
+  }
+
   /**
    * 获取 进度图 的适配器
    */
diff --git a/src/plots/progress/types.ts b/src/plots/progress/types.ts
index ed933c21c7..459ffe0e40 100644
--- a/src/plots/progress/types.ts
+++ b/src/plots/progress/types.ts
@@ -5,8 +5,10 @@ import { ShapeStyle } from '../../types/style';
 export interface ProgressOptions extends Omit<Options, 'data' | 'color'> {
   /** 进度百分比 */
   readonly percent: number;
+  /** 条图宽度占比 [0-1] */
+  readonly barWidthRatio?: number;
   /** 进度条颜色 */
-  readonly color?: string[] | ((percent: number) => string[]);
+  readonly color?: string | string[] | ((percent: number, type: string) => string);
   /** 进度条样式 */
-  readonly progressStyle?: ShapeStyle | ((x?: any, percent?: number, type?: string) => ShapeStyle);
+  readonly progressStyle?: ShapeStyle | ((percent: number, type: string) => ShapeStyle);
 }
diff --git a/src/plots/ring-progress/adaptor.ts b/src/plots/ring-progress/adaptor.ts
index 4b549b1214..cfd5731606 100644
--- a/src/plots/ring-progress/adaptor.ts
+++ b/src/plots/ring-progress/adaptor.ts
@@ -1,16 +1,16 @@
-import { isFunction } from '@antv/util';
+import { isFunction, isArray } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { flow } from '../../utils';
-import { scale } from '../../adaptor/common';
+import { scale, animation, theme } from '../../adaptor/common';
 import { RingProgressOptions } from './types';
 
 /**
- * 字段
+ * 图形
  * @param params
  */
-function field(params: Params<RingProgressOptions>): Params<RingProgressOptions> {
+export function geometry(params: Params<RingProgressOptions>): Params<RingProgressOptions> {
   const { chart, options } = params;
-  const { percent, color } = options;
+  const { percent, color, progressStyle } = options;
 
   const data = [
     {
@@ -25,77 +25,43 @@ function field(params: Params<RingProgressOptions>): Params<RingProgressOptions>
 
   chart.data(data);
 
+  // geometry
   const geometry = chart.interval().position('1*percent').adjust('stack');
-  const values = isFunction(color) ? color(percent) : color || ['#FAAD14', '#E8EDF3'];
 
-  geometry.color('type', values);
-
-  return params;
-}
+  // color
+  if (color) {
+    if (isArray(color)) {
+      geometry.color('type', color);
+    } else {
+      geometry.color('type', (type: string): string => {
+        return isFunction(color) ? color(percent, type) : color;
+      });
+    }
+  }
 
-/**
- * axis 配置
- * @param params
- */
-function axis(params: Params<RingProgressOptions>): Params<RingProgressOptions> {
-  const { chart } = params;
+  // style
+  if (progressStyle) {
+    geometry.style('percent*type', (percent: number, type: string) => {
+      return isFunction(progressStyle) ? progressStyle(percent, type) : progressStyle;
+    });
+  }
 
+  chart.tooltip(false);
   chart.axis(false);
-
-  return params;
-}
-
-/**
- * legend 配置
- * @param params
- */
-function legend(params: Params<RingProgressOptions>): Params<RingProgressOptions> {
-  const { chart } = params;
-
   chart.legend(false);
 
   return params;
 }
 
-/**
- * tooltip 配置
- * @param params
- */
-function tooltip(params: Params<RingProgressOptions>): Params<RingProgressOptions> {
-  const { chart } = params;
-
-  chart.tooltip(false);
-
-  return params;
-}
-
-/**
- * 样式
- * @param params
- */
-function style(params: Params<RingProgressOptions>): Params<RingProgressOptions> {
-  const { chart, options } = params;
-  const { progressStyle } = options;
-
-  const geometry = chart.geometries[0];
-  if (progressStyle && geometry) {
-    if (isFunction(progressStyle)) {
-      geometry.style('1*percent*type', progressStyle);
-    } else {
-      geometry.style(progressStyle);
-    }
-  }
-  return params;
-}
-
 /**
  * coordinate 配置
  * @param params
  */
 function coordinate(params: Params<RingProgressOptions>): Params<RingProgressOptions> {
   const { chart, options } = params;
-  const { innerRadius = 0.8, radius = 1 } = options;
+  const { innerRadius, radius } = options;
 
+  // coordinate
   chart.coordinate('theta', {
     innerRadius,
     radius,
@@ -110,5 +76,5 @@ function coordinate(params: Params<RingProgressOptions>): Params<RingProgressOpt
  * @param options
  */
 export function adaptor(params: Params<RingProgressOptions>) {
-  return flow(field, scale({}), axis, legend, tooltip, style, coordinate)(params);
+  return flow(geometry, scale({}), coordinate, animation, theme)(params);
 }
diff --git a/src/plots/ring-progress/index.ts b/src/plots/ring-progress/index.ts
index 236edf4648..295b9988e6 100644
--- a/src/plots/ring-progress/index.ts
+++ b/src/plots/ring-progress/index.ts
@@ -7,7 +7,16 @@ export { RingProgressOptions };
 
 export class RingProgress extends Plot<RingProgressOptions> {
   /** 图表类型 */
-  public type: string = 'process';
+  public type: string = 'ring-process';
+
+  protected getDefaultOptions() {
+    return {
+      percent: 0.2,
+      innerRadius: 0.8,
+      radius: 0.98,
+      color: ['#FAAD14', '#E8EDF3'],
+    };
+  }
 
   /**
    * 获取 环形进度图 的适配器
diff --git a/src/plots/ring-progress/types.ts b/src/plots/ring-progress/types.ts
index dc0480da6f..1c3bdb45a4 100644
--- a/src/plots/ring-progress/types.ts
+++ b/src/plots/ring-progress/types.ts
@@ -2,7 +2,7 @@ import { Options } from '../../types';
 import { ShapeStyle } from '../../types/style';
 
 /** mini 图类型定义需要 omit 很多的 G2 Options 配置 */
-export interface RingProgressOptions extends Omit<Options, 'data' | 'color'> {
+export interface RingProgressOptions extends Omit<Options, 'data' | 'tooltip' | 'legend' | 'label' | 'color'> {
   /** 进度百分比 */
   readonly percent: number;
   /** 外环的半径 */
@@ -10,7 +10,7 @@ export interface RingProgressOptions extends Omit<Options, 'data' | 'color'> {
   /** 内环的半径 */
   readonly innerRadius?: number;
   /** 进度条颜色 */
-  readonly color?: string[] | ((percent: number) => string[]);
+  readonly color?: string | string[] | ((percent: number, type: string) => string);
   /** 进度条样式 */
-  readonly progressStyle?: ShapeStyle | ((x?: any, percent?: number, type?: string) => ShapeStyle);
+  readonly progressStyle?: ShapeStyle | ((percent: number, type: string) => ShapeStyle);
 }
diff --git a/src/plots/tiny-area/adaptor.ts b/src/plots/tiny-area/adaptor.ts
index 24e836da83..3caabb04f3 100644
--- a/src/plots/tiny-area/adaptor.ts
+++ b/src/plots/tiny-area/adaptor.ts
@@ -1,17 +1,17 @@
 import { isFunction } from '@antv/util';
-import { theme, scale } from '../../adaptor/common';
+import { theme, scale, animation } from '../../adaptor/common';
 import { Params } from '../../core/adaptor';
 import { flow } from '../../utils';
-import { DEFAULT_TOOLTIP_OPTIONS } from '../tiny-line/constants';
+import { TinyTooltipOption } from '../../types';
 import { TinyAreaOptions } from './types';
 
 /**
  * 字段
  * @param params
  */
-function field(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
+function geometry(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
   const { chart, options } = params;
-  const { data } = options;
+  const { data, lineStyle, areaStyle, smooth } = options;
 
   const seriesData = data.map((y: number, x: number) => {
     return { x, y };
@@ -19,31 +19,31 @@ function field(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
 
   chart.data(seriesData);
 
-  chart.area().position('x*y');
-  chart.line().position('x*y');
+  const areaGeometry = chart
+    .area()
+    .position('x*y')
+    .shape(smooth ? 'smooth' : 'area');
 
-  return params;
-}
-
-/**
- * axis 配置
- * @param params
- */
-function axis(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
-  const { chart } = params;
+  // area style
+  if (areaStyle) {
+    areaGeometry.style('x*y', () => {
+      return isFunction(areaStyle) ? areaStyle() : areaStyle;
+    });
+  }
 
-  chart.axis(false);
+  const lineGeometry = chart
+    .line()
+    .position('x*y')
+    .shape(smooth ? 'smooth' : 'line');
 
-  return params;
-}
-
-/**
- * legend 配置
- * @param params
- */
-function legend(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
-  const { chart } = params;
+  // line style
+  if (lineStyle) {
+    lineGeometry.style('x*y', () => {
+      return isFunction(lineStyle) ? lineStyle() : lineStyle;
+    });
+  }
 
+  chart.axis(false);
   chart.legend(false);
 
   return params;
@@ -55,76 +55,23 @@ function legend(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
  */
 export function tooltip(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
   const { chart, options } = params;
-  const { tooltip = false } = options;
+  const { tooltip } = options;
 
-  if (tooltip) {
-    if (typeof tooltip === 'object') {
-      const { formatter, domStyles, position, offset, showCrosshairs } = tooltip;
-      chart.tooltip({
-        ...DEFAULT_TOOLTIP_OPTIONS,
-        showCrosshairs,
-        domStyles,
-        position,
-        offset,
-      });
-      chart.geometries.map((geometry) => {
-        geometry.tooltip('x*y', (x, y) => {
-          return {
-            value: formatter(x, y),
-          };
-        });
-      });
-    } else {
-      chart.tooltip(DEFAULT_TOOLTIP_OPTIONS);
-    }
-  } else {
+  // false 则关闭
+  if (tooltip === false) {
     chart.tooltip(false);
-  }
-
-  return params;
-}
-
-/**
- * 样式
- * @param params
- */
-function style(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
-  const { chart, options } = params;
-  const { lineStyle, areaStyle } = options;
+  } else {
+    // 是如果 object，那么传入
+    const { formatter, ...otherTooltip } = tooltip as TinyTooltipOption;
 
-  const areaGeometry = chart.geometries[0];
-  if (areaStyle && areaGeometry) {
-    if (isFunction(areaStyle)) {
-      areaGeometry.style('x*y', areaStyle);
-    } else {
-      areaGeometry.style(areaStyle);
-    }
-  }
+    chart.tooltip(otherTooltip);
 
-  const lineGeometry = chart.geometries[1];
-  if (lineStyle && lineGeometry) {
-    if (isFunction(lineStyle)) {
-      lineGeometry.style('x*y', lineStyle);
-    } else {
-      lineGeometry.style(lineStyle);
-    }
+    chart.geometries.map((g) => {
+      g.tooltip('x*y', (x, y) => ({
+        value: formatter(x, y),
+      }));
+    });
   }
-  return params;
-}
-
-/**
- * shape 的配置处理
- * @param params
- */
-function shape(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
-  const { chart, options } = params;
-  const { smooth } = options;
-
-  const areaGeometry = chart.geometries[0];
-  areaGeometry.shape(smooth ? 'smooth' : 'area');
-
-  const lineGeometry = chart.geometries[1];
-  lineGeometry.shape(smooth ? 'smooth' : 'line');
 
   return params;
 }
@@ -135,5 +82,5 @@ function shape(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
  * @param options
  */
 export function adaptor(params: Params<TinyAreaOptions>) {
-  return flow(field, scale({}), axis, legend, tooltip, style, shape, theme)(params);
+  return flow(geometry, scale({}), tooltip, theme, animation)(params);
 }
diff --git a/src/plots/tiny-area/index.ts b/src/plots/tiny-area/index.ts
index bcc5f47b2b..141ed764ad 100644
--- a/src/plots/tiny-area/index.ts
+++ b/src/plots/tiny-area/index.ts
@@ -1,5 +1,6 @@
 import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
+import { DEFAULT_TOOLTIP_OPTIONS } from '../tiny-line/constants';
 import { TinyAreaOptions } from './types';
 import { adaptor } from './adaptor';
 
@@ -9,6 +10,14 @@ export class TinyArea extends Plot<TinyAreaOptions> {
   /** 图表类型 */
   public type: string = 'tiny-area';
 
+  protected getDefaultOptions() {
+    return {
+      tooltip: {
+        ...DEFAULT_TOOLTIP_OPTIONS,
+      },
+    };
+  }
+
   /**
    * 获取 迷你面积图 的适配器
    */
diff --git a/src/plots/tiny-area/types.ts b/src/plots/tiny-area/types.ts
index b41eba6c83..1955913ab9 100644
--- a/src/plots/tiny-area/types.ts
+++ b/src/plots/tiny-area/types.ts
@@ -3,15 +3,15 @@ import { ShapeStyle } from '../../types/style';
 import { TinyTooltipOption } from '../../types/tooltip';
 
 /** mini 图类型定义需要 omit 很多的 G2 Options 配置 */
-export interface TinyAreaOptions extends Omit<Options, 'data'> {
+export interface TinyAreaOptions extends Omit<Options, 'data' | 'tooltip' | 'legend' | 'label'> {
   /** 具体的数据 */
   readonly data: number[];
   /** 是否平滑 */
   readonly smooth?: boolean;
   /** 面积折线图形样式 */
-  readonly lineStyle?: ShapeStyle | ((x?: number, y?: number) => ShapeStyle);
+  readonly lineStyle?: ShapeStyle | (() => ShapeStyle);
   /** 面积填充图形样式 */
-  readonly areaStyle?: ShapeStyle | ((x?: number, y?: number) => ShapeStyle);
+  readonly areaStyle?: ShapeStyle | (() => ShapeStyle);
   /** tooltip配置 */
   readonly tooltip?: boolean | TinyTooltipOption;
 }
diff --git a/src/plots/tiny-column/adaptor.ts b/src/plots/tiny-column/adaptor.ts
index 81e2e10c44..08ef09c231 100644
--- a/src/plots/tiny-column/adaptor.ts
+++ b/src/plots/tiny-column/adaptor.ts
@@ -1,17 +1,16 @@
-import { isFunction } from '@antv/util';
-import { theme, scale } from '../../adaptor/common';
+import { isFunction, isNil } from '@antv/util';
+import { theme, scale, animation } from '../../adaptor/common';
 import { Params } from '../../core/adaptor';
 import { flow } from '../../utils';
-import { DEFAULT_TOOLTIP_OPTIONS } from '../tiny-line/constants';
+import { TinyTooltipOption } from '../../types';
 import { TinyColumnOptions } from './types';
-
 /**
  * 字段
  * @param params
  */
-function field(params: Params<TinyColumnOptions>): Params<TinyColumnOptions> {
+function geometry(params: Params<TinyColumnOptions>): Params<TinyColumnOptions> {
   const { chart, options } = params;
-  const { data } = options;
+  const { data, columnStyle, columnWidthRatio } = options;
 
   const seriesData = data.map((y: number, x: number) => {
     return { x, y };
@@ -19,30 +18,22 @@ function field(params: Params<TinyColumnOptions>): Params<TinyColumnOptions> {
 
   chart.data(seriesData);
 
-  chart.interval().position('x*y');
+  const geometry = chart.interval().position('x*y');
 
-  return params;
-}
+  // line style
+  if (columnStyle) {
+    geometry.style('x*y', (x: number, y: number) => {
+      return isFunction(columnStyle) ? columnStyle(x, y) : columnStyle;
+    });
+  }
 
-/**
- * axis 配置
- * @param params
- */
-function axis(params: Params<TinyColumnOptions>): Params<TinyColumnOptions> {
-  const { chart } = params;
+  if (!isNil(columnWidthRatio)) {
+    chart.theme({
+      columnWidthRatio,
+    });
+  }
 
   chart.axis(false);
-
-  return params;
-}
-
-/**
- * legend 配置
- * @param params
- */
-function legend(params: Params<TinyColumnOptions>): Params<TinyColumnOptions> {
-  const { chart } = params;
-
   chart.legend(false);
 
   return params;
@@ -54,50 +45,22 @@ function legend(params: Params<TinyColumnOptions>): Params<TinyColumnOptions> {
  */
 export function tooltip(params: Params<TinyColumnOptions>): Params<TinyColumnOptions> {
   const { chart, options } = params;
-  const { tooltip = false } = options;
+  const { tooltip } = options;
 
-  if (tooltip) {
-    if (typeof tooltip === 'object') {
-      const { formatter, domStyles, position, offset, showCrosshairs } = tooltip;
-      chart.tooltip({
-        ...DEFAULT_TOOLTIP_OPTIONS,
-        showCrosshairs,
-        domStyles,
-        position,
-        offset,
-      });
-      const geometry = chart.geometries[0];
-      geometry.tooltip('x*y', (x, y) => {
-        return {
-          value: formatter(x, y),
-        };
-      });
-    } else {
-      chart.tooltip(DEFAULT_TOOLTIP_OPTIONS);
-    }
-  } else {
+  // false 则关闭
+  if (tooltip === false) {
     chart.tooltip(false);
-  }
-
-  return params;
-}
+  } else {
+    // 是如果 object，那么传入
+    const { formatter, ...otherTooltip } = tooltip as TinyTooltipOption;
 
-/**
- * 样式
- * @param params
- */
-function style(params: Params<TinyColumnOptions>): Params<TinyColumnOptions> {
-  const { chart, options } = params;
-  const { columnStyle } = options;
+    chart.tooltip(otherTooltip);
 
-  const geometry = chart.geometries[0];
-  if (columnStyle && geometry) {
-    if (isFunction(columnStyle)) {
-      geometry.style('x*y', columnStyle);
-    } else {
-      geometry.style(columnStyle);
-    }
+    chart.geometries[0].tooltip('x*y', (x, y) => ({
+      value: formatter(x, y),
+    }));
   }
+
   return params;
 }
 
@@ -107,5 +70,5 @@ function style(params: Params<TinyColumnOptions>): Params<TinyColumnOptions> {
  * @param options
  */
 export function adaptor(params: Params<TinyColumnOptions>) {
-  return flow(field, scale({}), axis, legend, tooltip, style, theme)(params);
+  return flow(geometry, scale({}), tooltip, theme, animation)(params);
 }
diff --git a/src/plots/tiny-column/index.ts b/src/plots/tiny-column/index.ts
index 552b475199..aadd5a4fd6 100644
--- a/src/plots/tiny-column/index.ts
+++ b/src/plots/tiny-column/index.ts
@@ -1,5 +1,6 @@
 import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
+import { DEFAULT_TOOLTIP_OPTIONS } from '../tiny-line/constants';
 import { TinyColumnOptions } from './types';
 import { adaptor } from './adaptor';
 
@@ -9,6 +10,14 @@ export class TinyColumn extends Plot<TinyColumnOptions> {
   /** 图表类型 */
   public type: string = 'tiny-column';
 
+  protected getDefaultOptions() {
+    return {
+      tooltip: {
+        ...DEFAULT_TOOLTIP_OPTIONS,
+      },
+    };
+  }
+
   /**
    * 获取 迷你柱形图 的适配器
    */
diff --git a/src/plots/tiny-column/types.ts b/src/plots/tiny-column/types.ts
index 484703cb3b..fc55c89986 100644
--- a/src/plots/tiny-column/types.ts
+++ b/src/plots/tiny-column/types.ts
@@ -3,11 +3,13 @@ import { ShapeStyle } from '../../types/style';
 import { TinyTooltipOption } from '../../types/tooltip';
 
 /** mini 图类型定义需要 omit 很多的 G2 Options 配置 */
-export interface TinyColumnOptions extends Omit<Options, 'data'> {
+export interface TinyColumnOptions extends Omit<Options, 'data' | 'tooltip' | 'legend' | 'label'> {
   /** 具体的数据 */
   readonly data: number[];
+  /** 柱状图宽度占比 [0-1] */
+  readonly columnWidthRatio?: number;
   /** 迷你柱形图形样式 */
-  readonly columnStyle?: ShapeStyle | ((x?: number, y?: number) => ShapeStyle);
+  readonly columnStyle?: ShapeStyle | ((x: number, y: number) => ShapeStyle);
   /** tooltip配置 */
   readonly tooltip?: boolean | TinyTooltipOption;
 }
diff --git a/src/plots/tiny-line/adaptor.ts b/src/plots/tiny-line/adaptor.ts
index adc6e1274a..21a721b71b 100644
--- a/src/plots/tiny-line/adaptor.ts
+++ b/src/plots/tiny-line/adaptor.ts
@@ -1,17 +1,17 @@
 import { isFunction } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { flow } from '../../utils';
-import { scale } from '../../adaptor/common';
+import { scale, theme, animation } from '../../adaptor/common';
+import { TinyTooltipOption } from '../../types';
 import { TinyLineOptions } from './types';
-import { DEFAULT_TOOLTIP_OPTIONS } from './constants';
 
 /**
  * 字段
  * @param params
  */
-function field(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
+function geometry(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
   const { chart, options } = params;
-  const { data, connectNulls } = options;
+  const { data, connectNulls, lineStyle, smooth } = options;
 
   const seriesData = data.map((y: number, x: number) => {
     return { x, y };
@@ -19,19 +19,20 @@ function field(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
 
   chart.data(seriesData);
 
-  chart.line({ connectNulls }).position('x*y');
+  const geometry = chart
+    .line({ connectNulls })
+    .position('x*y')
+    .shape(smooth ? 'smooth' : 'line');
 
-  return params;
-}
-
-/**
- * axis 配置
- * @param params
- */
-function axis(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
-  const { chart } = params;
+  // line style
+  if (lineStyle) {
+    geometry.style('x*y', () => {
+      return isFunction(lineStyle) ? lineStyle() : lineStyle;
+    });
+  }
 
   chart.axis(false);
+  chart.legend(false);
 
   return params;
 }
@@ -42,91 +43,22 @@ function axis(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
  */
 export function tooltip(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
   const { chart, options } = params;
-  const { tooltip = false } = options;
+  const { tooltip } = options;
 
-  if (tooltip) {
-    if (typeof tooltip === 'object') {
-      const { formatter, domStyles, position, offset, showCrosshairs } = tooltip;
-      chart.tooltip({
-        ...DEFAULT_TOOLTIP_OPTIONS,
-        showCrosshairs,
-        domStyles,
-        position,
-        offset,
-      });
-      const geometry = chart.geometries[0];
-      geometry.tooltip('x*y', (x, y) => {
-        return {
-          value: formatter(x, y),
-        };
-      });
-    } else {
-      chart.tooltip(DEFAULT_TOOLTIP_OPTIONS);
-    }
-  } else {
+  // false 则关闭
+  if (tooltip === false) {
     chart.tooltip(false);
-  }
-
-  return params;
-}
-
-/**
- * legend 配置
- * @param params
- */
-function legend(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
-  const { chart } = params;
-
-  chart.legend(false);
-
-  return params;
-}
+  } else {
+    // 是如果 object，那么传入
+    const { formatter, ...otherTooltip } = tooltip as TinyTooltipOption;
 
-/**
- * 样式
- * @param params
- */
-function style(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
-  const { chart, options } = params;
-  const { lineStyle } = options;
+    chart.tooltip(otherTooltip);
 
-  const geometry = chart.geometries[0];
-  if (lineStyle && geometry) {
-    if (isFunction(lineStyle)) {
-      geometry.style('x*y', lineStyle);
-    } else {
-      geometry.style(lineStyle);
-    }
+    chart.geometries[0].tooltip('x*y', (x, y) => ({
+      value: formatter(x, y),
+    }));
   }
-  return params;
-}
-
-/**
- * shape 的配置处理
- * @param params
- */
-function shape(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
-  const { chart, options } = params;
-  const { smooth } = options;
-
-  const lineGeometry = chart.geometries[0];
-
-  lineGeometry.shape(smooth ? 'smooth' : 'line');
-  return params;
-}
 
-/**
- * 设置全局主题配置
- * @param params
- */
-export function theme(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
-  const { chart, options } = params;
-  const { theme } = options;
-
-  // 存在主题才设置主题
-  if (theme) {
-    chart.theme(theme);
-  }
   return params;
 }
 
@@ -136,5 +68,5 @@ export function theme(params: Params<TinyLineOptions>): Params<TinyLineOptions>
  * @param options
  */
 export function adaptor(params: Params<TinyLineOptions>) {
-  return flow(field, scale({}), theme, axis, legend, tooltip, style, shape)(params);
+  return flow(geometry, scale({}), theme, tooltip, animation)(params);
 }
diff --git a/src/plots/tiny-line/constants.ts b/src/plots/tiny-line/constants.ts
index 6c571db747..36efe1a4e2 100644
--- a/src/plots/tiny-line/constants.ts
+++ b/src/plots/tiny-line/constants.ts
@@ -6,8 +6,9 @@ export const DEFAULT_TOOLTIP_OPTIONS = {
   itemTpl: '<span>{value}</span>',
   domStyles: {
     'g2-tooltip': {
-      padding: '2px',
+      padding: '2px 4px',
       fontSize: '10px',
     },
   },
+  formatter: (x: number, y: number) => y.toFixed(1),
 };
diff --git a/src/plots/tiny-line/index.ts b/src/plots/tiny-line/index.ts
index f8b0127028..61af563812 100644
--- a/src/plots/tiny-line/index.ts
+++ b/src/plots/tiny-line/index.ts
@@ -2,6 +2,7 @@ import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
 import { TinyLineOptions } from './types';
 import { adaptor } from './adaptor';
+import { DEFAULT_TOOLTIP_OPTIONS } from './constants';
 
 export { TinyLineOptions };
 
@@ -9,6 +10,14 @@ export class TinyLine extends Plot<TinyLineOptions> {
   /** 图表类型 */
   public type: string = 'tiny-line';
 
+  protected getDefaultOptions() {
+    return {
+      tooltip: {
+        ...DEFAULT_TOOLTIP_OPTIONS,
+      },
+    };
+  }
+
   /**
    * 获取 迷你折线图 的适配器
    */
diff --git a/src/plots/tiny-line/types.ts b/src/plots/tiny-line/types.ts
index fc28598dd4..a78b049396 100644
--- a/src/plots/tiny-line/types.ts
+++ b/src/plots/tiny-line/types.ts
@@ -3,7 +3,7 @@ import { ShapeStyle } from '../../types/style';
 import { TinyTooltipOption } from '../../types/tooltip';
 
 /** mini 图类型定义需要 omit 很多的 G2 Options 配置 */
-export interface TinyLineOptions extends Omit<Options, 'data'> {
+export interface TinyLineOptions extends Omit<Options, 'data' | 'tooltip' | 'legend' | 'label'> {
   /** 具体的数据 */
   readonly data: number[];
   /** 是否平滑 */
@@ -11,7 +11,7 @@ export interface TinyLineOptions extends Omit<Options, 'data'> {
   /** 是否连接空数据 */
   readonly connectNulls?: boolean;
   /** 折线extra图形样式 */
-  readonly lineStyle?: ShapeStyle | ((x?: number, y?: number) => ShapeStyle);
+  readonly lineStyle?: ShapeStyle | (() => ShapeStyle);
   /** tooltip配置 */
   readonly tooltip?: boolean | TinyTooltipOption;
 }
diff --git a/src/types/tooltip.ts b/src/types/tooltip.ts
index 11511f6668..e647882b1b 100644
--- a/src/types/tooltip.ts
+++ b/src/types/tooltip.ts
@@ -13,4 +13,6 @@ export type TinyTooltipOption = {
   readonly offset?: number;
   /** 是否显示交叉线 */
   readonly showCrosshairs?: boolean;
+  /** 是否显示 tooltip 数据点 marker */
+  readonly showMarkers?: boolean;
 };