feat(demo): add pie / bar chart demo

docs/assets/examples/en/infographic/bar-chart-leftRight.md

@@ -0,0 +1,164 @@
+---
+category: examples
+group: infographic
+title: Bar Chart Infographic(Left Right Layout)
+keywords: templates, visualization, bar, left-right, comparison, horizon
+order: 1-0
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/singleArea-leftRight.png
+---
+
+# Bar Chart Infographic(Left-right Layout)
+
+## Demo Code
+
+```javascript livedemo template=vstory
+VStory.registerAll();
+const dsl = {
+  acts: [
+    {
+      id: 'defaultAct',
+      scenes: [
+        {
+          id: 'defaultScene',
+          actions: [
+            {
+              characterId: ['0', '1', '2', 'text-1', 'text-2'],
+              characterActions: [
+                {
+                  action: 'appear'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  characters: [
+    {
+      id: '0',
+      type: 'Image',
+      zIndex: 0,
+      position: {
+        x: 800,
+        y: 0,
+        width: 480,
+        height: 720
+      },
+      options: {
+        graphic: {
+          image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/resource/cereal.jpeg'
+        }
+      }
+    },
+    {
+      id: '1',
+      type: 'VChart',
+      zIndex: 0,
+      position: {
+        x: 0,
+        y: 0,
+        width: 800,
+        height: 720
+      },
+      options: {
+        spec: {
+          type: 'bar',
+          data: [
+            {
+              id: 'barData',
+              values: [
+                { type: 'Lucky Charms', energy: 555 },
+                { type: 'Frosted Flaked', energy: 780 },
+                { type: 'Fruit Loops', energy: 450 },
+                { type: 'Special K', energy: 500 },
+                { type: 'Honey Nut Cheerios', energy: 325 },
+                { type: `Reese's Puffs`, energy: 150 }
+              ]
+            }
+          ],
+          xField: 'type',
+          yField: 'energy',
+          seriesField: 'type',
+          color: ['#92CF9D', '#FAAA69', '#9095ca', '#b3d6fa', '#ef737a', '#fddb79'],
+          label: {},
+          legends: {
+            visible: true,
+            position: 'start',
+            item: {
+              padding: [4, 16, 0, 10],
+              shape: {
+                style: {
+                  size: 24
+                }
+              },
+              label: {
+                style: {
+                  fontSize: 24
+                }
+              }
+            }
+          },
+          axes: [
+            { orient: 'bottom', visible: false },
+            { orient: 'left', visible: false }
+          ]
+        }
+      }
+    },
+    {
+      id: 'text-1',
+      type: 'Text',
+      zIndex: 0,
+      position: {
+        x: 1040,
+        y: 20,
+        width: 600,
+        height: 200
+      },
+      options: {
+        graphic: {
+          text: 'READY-TO-EAT',
+          textAlign: 'center',
+          fontSize: 42,
+          fontWeight: 'bold',
+          fill: '#5A3E36'
+        }
+      }
+    },
+    {
+      id: 'text-2',
+      type: 'Text',
+      zIndex: 0,
+      position: {
+        x: 1040,
+        y: 100,
+        width: 600,
+        height: 200
+      },
+      options: {
+        graphic: {
+          text: 'CEREAL SALES',
+          textAlign: 'center',
+          fontSize: 42,
+          fontWeight: 'bold',
+          fill: '#FF8C00'
+        }
+      }
+    }
+  ]
+};
+const story = new VStory.Story(dsl, {
+  dom: CONTAINER_ID,
+  background: '#ebecf0',
+  scaleX: 0.5,
+  scaleY: 0.5
+});
+const player = new VStory.Player(story);
+story.init(player);
+
+player.play(-1);
+
+window['story'] = story;
+window['vstory'] = story;
+```

docs/assets/examples/en/infographic/pie-chart-leftRight.md

@@ -0,0 +1,216 @@
+---
+category: examples
+group: infographic
+title: Pie Chart Infographic(Left Right Layout)
+keywords: templates, visualization, pie, left-right, comparison, horizon
+order: 1-0
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/singleArea-leftRight.png
+---
+
+# Pie Chart Infographic(Left-right Layout)
+
+## Demo Code
+
+```javascript livedemo template=vstory
+VStory.registerAll();
+const dsl = {
+  acts: [
+    {
+      id: 'defaultAct',
+      scenes: [
+        {
+          id: 'defaultScene',
+          actions: [
+            {
+              characterId: ['0', '1', '2', 'bag', 'explosion', 'text-1', 'text-2'],
+              characterActions: [
+                {
+                  action: 'appear'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  characters: [
+    {
+      id: '0',
+      type: 'Image',
+      zIndex: 0,
+      position: {
+        x: 0,
+        y: 0,
+        width: 480,
+        height: 720
+      },
+      options: {
+        graphic: {
+          image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/resource/travel.jpeg'
+        }
+      }
+    },
+    {
+      id: '1',
+      type: 'VChart',
+      zIndex: 0,
+      position: {
+        x: 480,
+        y: 280,
+        width: 800,
+        height: 420
+      },
+      options: {
+        spec: {
+          type: 'pie',
+          data: [
+            {
+              id: 'id0',
+              values: [
+                { destination: 'Maladives', value: '20' },
+                { destination: 'Indonesia', value: '10' },
+                { destination: 'USA', value: '22' },
+                { destination: 'South Africa', value: '15' },
+                { destination: 'Turkey', value: '17' },
+                { destination: 'Spain', value: '13' }
+              ]
+            }
+          ],
+          outerRadius: 0.9,
+          valueField: 'value',
+          categoryField: 'destination',
+          color: ['#dbdbdb', '#fdbd95', '#293040', '#ef865e', '#7a6c5c', '#af9c85'],
+          legends: {
+            visible: true,
+            orient: 'left',
+            item: {
+              padding: 10,
+              shape: {
+                space: 50,
+                style: {
+                  symbolType:
+                    'M932.010667 113.152l-32.824889-31.914667c0 0-60.245333-19.512889-101.944889 22.869333-70.428444 71.566222-164.864 167.651556-164.864 167.651556L168.96 204.8 110.705778 258.161778l343.552 199.111111-125.838222 123.505778-211.000889 14.222222-40.561778 14.677333 216.291556 119.694222 115.427556 217.713778 15.985778-40.96 13.368889-202.638222c0 0 354.929778-360.903111 494.250667-502.499556C966.087111 166.343111 932.010667 113.152 932.010667 113.152L932.010667 113.152zM580.551111 584.305778l171.576889 321.137778 45.454222-51.427556-47.217778-425.358222L580.551111 584.305778 580.551111 584.305778zM580.551111 584.305778',
+                  size: 28
+                }
+              },
+              label: {
+                style: {
+                  fontSize: 24,
+                  textBaseline: 'top'
+                }
+              }
+            }
+          },
+          label: {
+            visible: true,
+            position: 'inside',
+            offsetRadius: -40,
+            rotate: false,
+            formatMethod: (label, data) => {
+              return {
+                type: 'rich',
+                text: [
+                  {
+                    text: `${data.value}%`,
+                    fill: '#fff',
+                    fontSize: 16,
+                    fontWeight: 500,
+                    stroke: false
+                  }
+                ]
+              };
+            }
+          }
+        }
+      }
+    },
+    {
+      id: 'bag',
+      type: 'Shape',
+      zIndex: 0,
+      position: {
+        x: 1200,
+        y: 620,
+        width: 48,
+        height: 48
+      },
+      options: {
+        graphic: {
+          fill: '#fff',
+          symbolType: `<svg t="1733917939459" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5336" width="200" height="200"><path d="M541.071968 841.779707v-51.372357h-58.14495v51.372357H357.943255c-153.867659 0-279.042028-125.21695-279.042027-279.082582V425.799477c0-21.751382 17.667549-39.398653 39.397639-39.398653H905.678828c21.7088 0 39.418931 17.647271 39.41893 39.398653v136.897648c0 35.88461-6.855731 70.966242-20.396863 104.396293l-0.868879 2.115929c-43.459168 104.863683-144.513774 172.571374-257.797576 172.571374H541.071968z" fill="#E3DDD5" p-id="5337"></path><path d="M265.60583 1012.912412c-49.066836 0-94.64396-19.635453-128.285909-55.350749-33.66324-35.674741-50.632238-82.308309-47.733608-131.312285L99.446115 658.50297l34.213766 51.797165c50.082725 75.832776 133.913853 121.11284 224.283374 121.112839h124.983763v51.372357h58.14495v-51.372357h124.963485c90.369521 0 174.199636-45.238495 224.304666-121.070257l34.213766-51.797165 9.859802 167.703826c2.899644 48.962408-14.049077 95.59699-47.712317 131.312285-33.685545 35.673727-79.240364 55.351762-128.3072 55.351763H265.60583z" fill="#C1A290" p-id="5338"></path><path d="M472.601853 780.081172h78.79528v113.030337h-78.79528z" fill="#E5BE7B" p-id="5339"></path><path d="M546.214273 904.199097h-68.448823c-8.972673 0-16.25017-7.278511-16.250171-16.25017v-102.704159c0-8.971659 7.278511-16.251184 16.250171-16.251184h68.447809c8.971659 0 16.25017 7.279525 16.250171 16.251184v102.704159c0 8.972673-7.278511 16.25017-16.250171 16.25017z m-52.199667-32.500341h35.949497v-70.203817h-35.949497v70.203817z" fill="#826A5D" p-id="5340"></path><path d="M666.035453 852.867295H546.213259c-8.970646 0-16.249156-7.278511-16.249156-16.249156 0-8.971659 7.278511-16.25017 16.249156-16.250171h119.822194c142.06023 0 257.650566-115.590337 257.650567-257.670843V425.799477c0-9.923675-8.082503-17.985901-18.006178-17.985901H118.298867c-9.913537 0-17.985901 8.062226-17.985901 17.985901v136.897648c0 142.081521 115.570059 257.670844 257.630289 257.670843h119.822195c8.970646 0 16.249156 7.279525 16.249156 16.250171 0 8.970646-7.278511 16.249156-16.249156 16.249156H357.943255C197.960998 852.867295 67.81364 722.698646 67.81364 562.697125V425.799477c0-27.844689 22.649663-50.485228 50.484213-50.485227h787.381989c27.844689 0 50.506519 22.639525 50.506518 50.485227v136.897648c0 160.001521-130.148372 290.17017-290.150907 290.17017z" fill="#826A5D" p-id="5341"></path><path d="M758.39417 1024H265.60583c-52.157085 0-100.58823-20.905822-136.35726-58.842487-35.779168-37.937679-53.807651-87.513473-50.739707-139.563089l9.459327-160.849109c0.517069-8.950368 8.029782-15.89025 17.169743-15.276864 8.960507 0.529236 15.79596 8.230527 15.265711 17.180896l-9.457299 160.849108c-2.529584 43.037402 12.367081 84.000444 41.946487 115.357149 29.570281 31.37901 69.601584 48.645069 112.712998 48.645069h492.787326c43.101275 0 83.133592-17.286337 112.714012-48.645069 29.579406-31.356705 44.453766-72.341038 41.936349-115.357149l-9.479604-161.145156c-0.550527-8.950368 6.305204-16.652673 15.255572-17.180895 8.71718-0.762424 16.651659 6.326495 17.160618 15.276863l9.47859 161.144143c3.089236 52.051644-14.938234 101.604119-50.696111 139.542812-35.780182 37.95897-84.211327 58.863778-136.368412 58.863778zM871.487366 407.81459c-4.527905 0-9.033505-1.883754-12.250487-5.543794L551.291691 50.357481c-19.826059-22.682107-58.757323-22.682107-78.584396 0L164.763121 402.270796c-5.913853 6.749275-16.165006 7.405244-22.936586 1.52282-6.749275-5.902701-7.436673-16.186297-1.52282-22.935572L448.247889 28.944729A84.708119 84.708119 0 0 1 511.999493 0a84.723327 84.723327 0 0 1 63.751604 28.945743l307.945188 351.911287c5.903715 6.750289 5.226455 17.032871-1.523834 22.936586a16.246115 16.246115 0 0 1-10.686099 4.020974z" fill="#826A5D" p-id="5342"></path></svg>`
+        }
+      }
+    },
+    {
+      id: 'explosion',
+      type: 'Shape',
+      zIndex: 0,
+      position: {
+        x: 1128,
+        y: 380,
+        width: 32,
+        height: 32
+      },
+      options: {
+        graphic: {
+          fill: '#fff',
+          symbolType: `<svg t="1733918277441" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19402" width="200" height="200"><path d="M572.2368 0l13.2864 364.6208L794.5728 192l-100.992 268.6208 296.7552-51.3536L768 594.5344l235.6224 25.2416-222.336 122.9568L1024 960l-323.328-153.2672 33.664 160-182.4768-147.3536-26.5728 121.2416-100.992-121.2416L289.6384 1024l13.312-262.7328-282.5728 19.3536 209.0496-115.3536-141.7216-50.5344 127.5392-64L0 352l296.7552 108.6208-14.1824-243.3536 134.656 134.7328L572.2368 0z" fill="#b39f88" p-id="19403"></path></svg>`
+        }
+      }
+    },
+    {
+      id: 'text-1',
+      type: 'Text',
+      zIndex: 0,
+      position: {
+        x: 520,
+        y: 40,
+        width: 600,
+        height: 200
+      },
+      options: {
+        graphic: {
+          text: 'Famouse Travel\nDestinations In 2023',
+          textAlign: 'left',
+          fontSize: 58,
+          fontWeight: 'bold',
+          fill: '#2b3241'
+        }
+      }
+    },
+    {
+      id: 'text-2',
+      type: 'Text',
+      zIndex: 0,
+      position: {
+        x: 520,
+        y: 200,
+        width: 600,
+        height: 200
+      },
+      options: {
+        graphic: {
+          text: 'PIE CHART MODERN',
+          textAlign: 'left',
+          fontSize: 32,
+          fill: '#ef8761'
+        }
+      }
+    }
+  ]
+};
+const story = new VStory.Story(dsl, {
+  dom: CONTAINER_ID,
+  background: '#ebecf0',
+  scaleX: 0.5,
+  scaleY: 0.5
+});
+const player = new VStory.Player(story);
+story.init(player);
+
+player.play(-1);
+
+window['story'] = story;
+window['vstory'] = story;
+```