From 919657ac88afe44e99f037dca91c56cc6136f69b Mon Sep 17 00:00:00 2001
From: zhouxinyu <zhouxinyu12138@gmail.com>
Date: Wed, 25 Dec 2024 16:31:05 +0800
Subject: [PATCH] feat: make demo fit container size

---
 docs/assets/examples/en/animate/bar-bounce.md               | 2 +-
 docs/assets/examples/en/animate/bar-leap.md                 | 2 +-
 docs/assets/examples/en/animate/pie-leap.md                 | 2 +-
 docs/assets/examples/en/arrange/bar-line-arrange.md         | 2 +-
 docs/assets/examples/en/arrange/line-arrange.md             | 2 +-
 docs/assets/examples/en/arrange/vchart-arrange.md           | 2 +-
 docs/assets/examples/en/character/balloon-bar.md            | 2 +-
 docs/assets/examples/en/character/clipped-image.md          | 2 +-
 docs/assets/examples/en/character/dynamic-line.md           | 2 +-
 docs/assets/examples/en/character/poptip.md                 | 2 +-
 docs/assets/examples/en/character/ranking-bar.md            | 2 +-
 docs/assets/examples/en/character/single-pie.md             | 2 +-
 docs/assets/examples/en/character/story-label-item.md       | 2 +-
 docs/assets/examples/en/character/timeline.md               | 2 +-
 docs/assets/examples/en/character/unit.md                   | 2 +-
 docs/assets/examples/en/character/vchart.md                 | 2 +-
 docs/assets/examples/en/character/vgraphic.md               | 2 +-
 docs/assets/examples/en/character/wave-scatter.md           | 2 +-
 .../assets/examples/en/templates/unit-visualize-template.md | 2 +-
 docs/assets/examples/en/works-show/annotation-show.md       | 2 +-
 docs/assets/examples/en/works-show/chart-join.md            | 2 +-
 docs/assets/examples/en/works-show/national-memorial.md     | 2 +-
 docs/assets/examples/en/works-show/unit-gun-death.md        | 2 +-
 docs/assets/examples/en/works-show/visualize-history.md     | 2 +-
 docs/assets/examples/zh/animate/bar-bounce.md               | 2 +-
 docs/assets/examples/zh/animate/bar-leap.md                 | 2 +-
 docs/assets/examples/zh/animate/pie-leap.md                 | 2 +-
 docs/assets/examples/zh/arrange/bar-line-arrange.md         | 2 +-
 docs/assets/examples/zh/arrange/line-arrange.md             | 2 +-
 docs/assets/examples/zh/arrange/vchart-arrange.md           | 2 +-
 docs/assets/examples/zh/character/balloon-bar.md            | 2 +-
 docs/assets/examples/zh/character/clipped-image.md          | 2 +-
 docs/assets/examples/zh/character/dynamic-line.md           | 4 ++--
 docs/assets/examples/zh/character/poptip.md                 | 2 +-
 docs/assets/examples/zh/character/ranking-bar.md            | 2 +-
 docs/assets/examples/zh/character/single-pie.md             | 2 +-
 docs/assets/examples/zh/character/story-label-item.md       | 2 +-
 docs/assets/examples/zh/character/timeline.md               | 2 +-
 docs/assets/examples/zh/character/unit.md                   | 2 +-
 docs/assets/examples/zh/character/vchart.md                 | 2 +-
 docs/assets/examples/zh/character/vgraphic.md               | 2 +-
 docs/assets/examples/zh/character/wave-scatter.md           | 2 +-
 .../assets/examples/zh/templates/unit-visualize-template.md | 6 +++---
 docs/assets/examples/zh/works-show/annotation-show.md       | 2 +-
 docs/assets/examples/zh/works-show/chart-join.md            | 2 +-
 docs/assets/examples/zh/works-show/national-memorial.md     | 2 +-
 docs/assets/examples/zh/works-show/unit-gun-death.md        | 2 +-
 docs/assets/examples/zh/works-show/visualize-history.md     | 2 +-
 48 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/docs/assets/examples/en/animate/bar-bounce.md b/docs/assets/examples/en/animate/bar-bounce.md
index c35c1ab3..99fd6b16 100644
--- a/docs/assets/examples/en/animate/bar-bounce.md
+++ b/docs/assets/examples/en/animate/bar-bounce.md
@@ -91,7 +91,7 @@ const dsl = {
   ]
 }
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/animate/bar-leap.md b/docs/assets/examples/en/animate/bar-leap.md
index d9fd9ffa..07229b31 100644
--- a/docs/assets/examples/en/animate/bar-leap.md
+++ b/docs/assets/examples/en/animate/bar-leap.md
@@ -91,7 +91,7 @@ const dsl = {
   ]
 }
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/animate/pie-leap.md b/docs/assets/examples/en/animate/pie-leap.md
index d3d83f08..c1531b98 100644
--- a/docs/assets/examples/en/animate/pie-leap.md
+++ b/docs/assets/examples/en/animate/pie-leap.md
@@ -92,7 +92,7 @@ const dsl = {
   ]
 }
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/arrange/bar-line-arrange.md b/docs/assets/examples/en/arrange/bar-line-arrange.md
index 97dd426e..90a140da 100644
--- a/docs/assets/examples/en/arrange/bar-line-arrange.md
+++ b/docs/assets/examples/en/arrange/bar-line-arrange.md
@@ -192,7 +192,7 @@ const dsl = {
   ]
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/arrange/line-arrange.md b/docs/assets/examples/en/arrange/line-arrange.md
index a29dfa0a..47a5fba6 100644
--- a/docs/assets/examples/en/arrange/line-arrange.md
+++ b/docs/assets/examples/en/arrange/line-arrange.md
@@ -185,7 +185,7 @@ const dsl = {
   ]
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/arrange/vchart-arrange.md b/docs/assets/examples/en/arrange/vchart-arrange.md
index e2ab2835..f51500f4 100644
--- a/docs/assets/examples/en/arrange/vchart-arrange.md
+++ b/docs/assets/examples/en/arrange/vchart-arrange.md
@@ -300,7 +300,7 @@ const dsl = {
   ]
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/character/balloon-bar.md b/docs/assets/examples/en/character/balloon-bar.md
index db60733c..673b5668 100644
--- a/docs/assets/examples/en/character/balloon-bar.md
+++ b/docs/assets/examples/en/character/balloon-bar.md
@@ -165,7 +165,7 @@ const dsl = {
   ],
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/character/clipped-image.md b/docs/assets/examples/en/character/clipped-image.md
index afe9a1bb..46c6ac5a 100644
--- a/docs/assets/examples/en/character/clipped-image.md
+++ b/docs/assets/examples/en/character/clipped-image.md
@@ -16,7 +16,7 @@ You can achieve image clipping effects under various shapes through the backgrou
 ```javascript livedemo template=vstory
 VStory.registerAll();
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 700, height: 500, scaleX: 'auto', scaleY: 'auto', background: '#18253A' });
 const player = new VStory.Player(story);
 story.init(player);
 const clipPath = [
diff --git a/docs/assets/examples/en/character/dynamic-line.md b/docs/assets/examples/en/character/dynamic-line.md
index 6045bf25..532d24eb 100644
--- a/docs/assets/examples/en/character/dynamic-line.md
+++ b/docs/assets/examples/en/character/dynamic-line.md
@@ -43,7 +43,7 @@ const data = [
   { year: 'September 13, 2022', name: 'iPhone 16', price: 5999, bg: 'iphone16.png' }
 ].map(item => ({ ...item, bg: `https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/demo/${item.bg}` }));
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/character/poptip.md b/docs/assets/examples/en/character/poptip.md
index 103c6062..a293d847 100644
--- a/docs/assets/examples/en/character/poptip.md
+++ b/docs/assets/examples/en/character/poptip.md
@@ -22,7 +22,7 @@ VStory.registerAll();
 VStory.registerPopTip();
 VStory.registerPopTipAction();
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 400, height: 300, scaleX: 'auto', scaleY: 'auto', background: '#18253A' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/character/ranking-bar.md b/docs/assets/examples/en/character/ranking-bar.md
index 0b347f18..9a673bf3 100644
--- a/docs/assets/examples/en/character/ranking-bar.md
+++ b/docs/assets/examples/en/character/ranking-bar.md
@@ -158,7 +158,7 @@ async function loadDSL() {
 
 const dsl = await loadDSL();
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/character/single-pie.md b/docs/assets/examples/en/character/single-pie.md
index eb2e14e2..2b51436e 100644
--- a/docs/assets/examples/en/character/single-pie.md
+++ b/docs/assets/examples/en/character/single-pie.md
@@ -19,7 +19,7 @@ VStory.registerAll();
 VStory.registerSinglePie();
 VStory.registerSinglePieAction();
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 500, height: 350, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/character/story-label-item.md b/docs/assets/examples/en/character/story-label-item.md
index 82a26c9e..0dd91a40 100644
--- a/docs/assets/examples/en/character/story-label-item.md
+++ b/docs/assets/examples/en/character/story-label-item.md
@@ -24,7 +24,7 @@ VStory.registerAll();
 VStory.registerLabelItem();
 VStory.registerLabelItemAction();
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 750, height: 450, scaleX: 'auto', scaleY: 'auto', background: '#18253A' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/character/timeline.md b/docs/assets/examples/en/character/timeline.md
index d6476c69..2e102dd8 100644
--- a/docs/assets/examples/en/character/timeline.md
+++ b/docs/assets/examples/en/character/timeline.md
@@ -94,7 +94,7 @@ const dsl = {
   ],
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 300, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/character/unit.md b/docs/assets/examples/en/character/unit.md
index 7936ec84..a9997b9f 100644
--- a/docs/assets/examples/en/character/unit.md
+++ b/docs/assets/examples/en/character/unit.md
@@ -151,7 +151,7 @@ const dsl = {
   ]
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/character/vchart.md b/docs/assets/examples/en/character/vchart.md
index 151e3c4c..e76f01b4 100644
--- a/docs/assets/examples/en/character/vchart.md
+++ b/docs/assets/examples/en/character/vchart.md
@@ -162,7 +162,7 @@ const dsl = {
   ]
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/character/vgraphic.md b/docs/assets/examples/en/character/vgraphic.md
index 68913aea..c642abd1 100644
--- a/docs/assets/examples/en/character/vgraphic.md
+++ b/docs/assets/examples/en/character/vgraphic.md
@@ -63,7 +63,7 @@ const characterList = [
   { type:'Shape', options: shape, effect: 'clipRange' }
 ]
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/character/wave-scatter.md b/docs/assets/examples/en/character/wave-scatter.md
index d047ffd2..89ecf6c5 100644
--- a/docs/assets/examples/en/character/wave-scatter.md
+++ b/docs/assets/examples/en/character/wave-scatter.md
@@ -86,7 +86,7 @@ const dsl = {
   ],
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/templates/unit-visualize-template.md b/docs/assets/examples/en/templates/unit-visualize-template.md
index f57ac84e..43cfc984 100644
--- a/docs/assets/examples/en/templates/unit-visualize-template.md
+++ b/docs/assets/examples/en/templates/unit-visualize-template.md
@@ -152,7 +152,7 @@ const spec = {
 }
 const dsl = VStory.createUnitTemplate(spec);
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', scaleX: 0.35, scaleY: 0.35 });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', width: 1920, height: 1080, scaleX: 'auto', scaleY: 'auto' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/works-show/annotation-show.md b/docs/assets/examples/en/works-show/annotation-show.md
index fb2cd902..0fbb2db2 100644
--- a/docs/assets/examples/en/works-show/annotation-show.md
+++ b/docs/assets/examples/en/works-show/annotation-show.md
@@ -23,7 +23,7 @@ VStory.registerLabelItemAction();
 VStory.registerPopTip();
 VStory.registerPopTipAction();
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 2000 / 2, height: 800 / 2, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1080, height: 720, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/works-show/chart-join.md b/docs/assets/examples/en/works-show/chart-join.md
index 293655db..c0b0d353 100644
--- a/docs/assets/examples/en/works-show/chart-join.md
+++ b/docs/assets/examples/en/works-show/chart-join.md
@@ -77,7 +77,7 @@ const getChartSpec = (i, showLeftAxis) => {
   };
 }
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 2000 / 2, height: 800 / 2, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 2000, height: 800, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/works-show/national-memorial.md b/docs/assets/examples/en/works-show/national-memorial.md
index 9d011bd0..18f52d11 100644
--- a/docs/assets/examples/en/works-show/national-memorial.md
+++ b/docs/assets/examples/en/works-show/national-memorial.md
@@ -1589,7 +1589,7 @@ const dsl = {
   ]
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: width / 2, height: height / 2, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width, height, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/works-show/unit-gun-death.md b/docs/assets/examples/en/works-show/unit-gun-death.md
index cfdefcad..3c60b9b2 100644
--- a/docs/assets/examples/en/works-show/unit-gun-death.md
+++ b/docs/assets/examples/en/works-show/unit-gun-death.md
@@ -356,7 +356,7 @@ const dsl = VStory.createUnitTemplate(spec);
 console.log(dsl);
 
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', width: 1550, height: 800, scaleX: 'auto', scaleY: 'auto' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/en/works-show/visualize-history.md b/docs/assets/examples/en/works-show/visualize-history.md
index 8d780964..6290c095 100644
--- a/docs/assets/examples/en/works-show/visualize-history.md
+++ b/docs/assets/examples/en/works-show/visualize-history.md
@@ -13690,7 +13690,7 @@ const dsl = {
     ]
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 1280, height: 720, background: '#ebecf0', scaleX: 'auto', scaleY: 'auto' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/animate/bar-bounce.md b/docs/assets/examples/zh/animate/bar-bounce.md
index eb3443e5..f57c27a6 100644
--- a/docs/assets/examples/zh/animate/bar-bounce.md
+++ b/docs/assets/examples/zh/animate/bar-bounce.md
@@ -91,7 +91,7 @@ const dsl = {
   ]
 }
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/animate/bar-leap.md b/docs/assets/examples/zh/animate/bar-leap.md
index b57e195f..3da898c6 100644
--- a/docs/assets/examples/zh/animate/bar-leap.md
+++ b/docs/assets/examples/zh/animate/bar-leap.md
@@ -91,7 +91,7 @@ const dsl = {
   ]
 }
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/animate/pie-leap.md b/docs/assets/examples/zh/animate/pie-leap.md
index e368ef9f..5739caf6 100644
--- a/docs/assets/examples/zh/animate/pie-leap.md
+++ b/docs/assets/examples/zh/animate/pie-leap.md
@@ -92,7 +92,7 @@ const dsl = {
   ]
 }
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/arrange/bar-line-arrange.md b/docs/assets/examples/zh/arrange/bar-line-arrange.md
index 57d52078..b3dcea88 100644
--- a/docs/assets/examples/zh/arrange/bar-line-arrange.md
+++ b/docs/assets/examples/zh/arrange/bar-line-arrange.md
@@ -192,7 +192,7 @@ const dsl = {
   ]
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/arrange/line-arrange.md b/docs/assets/examples/zh/arrange/line-arrange.md
index 7900141b..aa4337a5 100644
--- a/docs/assets/examples/zh/arrange/line-arrange.md
+++ b/docs/assets/examples/zh/arrange/line-arrange.md
@@ -185,7 +185,7 @@ const dsl = {
   ]
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/arrange/vchart-arrange.md b/docs/assets/examples/zh/arrange/vchart-arrange.md
index 8e12dcb4..8ae981c1 100644
--- a/docs/assets/examples/zh/arrange/vchart-arrange.md
+++ b/docs/assets/examples/zh/arrange/vchart-arrange.md
@@ -300,7 +300,7 @@ const dsl = {
   ]
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/character/balloon-bar.md b/docs/assets/examples/zh/character/balloon-bar.md
index 30a5d1a1..132af1a8 100644
--- a/docs/assets/examples/zh/character/balloon-bar.md
+++ b/docs/assets/examples/zh/character/balloon-bar.md
@@ -165,7 +165,7 @@ const dsl = {
   ],
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/character/clipped-image.md b/docs/assets/examples/zh/character/clipped-image.md
index 8be6bb65..5811a1b5 100644
--- a/docs/assets/examples/zh/character/clipped-image.md
+++ b/docs/assets/examples/zh/character/clipped-image.md
@@ -17,7 +17,7 @@ cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/clipped-image.
 // 注册所有需要的内容
 VStory.registerAll();
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 700, height: 500, scaleX: 'auto', scaleY: 'auto', background: '#18253A' });
 const player = new VStory.Player(story);
 story.init(player);
 const clipPath = [
diff --git a/docs/assets/examples/zh/character/dynamic-line.md b/docs/assets/examples/zh/character/dynamic-line.md
index 0dc3a3af..edadf2ec 100644
--- a/docs/assets/examples/zh/character/dynamic-line.md
+++ b/docs/assets/examples/zh/character/dynamic-line.md
@@ -43,7 +43,7 @@ const data = [
   { year: '2022年9月13日', name: 'iPhone 16', price: 5999, bg: 'iphone16.png' }
 ].map(item => ({ ...item, bg: `https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/demo/${item.bg}` }));
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
@@ -54,7 +54,7 @@ story.addCharacter(
     zIndex: 1,
     position: {
       top: 50,
-      left: 100,
+      left: 50,
       width: 500,
       height: 300
     },
diff --git a/docs/assets/examples/zh/character/poptip.md b/docs/assets/examples/zh/character/poptip.md
index 81800d2b..08bfcfae 100644
--- a/docs/assets/examples/zh/character/poptip.md
+++ b/docs/assets/examples/zh/character/poptip.md
@@ -22,7 +22,7 @@ VStory.registerAll();
 VStory.registerPopTip();
 VStory.registerPopTipAction();
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 400, height: 300, scaleX: 'auto', scaleY: 'auto', background: '#18253A' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/character/ranking-bar.md b/docs/assets/examples/zh/character/ranking-bar.md
index 16bd4622..2a4e367a 100644
--- a/docs/assets/examples/zh/character/ranking-bar.md
+++ b/docs/assets/examples/zh/character/ranking-bar.md
@@ -158,7 +158,7 @@ async function loadDSL() {
 
 const dsl = await loadDSL();
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/character/single-pie.md b/docs/assets/examples/zh/character/single-pie.md
index 3e632076..a01f7f6b 100644
--- a/docs/assets/examples/zh/character/single-pie.md
+++ b/docs/assets/examples/zh/character/single-pie.md
@@ -20,7 +20,7 @@ VStory.registerAll();
 VStory.registerSinglePie();
 VStory.registerSinglePieAction();
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 500, height: 350, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/character/story-label-item.md b/docs/assets/examples/zh/character/story-label-item.md
index 8c4ba716..68340453 100644
--- a/docs/assets/examples/zh/character/story-label-item.md
+++ b/docs/assets/examples/zh/character/story-label-item.md
@@ -24,7 +24,7 @@ VStory.registerAll();
 VStory.registerLabelItem();
 VStory.registerLabelItemAction();
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 750, height: 450, scaleX: 'auto', scaleY: 'auto', background: '#18253A' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/character/timeline.md b/docs/assets/examples/zh/character/timeline.md
index d69234b5..ad31ece2 100644
--- a/docs/assets/examples/zh/character/timeline.md
+++ b/docs/assets/examples/zh/character/timeline.md
@@ -94,7 +94,7 @@ const dsl = {
   ],
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 300, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/character/unit.md b/docs/assets/examples/zh/character/unit.md
index 2a164ada..b74e569d 100644
--- a/docs/assets/examples/zh/character/unit.md
+++ b/docs/assets/examples/zh/character/unit.md
@@ -151,7 +151,7 @@ const dsl = {
   ]
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/character/vchart.md b/docs/assets/examples/zh/character/vchart.md
index beda0b7c..880675d8 100644
--- a/docs/assets/examples/zh/character/vchart.md
+++ b/docs/assets/examples/zh/character/vchart.md
@@ -162,7 +162,7 @@ const dsl = {
   ]
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/character/vgraphic.md b/docs/assets/examples/zh/character/vgraphic.md
index 7605194b..16e63239 100644
--- a/docs/assets/examples/zh/character/vgraphic.md
+++ b/docs/assets/examples/zh/character/vgraphic.md
@@ -63,7 +63,7 @@ const characterList = [
   { type:'Shape', options: shape, effect: 'clipRange' }
 ]
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/character/wave-scatter.md b/docs/assets/examples/zh/character/wave-scatter.md
index 536cc968..716325f1 100644
--- a/docs/assets/examples/zh/character/wave-scatter.md
+++ b/docs/assets/examples/zh/character/wave-scatter.md
@@ -86,7 +86,7 @@ const dsl = {
   ],
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/templates/unit-visualize-template.md b/docs/assets/examples/zh/templates/unit-visualize-template.md
index cda9590b..f6bf1167 100644
--- a/docs/assets/examples/zh/templates/unit-visualize-template.md
+++ b/docs/assets/examples/zh/templates/unit-visualize-template.md
@@ -32,8 +32,8 @@ data.sort((d1, d2) => {
 });
 const spec = {
   layout: {
-    width: 1550,
-    height: 800,
+    width: 1920,
+    height: 1080,
     viz: {
       padding: {
         top: 0
@@ -152,7 +152,7 @@ const spec = {
 }
 const dsl = VStory.createUnitTemplate(spec);
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', scaleX: 0.35, scaleY: 0.35 });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', width: 1920, height: 1080, scaleX: 'auto', scaleY: 'auto' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/works-show/annotation-show.md b/docs/assets/examples/zh/works-show/annotation-show.md
index c20f985a..5981b9d7 100644
--- a/docs/assets/examples/zh/works-show/annotation-show.md
+++ b/docs/assets/examples/zh/works-show/annotation-show.md
@@ -23,7 +23,7 @@ VStory.registerLabelItemAction();
 VStory.registerPopTip();
 VStory.registerPopTipAction();
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 2000 / 2, height: 800 / 2, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1080, height: 720, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/works-show/chart-join.md b/docs/assets/examples/zh/works-show/chart-join.md
index a5057bb0..067d5080 100644
--- a/docs/assets/examples/zh/works-show/chart-join.md
+++ b/docs/assets/examples/zh/works-show/chart-join.md
@@ -77,7 +77,7 @@ const getChartSpec = (i, showLeftAxis) => {
   };
 }
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 2000 / 2, height: 800 / 2, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 2000, height: 800, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/works-show/national-memorial.md b/docs/assets/examples/zh/works-show/national-memorial.md
index 5a6e0246..10a7605d 100644
--- a/docs/assets/examples/zh/works-show/national-memorial.md
+++ b/docs/assets/examples/zh/works-show/national-memorial.md
@@ -1589,7 +1589,7 @@ const dsl = {
   ]
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: width / 2, height: height / 2, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width, height, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/works-show/unit-gun-death.md b/docs/assets/examples/zh/works-show/unit-gun-death.md
index 57e76b34..5fcf0d2d 100644
--- a/docs/assets/examples/zh/works-show/unit-gun-death.md
+++ b/docs/assets/examples/zh/works-show/unit-gun-death.md
@@ -356,7 +356,7 @@ const dsl = VStory.createUnitTemplate(spec);
 console.log(dsl);
 
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', width: 1550, height: 800, scaleX: 'auto', scaleY: 'auto' });
 const player = new VStory.Player(story);
 story.init(player);
 
diff --git a/docs/assets/examples/zh/works-show/visualize-history.md b/docs/assets/examples/zh/works-show/visualize-history.md
index b6950295..026cdc6f 100644
--- a/docs/assets/examples/zh/works-show/visualize-history.md
+++ b/docs/assets/examples/zh/works-show/visualize-history.md
@@ -13690,7 +13690,7 @@ const dsl = {
     ]
 };
 
-const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 });
+const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 1280, height: 720, background: '#ebecf0', scaleX: 'auto', scaleY: 'auto' });
 const player = new VStory.Player(story);
 story.init(player);