diff --git a/docs/assets/examples/en/infographic/bar-chart-leftRight.md b/docs/assets/examples/en/infographic/bar-chart-leftRight.md new file mode 100644 index 00000000..7128b765 --- /dev/null +++ b/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; +``` diff --git a/docs/assets/examples/en/infographic/pie-chart-leftRight.md b/docs/assets/examples/en/infographic/pie-chart-leftRight.md new file mode 100644 index 00000000..2e0b83a0 --- /dev/null +++ b/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: `` + } + } + }, + { + id: 'explosion', + type: 'Shape', + zIndex: 0, + position: { + x: 1128, + y: 380, + width: 32, + height: 32 + }, + options: { + graphic: { + fill: '#fff', + symbolType: `` + } + } + }, + { + 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; +``` diff --git a/docs/assets/examples/menu.json b/docs/assets/examples/menu.json index a23b295d..56f49cd5 100644 --- a/docs/assets/examples/menu.json +++ b/docs/assets/examples/menu.json @@ -213,6 +213,20 @@ "zh": "信息图模板-地图: USA Cancer", "en": "Map Chart Infographic: USA Cancer" } + }, + { + "path": "bar-chart-leftRight", + "title": { + "zh": "信息图模板-柱状图（左右布局）", + "en": "Bar Chart Infographic(Left-right Layout)" + } + }, + { + "path": "pie-chart-leftRight", + "title": { + "zh": "信息图模板-饼图（左右布局）", + "en": "Pie Chart Infographic(Left-right Layout)" + } } ] } diff --git a/docs/assets/examples/zh/infographic/bar-chart-leftRight.md b/docs/assets/examples/zh/infographic/bar-chart-leftRight.md new file mode 100644 index 00000000..4a66eed3 --- /dev/null +++ b/docs/assets/examples/zh/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 +--- + +# 信息图模板-柱状图（左右布局） + +## 代码演示 + +```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; +``` diff --git a/docs/assets/examples/zh/infographic/pie-chart-leftRight.md b/docs/assets/examples/zh/infographic/pie-chart-leftRight.md new file mode 100644 index 00000000..919d9344 --- /dev/null +++ b/docs/assets/examples/zh/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 +--- + +# 信息图模板-饼图（左右布局） + +## 代码演示 + +```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: `` + } + } + }, + { + id: 'explosion', + type: 'Shape', + zIndex: 0, + position: { + x: 1128, + y: 380, + width: 32, + height: 32 + }, + options: { + graphic: { + fill: '#fff', + symbolType: `` + } + } + }, + { + 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; +``` diff --git a/packages/vstory/demo/src/App.tsx b/packages/vstory/demo/src/App.tsx index 5417b1b5..7305e5bf 100644 --- a/packages/vstory/demo/src/App.tsx +++ b/packages/vstory/demo/src/App.tsx @@ -31,6 +31,8 @@ import { SinglePie } from './demos/component/single-pie'; import { DynamicLine } from './demos/story-chart/dynamic-line'; import { Pie1 } from './demos/arrange/Pie1'; import { UnitTemplate2 } from './demos/templates/unit-template2'; +import { ReadyToEat } from './demos/infographic/ready-to-eat'; +import { FamousTravel } from './demos/infographic/famous-travel'; type MenusType = ( | { @@ -192,6 +194,14 @@ const App = () => { { name: 'CancerUSA', component: CancerUSA + }, + { + name: 'ReadyToEat', + component: ReadyToEat + }, + { + name: 'FamouseTravel', + component: FamousTravel } ] }, diff --git a/packages/vstory/demo/src/demos/infographic/famous-travel.tsx b/packages/vstory/demo/src/demos/infographic/famous-travel.tsx new file mode 100644 index 00000000..93746b71 --- /dev/null +++ b/packages/vstory/demo/src/demos/infographic/famous-travel.tsx @@ -0,0 +1,212 @@ +import React, { createRef, useEffect } from 'react'; +import { Player, Story } from '../../../../../vstory-core/src'; +import { registerAll } from '../../../../../vstory/src'; + +registerAll(); +export const FamousTravel = () => { + const id = 'ReadyToEat'; + useEffect(() => { + const container = document.getElementById(id); + const canvas = document.createElement('canvas'); + container?.appendChild(canvas); + + 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: `` + } + } + }, + { + id: 'explosion', + type: 'Shape', + zIndex: 0, + position: { + x: 1128, + y: 380, + width: 32, + height: 32 + }, + options: { + graphic: { + fill: '#fff', + symbolType: `` + } + } + }, + { + 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 Story(dsl, { canvas, width: 1280, height: 720, background: '#fff' }); + const player = new Player(story); + story.init(player); + player.play(-1); + + return () => { + story.release(); + }; + }, []); + + return
; +}; diff --git a/packages/vstory/demo/src/demos/infographic/ready-to-eat.tsx b/packages/vstory/demo/src/demos/infographic/ready-to-eat.tsx new file mode 100644 index 00000000..214e9089 --- /dev/null +++ b/packages/vstory/demo/src/demos/infographic/ready-to-eat.tsx @@ -0,0 +1,160 @@ +import React, { createRef, useEffect } from 'react'; +import { Player, Story } from '../../../../../vstory-core/src'; +import { registerAll } from '../../../../../vstory/src'; + +registerAll(); +export const ReadyToEat = () => { + const id = 'ReadyToEat'; + useEffect(() => { + const container = document.getElementById(id); + const canvas = document.createElement('canvas'); + container?.appendChild(canvas); + + 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 Story(dsl, { canvas, width: 1280, height: 720, background: '#DDE6E8' }); + const player = new Player(story); + story.init(player); + player.play(-1); + + return () => { + story.release(); + }; + }, []); + + return
; +};