feat: update infographic demo size

VisActor · Dec 13, 2024 · 0c58788 · 0c58788
1 parent 20a2e7e
commit 0c58788
Show file tree

Hide file tree

Showing 31 changed files with 81 additions and 85 deletions.
diff --git a/docs/assets/examples/en/infographic/bar-chart-leftRight.md b/docs/assets/examples/en/infographic/bar-chart-leftRight.md
@@ -173,9 +173,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/bar-chart-regional-sales.md b/docs/assets/examples/en/infographic/bar-chart-regional-sales.md
@@ -169,7 +169,12 @@ async function loadDSL() {
                 characterId: ['bar', '0', '1'],
                 characterActions: [
                   {
-                    action: 'appear'
+                    action: 'appear',
+                    payload: {
+                      animation: {
+                        duration: 500
+                      }
+                    }
                   }
                 ]
               }
@@ -181,7 +186,7 @@ async function loadDSL() {
   };
 }
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720 });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720, scaleX: 0.7, scaleY: 0.7 });
 const player = new VStory.Player(story);
 story.init(player);
 

diff --git a/docs/assets/examples/en/infographic/bar-hiv-chart.md b/docs/assets/examples/en/infographic/bar-hiv-chart.md
@@ -571,9 +571,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/bar-work-in-same-industry.md b/docs/assets/examples/en/infographic/bar-work-in-same-industry.md
@@ -462,9 +462,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/cat-stroke.md b/docs/assets/examples/en/infographic/cat-stroke.md
@@ -4,7 +4,7 @@ group: infographic
 title: Pictogram Infographic(Cat Stroking Guide)
 keywords: templates, visualization, pictogram, distribution
 order: 1-0
-cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/cat-stroke-guide.png
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/cat-stroke-preview.png
 ---
 
 # Pictogram Infographic: Cat Stroke Guide
@@ -234,9 +234,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/client-breakdown.md b/docs/assets/examples/en/infographic/client-breakdown.md
@@ -308,9 +308,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/line-chart-leftRight.md b/docs/assets/examples/en/infographic/line-chart-leftRight.md
@@ -266,9 +266,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/pie-chart-leftRight.md b/docs/assets/examples/en/infographic/pie-chart-leftRight.md
@@ -207,9 +207,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/pie-chart-transportation.md b/docs/assets/examples/en/infographic/pie-chart-transportation.md
@@ -221,7 +221,12 @@ async function loadDSL() {
                 characterId: ['bar', '0', '1', '2', '3', '4'],
                 characterActions: [
                   {
-                    action: 'appear'
+                    action: 'appear',
+                    payload: {
+                      animation: {
+                        duration: 500
+                      }
+                    }
                   }
                 ]
               }
@@ -233,7 +238,7 @@ async function loadDSL() {
   };
 }
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720 });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720, scaleX: 0.7, scaleY: 0.7 });
 const player = new VStory.Player(story);
 story.init(player);
 

diff --git a/docs/assets/examples/en/infographic/scatter-chart-matrix.md b/docs/assets/examples/en/infographic/scatter-chart-matrix.md
@@ -280,9 +280,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/social-media.md b/docs/assets/examples/en/infographic/social-media.md
@@ -220,9 +220,8 @@ const dsl = {
 
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/sprint-burndown.md b/docs/assets/examples/en/infographic/sprint-burndown.md
@@ -296,9 +296,8 @@ const dsl = {
 
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/unit-infographic.md b/docs/assets/examples/en/infographic/unit-infographic.md
@@ -374,7 +374,7 @@ const dsl = {
   ]
 };
 
-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, scaleX: 0.5, scaleY: 0.5 });
 const player = new VStory.Player(story);
 story.init(player);
 

diff --git a/docs/assets/examples/en/infographic/usa-cancer-map.md b/docs/assets/examples/en/infographic/usa-cancer-map.md
@@ -200,9 +200,8 @@ const dsl = {
 
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/en/infographic/venn-chart.md b/docs/assets/examples/en/infographic/venn-chart.md
@@ -358,9 +358,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/bar-chart-leftRight.md b/docs/assets/examples/zh/infographic/bar-chart-leftRight.md
@@ -173,9 +173,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/bar-chart-regional-sales.md b/docs/assets/examples/zh/infographic/bar-chart-regional-sales.md
@@ -170,7 +170,12 @@ async function loadDSL() {
                 characterId: ['bar', '0', '1'],
                 characterActions: [
                   {
-                    action: 'appear'
+                    action: 'appear',
+                    payload: {
+                      animation: {
+                        duration: 500
+                      }
+                    }
                   }
                 ]
               }
@@ -182,7 +187,7 @@ async function loadDSL() {
   };
 }
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720 });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720, scaleX: 0.7, scaleY: 0.7 });
 const player = new VStory.Player(story);
 story.init(player);
 

diff --git a/docs/assets/examples/zh/infographic/bar-hiv-chart.md b/docs/assets/examples/zh/infographic/bar-hiv-chart.md
@@ -572,9 +572,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/bar-work-in-same-industry.md b/docs/assets/examples/zh/infographic/bar-work-in-same-industry.md
@@ -463,9 +463,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/cat-stroke.md b/docs/assets/examples/zh/infographic/cat-stroke.md
@@ -4,7 +4,7 @@ group: infographic
 title: Pictogram Infographic(Cat Stroking Guide)
 keywords: templates, visualization, pictogram, distribution
 order: 1-0
-cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/cat-stroke-guide.png
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/cat-stroke-preview.png
 ---
 
 # 信息图模板-象形图: 新手撸猫指南
@@ -235,9 +235,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/client-breakdown.md b/docs/assets/examples/zh/infographic/client-breakdown.md
@@ -308,9 +308,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/line-chart-leftRight.md b/docs/assets/examples/zh/infographic/line-chart-leftRight.md
@@ -268,9 +268,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/pie-chart-leftRight.md b/docs/assets/examples/zh/infographic/pie-chart-leftRight.md
@@ -207,9 +207,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/pie-chart-transportation.md b/docs/assets/examples/zh/infographic/pie-chart-transportation.md
@@ -222,7 +222,12 @@ async function loadDSL() {
                 characterId: ['bar', '0', '1', '2', '3', '4'],
                 characterActions: [
                   {
-                    action: 'appear'
+                    action: 'appear',
+                    payload: {
+                      animation: {
+                        duration: 500
+                      }
+                    }
                   }
                 ]
               }
@@ -234,7 +239,7 @@ async function loadDSL() {
   };
 }
 
-const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720 });
+const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720, scaleX: 0.7, scaleY: 0.7 });
 const player = new VStory.Player(story);
 story.init(player);
 

diff --git a/docs/assets/examples/zh/infographic/scatter-chart-matrix.md b/docs/assets/examples/zh/infographic/scatter-chart-matrix.md
@@ -281,9 +281,8 @@ const dsl = {
 };
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/social-media.md b/docs/assets/examples/zh/infographic/social-media.md
@@ -220,9 +220,8 @@ const dsl = {
 
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/sprint-burndown.md b/docs/assets/examples/zh/infographic/sprint-burndown.md
@@ -296,9 +296,8 @@ const dsl = {
 
 const story = new VStory.Story(dsl, {
   dom: CONTAINER_ID,
-  background: '#ebecf0',
-  scaleX: 0.5,
-  scaleY: 0.5
+  scaleX: 0.7,
+  scaleY: 0.7
 });
 const player = new VStory.Player(story);
 story.init(player);

diff --git a/docs/assets/examples/zh/infographic/unit-infographic.md b/docs/assets/examples/zh/infographic/unit-infographic.md
@@ -374,7 +374,7 @@ const dsl = {
   ]
 };
 
-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, scaleX: 0.5, scaleY: 0.5 });
 const player = new VStory.Player(story);
 story.init(player);