diff --git a/docs/assets/examples/en/infographic/bar-chart-horizontal.md b/docs/assets/examples/en/infographic/bar-chart-horizontal.md
new file mode 100644
index 00000000..651a5c24
--- /dev/null
+++ b/docs/assets/examples/en/infographic/bar-chart-horizontal.md
@@ -0,0 +1,254 @@
+---
+category: examples
+group: infographic
+title: Bar Chart Horizontal
+keywords: templates, visualization, bar, left-right, comparison, horizontal
+order: 1-0
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/bar-chart-horizontal.png
+---
+
+# Horizontal Bar Chart Infographic
+
+## Code Demo
+
+```javascript livedemo template=vstory
+VStory.registerAll();
+const dsl = {
+  acts: [
+    {
+      id: 'defaultAct',
+      scenes: [
+        {
+          id: 'defaultScene',
+          actions: [
+            {
+              characterId: ['bgImage', 'bg0', 'bg1'],
+              characterActions: [
+                {
+                  action: 'appear',
+                  payload: {
+                    animation: {
+                      duration: 500
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              characterId: ['title', 'chart', 'displayImage'],
+              characterActions: [
+                {
+                  action: 'appear',
+                  payload: [
+                    {
+                      animation: {
+                        duration: 500,
+                        easing: 'linear',
+                        effect: 'wipe'
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  characters: [
+    {
+      id: 'bgImage',
+      type: 'Rect',
+      zIndex: 0,
+      position: {
+        x: 0,
+        y: 0,
+        width: 1280,
+        height: 720
+      },
+      options: {
+        graphic: {
+          background: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/resource/bar-chart-horizontal-bg.png',
+          blur: 20
+        }
+      }
+    },
+    {
+      id: 'bg0',
+      type: 'Rect',
+      zIndex: 0,
+      position: {
+        x: 100,
+        y: 100,
+        width: 1080,
+        height: 520
+      },
+      options: {
+        graphic: {
+          fill: '#1f1766',
+          cornerRadius: 20,
+          fillOpacity: 0.9
+        }
+      }
+    },
+    {
+      id: 'bg1',
+      type: 'Rect',
+      zIndex: 0,
+      position: {
+        x: 100,
+        y: 100,
+        width: 1080,
+        height: 70
+      },
+      options: {
+        graphic: {
+          fill: '#576cfd',
+          cornerRadius: [20, 20, 0, 0],
+          fillOpacity: 0.9
+        }
+      }
+    },
+    {
+      id: 'title',
+      type: 'Text',
+      zIndex: 0,
+      position: {
+        x: 640,
+        y: 116,
+        width: 1000,
+        height: 100
+      },
+      options: {
+        graphic: {
+          text: 'Marketers create data visualizations regularly',
+          textAlign: 'center',
+          fontSize: 36,
+          fontWeight: 'bold',
+          fill: 'white'
+        }
+      }
+    },
+    {
+      id: 'chart',
+      type: 'VChart',
+      zIndex: 0,
+      position: {
+        x: 120,
+        y: 180,
+        width: 900,
+        height: 400
+      },
+      options: {
+        spec: {
+          type: 'bar',
+          data: [
+            {
+              id: 'barData',
+              values: [
+                {
+                  name: 'Every week',
+                  value: 0.48
+                },
+                {
+                  name: 'Evert month',
+                  value: 0.37
+                },
+                {
+                  name: 'Every few months',
+                  value: 0.1
+                },
+                {
+                  name: 'Once or twice a year',
+                  value: 0.05
+                }
+              ]
+            }
+          ],
+          direction: 'horizontal',
+          xField: 'value',
+          yField: 'name',
+          bar: {
+            style: {
+              fill: datum => {
+                return datum.value > 0.4 ? '#ffb035' : '#3eb2e7';
+              }
+            }
+          },
+          axes: [
+            {
+              orient: 'bottom',
+              visible: false,
+              max: 0.6
+            },
+            {
+              orient: 'left',
+              paddingInner: 0.6,
+              domainLine: {
+                visible: false
+              },
+              tick: {
+                tickSize: 40,
+                style: {
+                  lineDash: [4, 4]
+                }
+              },
+              label: {
+                style: {
+                  fontSize: 18,
+                  fill: 'white',
+                  fillOpacity: 0.9
+                }
+              }
+            }
+          ],
+          label: {
+            visible: true,
+            formatMethod: value => `${Math.round(value * 100)}%`,
+            style: {
+              fontSize: 30,
+              fontWeight: 'bold',
+              stroke: false,
+              dx: 20,
+              fill: 'white'
+            }
+          }
+          // padding: 100
+        }
+      }
+    },
+    {
+      id: 'displayImage',
+      type: 'Image',
+      zIndex: 0,
+      position: {
+        x: 700,
+        y: 300,
+        width: 340,
+        height: 300
+      },
+      options: {
+        graphic: {
+          image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/resource/bar-chart-horizontal-image.png'
+        }
+      }
+    }
+  ]
+};
+const story = new VStory.Story(dsl, {
+  dom: CONTAINER_ID,
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720,
+  background: '#1c217e'
+});
+const player = new VStory.Player(story);
+story.init(player);
+
+player.play(-1);
+
+window['story'] = story;
+window['vstory'] = story;
+```
diff --git a/docs/assets/examples/en/infographic/pie-chart-camera.md b/docs/assets/examples/en/infographic/pie-chart-camera.md
new file mode 100644
index 00000000..0b86f8a3
--- /dev/null
+++ b/docs/assets/examples/en/infographic/pie-chart-camera.md
@@ -0,0 +1,251 @@
+---
+category: examples
+group: infographic
+title: Pie Chart Camera
+keywords: templates, visualization, bar, percentage, horizontal
+order: 1-0
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/pie-chart-camera.png
+---
+
+# Camera Statistic - Pie Chart
+
+## Code Demo
+
+```javascript livedemo template=vstory
+VStory.registerAll();
+const dsl = {
+  acts: [
+    {
+      id: 'defaultAct',
+      scenes: [
+        {
+          id: 'defaultScene',
+          actions: [
+            {
+              characterId: ['bgImage', 'cameraIcon', 'bg0', 'bg1', 'title', 'displayImage'],
+              characterActions: [
+                {
+                  action: 'appear',
+                  payload: {
+                    animation: {
+                      duration: 500,
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              characterId: ['chart'],
+              characterActions: [
+                {
+                  action: 'appear',
+                  payload: [
+                    {
+                      animation: {
+                        startTime: 300,
+                        duration: 1000,
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  characters: [
+
+    {
+      id: 'bg0',
+      type: 'Rect',
+      zIndex: 1,
+      position: {
+        x: 1120,
+        y: 0,
+        width: 80,
+        height: 280
+      },
+      options: {
+        graphic: {
+          fill: '#fff',
+          cornerRadius: [0,0,200,200]
+        }
+      }
+    },
+    {
+      id: 'bg1',
+      type: 'Rect',
+      zIndex: 2,
+      position: {
+        x: 1120 + 4,
+        y: 200 + 4,
+        width: 72,
+        height: 72
+      },
+      options: {
+        graphic: {
+          cornerRadius: 80,
+          fill: '#fdda2f',
+          fillOpacity: 0.7
+        }
+      }
+    },
+    {
+      id: 'cameraIcon',
+      type: 'Image',
+      zIndex: 2,
+      position: {
+        x: 1120,
+        y: 200,
+        width: 80,
+        height: 80
+      },
+      options: {
+        graphic: {
+          image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/resource/pie-chart-camera-icon.png'
+        }
+      }
+    },
+    {
+      id: 'title',
+      type: 'Text',
+      zIndex: 0,
+      position: {
+        x: 1100,
+        y: 60,
+        width: 1000,
+        height: 400
+      },
+      options: {
+        graphic: {
+          text: [
+            'Most Successful',
+            'Camera Companies',
+            'In 2023'
+          ],
+          textAlign: 'right',
+          fontSize: 60,
+          fontWeight: 'bolder',
+          stroke: '#000',
+          lineWidth: 2,
+          fill: '#000'
+        }
+      }
+    },
+    {
+      id: 'chart',
+      type: 'VChart',
+      zIndex: 0,
+      position: {
+        x: 40,
+        y: 20,
+        width: 600,
+        height: 640
+      },
+      options: {
+        spec: {
+          type: 'pie',
+          data: [
+            {
+              id: 'id0',
+              values: [
+                { type: 'Sony', value: 0.34 },
+                { type: 'Canon', value: 0.17 },
+                { type: 'Nikon', value: 0.16 },
+                { type: 'Fujifilm', value: 0.1 },
+                { type: 'Olympus', value: 0.09 },
+                { type: 'Panasonic', value: 0.07 },
+                { type: 'Others', value: 0.07 },
+              ]
+            }
+          ],
+          outerRadius: 0.75,
+          valueField: 'value',
+          categoryField: 'type',
+          startAngle: Math.PI / 2,
+          endAngle: Math.PI / 2,
+          color: ['#36bfd4', '#1a949e', '#6e4c20', '#f3894c', '#f56c4e', '#3aa565', '#db3947'],
+          legends: {
+            visible: true,
+            orient: 'bottom',
+            padding: [20, 0, 0, 0],
+            item: {
+              width: 120,
+              shape: {
+                style: {
+                  symbolType: 'square'
+                }
+              },
+              label: {
+                style: {
+                  fontSize: 18,
+                  fontWeight: 'bold',
+                  fill: '#000'
+                }
+              }
+            }
+          },
+          label: {
+            visible: true,
+            position: 'inside',
+            rotate: false,
+            formatMethod: (value, datum) => `${Math.round(datum.value * 100)}%`,
+            style: {
+              fill: '#fff',
+              stroke: false,
+              fontWeight: 'bold',
+              fontSize: 22
+            },
+            smartInvert: false,
+            spaceWidth: 40
+          },
+          tooltip: {
+            mark: {
+              content: [
+                {
+                  key: datum => datum['type'],
+                  value: datum => datum['value'] + '%'
+                }
+              ]
+            }
+          }
+        }
+      }
+    },
+    {
+      id: 'displayImage',
+      type: 'Image',
+      zIndex: 0,
+      position: {
+        x: 500,
+        y: 100,
+        width: 1000,
+        height: 1000,
+        angle: -Math.PI / 15,
+      },
+      options: {
+        graphic: {
+          image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/resource/pie-chart-camera.png'
+        }
+      }
+    },
+  ]
+};
+const story = new VStory.Story(dsl, {
+  dom: CONTAINER_ID,
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720,
+  background: '#fdda2f'
+});
+const player = new VStory.Player(story);
+story.init(player);
+
+player.play(-1);
+
+window['story'] = story;
+window['vstory'] = story;
+```
diff --git a/docs/assets/examples/menu.json b/docs/assets/examples/menu.json
index 330c8846..41a34db6 100644
--- a/docs/assets/examples/menu.json
+++ b/docs/assets/examples/menu.json
@@ -284,6 +284,13 @@
             "en": "Pie Chart Infographic: Transportation"
           }
         },
+        {
+          "path": "pie-chart-camera",
+          "title": {
+            "zh": "相机占比统计-饼图",
+            "en": "Camera Statistic - Pie Chart"
+          }
+        },
         {
           "path": "bar-work-in-same-industry",
           "title": {
@@ -305,6 +312,13 @@
             "en": "Pie Chart Infographic: Client Breakdown"
           }
         },
+        {
+          "path": "bar-chart-horizontal",
+          "title": {
+            "zh": "信息图模板-条形图",
+            "en": "Horizontal Bar Chart Infographic"
+          }
+        },
         {
           "path": "cat-stroke",
           "title": {
diff --git a/docs/assets/examples/zh/infographic/bar-chart-horizontal.md b/docs/assets/examples/zh/infographic/bar-chart-horizontal.md
new file mode 100644
index 00000000..5e1749cb
--- /dev/null
+++ b/docs/assets/examples/zh/infographic/bar-chart-horizontal.md
@@ -0,0 +1,254 @@
+---
+category: examples
+group: infographic
+title: Bar Chart Horizontal
+keywords: templates, visualization, bar, left-right, comparison, horizontal
+order: 1-0
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/bar-chart-horizontal.png
+---
+
+# 信息图模板-条形图
+
+## 代码演示
+
+```javascript livedemo template=vstory
+VStory.registerAll();
+const dsl = {
+  acts: [
+    {
+      id: 'defaultAct',
+      scenes: [
+        {
+          id: 'defaultScene',
+          actions: [
+            {
+              characterId: ['bgImage', 'bg0', 'bg1'],
+              characterActions: [
+                {
+                  action: 'appear',
+                  payload: {
+                    animation: {
+                      duration: 500
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              characterId: ['title', 'chart', 'displayImage'],
+              characterActions: [
+                {
+                  action: 'appear',
+                  payload: [
+                    {
+                      animation: {
+                        duration: 500,
+                        easing: 'linear',
+                        effect: 'wipe'
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  characters: [
+    {
+      id: 'bgImage',
+      type: 'Rect',
+      zIndex: 0,
+      position: {
+        x: 0,
+        y: 0,
+        width: 1280,
+        height: 720
+      },
+      options: {
+        graphic: {
+          background: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/resource/bar-chart-horizontal-bg.png',
+          blur: 20
+        }
+      }
+    },
+    {
+      id: 'bg0',
+      type: 'Rect',
+      zIndex: 0,
+      position: {
+        x: 100,
+        y: 100,
+        width: 1080,
+        height: 520
+      },
+      options: {
+        graphic: {
+          fill: '#1f1766',
+          cornerRadius: 20,
+          fillOpacity: 0.9
+        }
+      }
+    },
+    {
+      id: 'bg1',
+      type: 'Rect',
+      zIndex: 0,
+      position: {
+        x: 100,
+        y: 100,
+        width: 1080,
+        height: 70
+      },
+      options: {
+        graphic: {
+          fill: '#576cfd',
+          cornerRadius: [20, 20, 0, 0],
+          fillOpacity: 0.9
+        }
+      }
+    },
+    {
+      id: 'title',
+      type: 'Text',
+      zIndex: 0,
+      position: {
+        x: 640,
+        y: 116,
+        width: 1000,
+        height: 100
+      },
+      options: {
+        graphic: {
+          text: 'Marketers create data visualizations regularly',
+          textAlign: 'center',
+          fontSize: 36,
+          fontWeight: 'bold',
+          fill: 'white'
+        }
+      }
+    },
+    {
+      id: 'chart',
+      type: 'VChart',
+      zIndex: 0,
+      position: {
+        x: 120,
+        y: 180,
+        width: 900,
+        height: 400
+      },
+      options: {
+        spec: {
+          type: 'bar',
+          data: [
+            {
+              id: 'barData',
+              values: [
+                {
+                  name: 'Every week',
+                  value: 0.48
+                },
+                {
+                  name: 'Evert month',
+                  value: 0.37
+                },
+                {
+                  name: 'Every few months',
+                  value: 0.1
+                },
+                {
+                  name: 'Once or twice a year',
+                  value: 0.05
+                }
+              ]
+            }
+          ],
+          direction: 'horizontal',
+          xField: 'value',
+          yField: 'name',
+          bar: {
+            style: {
+              fill: datum => {
+                return datum.value > 0.4 ? '#ffb035' : '#3eb2e7';
+              }
+            }
+          },
+          axes: [
+            {
+              orient: 'bottom',
+              visible: false,
+              max: 0.6
+            },
+            {
+              orient: 'left',
+              paddingInner: 0.6,
+              domainLine: {
+                visible: false
+              },
+              tick: {
+                tickSize: 40,
+                style: {
+                  lineDash: [4, 4]
+                }
+              },
+              label: {
+                style: {
+                  fontSize: 18,
+                  fill: 'white',
+                  fillOpacity: 0.9
+                }
+              }
+            }
+          ],
+          label: {
+            visible: true,
+            formatMethod: value => `${Math.round(value * 100)}%`,
+            style: {
+              fontSize: 30,
+              fontWeight: 'bold',
+              stroke: false,
+              dx: 20,
+              fill: 'white'
+            }
+          }
+          // padding: 100
+        }
+      }
+    },
+    {
+      id: 'displayImage',
+      type: 'Image',
+      zIndex: 0,
+      position: {
+        x: 700,
+        y: 300,
+        width: 340,
+        height: 300
+      },
+      options: {
+        graphic: {
+          image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/resource/bar-chart-horizontal-image.png'
+        }
+      }
+    }
+  ]
+};
+const story = new VStory.Story(dsl, {
+  dom: CONTAINER_ID,
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720,
+  background: '#1c217e'
+});
+const player = new VStory.Player(story);
+story.init(player);
+
+player.play(-1);
+
+window['story'] = story;
+window['vstory'] = story;
+```
diff --git a/docs/assets/examples/zh/infographic/pie-chart-camera.md b/docs/assets/examples/zh/infographic/pie-chart-camera.md
new file mode 100644
index 00000000..7ab7e050
--- /dev/null
+++ b/docs/assets/examples/zh/infographic/pie-chart-camera.md
@@ -0,0 +1,251 @@
+---
+category: examples
+group: infographic
+title: Pie Chart Camera
+keywords: templates, visualization, bar, percentage, horizontal
+order: 1-0
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/pie-chart-camera.png
+---
+
+# 相机占比统计-饼图
+
+## 代码演示
+
+```javascript livedemo template=vstory
+VStory.registerAll();
+const dsl = {
+  acts: [
+    {
+      id: 'defaultAct',
+      scenes: [
+        {
+          id: 'defaultScene',
+          actions: [
+            {
+              characterId: ['bgImage', 'cameraIcon', 'bg0', 'bg1', 'title', 'displayImage'],
+              characterActions: [
+                {
+                  action: 'appear',
+                  payload: {
+                    animation: {
+                      duration: 500,
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              characterId: ['chart'],
+              characterActions: [
+                {
+                  action: 'appear',
+                  payload: [
+                    {
+                      animation: {
+                        startTime: 300,
+                        duration: 1000,
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  characters: [
+
+    {
+      id: 'bg0',
+      type: 'Rect',
+      zIndex: 1,
+      position: {
+        x: 1120,
+        y: 0,
+        width: 80,
+        height: 280
+      },
+      options: {
+        graphic: {
+          fill: '#fff',
+          cornerRadius: [0,0,200,200]
+        }
+      }
+    },
+    {
+      id: 'bg1',
+      type: 'Rect',
+      zIndex: 2,
+      position: {
+        x: 1120 + 4,
+        y: 200 + 4,
+        width: 72,
+        height: 72
+      },
+      options: {
+        graphic: {
+          cornerRadius: 80,
+          fill: '#fdda2f',
+          fillOpacity: 0.7
+        }
+      }
+    },
+    {
+      id: 'cameraIcon',
+      type: 'Image',
+      zIndex: 2,
+      position: {
+        x: 1120,
+        y: 200,
+        width: 80,
+        height: 80
+      },
+      options: {
+        graphic: {
+          image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/resource/pie-chart-camera-icon.png'
+        }
+      }
+    },
+    {
+      id: 'title',
+      type: 'Text',
+      zIndex: 0,
+      position: {
+        x: 1100,
+        y: 60,
+        width: 1000,
+        height: 400
+      },
+      options: {
+        graphic: {
+          text: [
+            'Most Successful',
+            'Camera Companies',
+            'In 2023'
+          ],
+          textAlign: 'right',
+          fontSize: 60,
+          fontWeight: 'bolder',
+          stroke: '#000',
+          lineWidth: 2,
+          fill: '#000'
+        }
+      }
+    },
+    {
+      id: 'chart',
+      type: 'VChart',
+      zIndex: 0,
+      position: {
+        x: 40,
+        y: 20,
+        width: 600,
+        height: 640
+      },
+      options: {
+        spec: {
+          type: 'pie',
+          data: [
+            {
+              id: 'id0',
+              values: [
+                { type: 'Sony', value: 0.34 },
+                { type: 'Canon', value: 0.17 },
+                { type: 'Nikon', value: 0.16 },
+                { type: 'Fujifilm', value: 0.1 },
+                { type: 'Olympus', value: 0.09 },
+                { type: 'Panasonic', value: 0.07 },
+                { type: 'Others', value: 0.07 },
+              ]
+            }
+          ],
+          outerRadius: 0.75,
+          valueField: 'value',
+          categoryField: 'type',
+          startAngle: Math.PI / 2,
+          endAngle: Math.PI / 2,
+          color: ['#36bfd4', '#1a949e', '#6e4c20', '#f3894c', '#f56c4e', '#3aa565', '#db3947'],
+          legends: {
+            visible: true,
+            orient: 'bottom',
+            padding: [20, 0, 0, 0],
+            item: {
+              width: 120,
+              shape: {
+                style: {
+                  symbolType: 'square'
+                }
+              },
+              label: {
+                style: {
+                  fontSize: 18,
+                  fontWeight: 'bold',
+                  fill: '#000'
+                }
+              }
+            }
+          },
+          label: {
+            visible: true,
+            position: 'inside',
+            rotate: false,
+            formatMethod: (value, datum) => `${Math.round(datum.value * 100)}%`,
+            style: {
+              fill: '#fff',
+              stroke: false,
+              fontWeight: 'bold',
+              fontSize: 22
+            },
+            smartInvert: false,
+            spaceWidth: 40
+          },
+          tooltip: {
+            mark: {
+              content: [
+                {
+                  key: datum => datum['type'],
+                  value: datum => datum['value'] + '%'
+                }
+              ]
+            }
+          }
+        }
+      }
+    },
+    {
+      id: 'displayImage',
+      type: 'Image',
+      zIndex: 0,
+      position: {
+        x: 500,
+        y: 100,
+        width: 1000,
+        height: 1000,
+        angle: -Math.PI / 15,
+      },
+      options: {
+        graphic: {
+          image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/resource/pie-chart-camera.png'
+        }
+      }
+    },
+  ]
+};
+const story = new VStory.Story(dsl, {
+  dom: CONTAINER_ID,
+  scaleX: 'auto',
+  scaleY: 'auto',
+  width: 1280,
+  height: 720,
+  background: '#fdda2f'
+});
+const player = new VStory.Player(story);
+story.init(player);
+
+player.play(-1);
+
+window['story'] = story;
+window['vstory'] = story;
+```