diff --git a/.vscode/settings.json b/.vscode/settings.json index e01666a3..5b20c345 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -21,5 +21,8 @@ "editor.tabSize": 2, "editor.detectIndentation": false, // Typescript - "typescript.preferences.importModuleSpecifier": "project-relative" + "typescript.preferences.importModuleSpecifier": "project-relative", + "[typescriptreact]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + } } diff --git a/docs/assets/examples/en/infographic/big-data-wordcloud.md b/docs/assets/examples/en/infographic/big-data-wordcloud.md new file mode 100644 index 00000000..e590fa64 --- /dev/null +++ b/docs/assets/examples/en/infographic/big-data-wordcloud.md @@ -0,0 +1,1256 @@ +--- +category: examples +group: infographic +title: Word Cloud Infographic(Big Data Keywords) +keywords: templates, visualization, wordcloud, big-data +order: 1-0 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/big-data-wordcloud.png +--- + +# Word Cloud Infographic (Big Data Keywords) + +## 代码演示 + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); +const dataWordCloud = [ + { + name: 'BIG', + value: 400 + }, + { + name: 'DATA', + value: 360 + }, + { + name: 'BASED', + value: 120 + }, + { + name: 'TRANSFER', + value: 120 + }, + { + name: 'CAPTURE', + value: 120 + }, + { + name: 'EXEBYTES', + value: 120 + }, + { + name: 'IDEA', + value: 120 + }, + { + name: 'PLAY', + value: 120 + }, + { + name: 'INCLUDE', + value: 120 + }, + { + name: 'LOGS', + value: 120 + }, + { + name: 'INTERNET', + value: 120 + }, + { + name: 'REL', + value: 120 + }, + { + name: 'SOFTWARE', + value: 120 + }, + { + name: 'WORLD', + value: 120 + }, + { + name: 'TECHNOLOGY', + value: 120 + }, + { + name: 'BILLION CAPTURE', + value: 120 + }, + { + name: 'CAPTURE', + value: 120 + }, + { + name: 'VALL', + value: 120 + }, + { + name: 'INCLUDE', + value: 120 + }, + { + name: 'SCIENTISTS', + value: 120 + }, + { + name: 'STORAGE', + value: 120 + }, + { + name: 'CAPABILITIES', + value: 120 + }, + { + name: 'NEW', + value: 120 + }, + { + name: 'SOFTWARE', + value: 120 + }, + { + name: 'PETABYTES', + value: 120 + }, + { + name: 'LARGE', + value: 120 + }, + { + name: 'BECOMES', + value: 120 + }, + { + name: 'SEARCH', + value: 120 + }, + { + name: 'PHYSIC', + value: 120 + }, + { + name: 'SOFT WARE', + value: 120 + }, + { + name: 'DEVELOPMENT', + value: 100 + }, + { + name: 'QUALITY', + value: 100 + }, + { + name: 'DATABASE', + value: 100 + }, + { + name: 'DEPBIDING', + value: 100 + }, + { + name: 'BECAUSE', + value: 100 + }, + { + name: 'CAPTURE DEDITOR', + value: 100 + }, + { + name: 'WERE', + value: 100 + }, + { + name: 'ONGBESKTOP', + value: 100 + }, + { + name: 'MANY LAN', + value: 100 + }, + { + name: 'PLAY', + value: 100 + }, + { + name: 'STORAGE', + value: 100 + }, + { + name: 'PART', + value: 100 + }, + { + name: 'LARGE', + value: 100 + }, + { + name: 'XEBYTES', + value: 100 + }, + { + name: 'SETS', + value: 100 + }, + { + name: 'ORGANIZATION', + value: 100 + }, + { + name: 'IDEA', + value: 100 + }, + { + name: 'INTERNET', + value: 100 + }, + { + name: 'RESEAR', + value: 100 + }, + { + name: 'BIG', + value: 100 + }, + { + name: 'VOLUME', + value: 100 + }, + { + name: 'DATABASE USING', + value: 100 + }, + { + name: 'DATASAGE', + value: 100 + }, + { + name: 'MILLION', + value: 100 + }, + { + name: 'PART DEVELOPMBIT', + value: 100 + }, + { + name: 'VALL', + value: 100 + }, + { + name: 'LARGE', + value: 100 + }, + { + name: 'MANAGEMENT', + value: 100 + }, + { + name: 'PHYSICS', + value: 100 + }, + { + name: 'MILLION', + value: 100 + }, + { + name: 'DEDATOR', + value: 50 + }, + { + name: 'VALL', + value: 50 + }, + { + name: 'IDEA', + value: 50 + }, + { + name: 'SEARCH', + value: 50 + }, + { + name: 'SEARCH', + value: 50 + }, + { + name: 'CAPING REAL', + value: 50 + }, + { + name: 'SETS FUTURE', + value: 50 + }, + { + name: 'GROW', + value: 50 + }, + { + name: 'SOFTWARE', + value: 50 + }, + { + name: 'DATA', + value: 50 + }, + { + name: 'SAN', + value: 50 + }, + { + name: 'SOFTWARE', + value: 50 + }, + { + name: 'DETS', + value: 50 + }, + { + name: 'DATABASE BEFORE', + value: 50 + }, + { + name: 'MANAGEMENT', + value: 50 + }, + { + name: 'DEVELOPMENT', + value: 50 + }, + { + name: 'LOWING', + value: 50 + }, + { + name: 'SEARCH', + value: 50 + }, + { + name: 'MOST', + value: 50 + }, + { + name: 'WAN', + value: 50 + }, + { + name: 'BILLION', + value: 50 + }, + { + name: 'TOOLS', + value: 50 + }, + { + name: 'STORME', + value: 50 + }, + { + name: 'DATABASE', + value: 50 + }, + { + name: 'SETS', + value: 50 + }, + { + name: 'DEADOFTWA', + value: 50 + }, + { + name: 'PHYSICS', + value: 50 + }, + { + name: 'SOFTWARE', + value: 50 + }, + { + name: 'SOFTWARE', + value: 50 + }, + { + name: 'SEARCH', + value: 50 + }, + { + name: 'BLOPM', + value: 50 + }, + { + name: 'PHYSICS', + value: 50 + }, + { + name: 'GEENTOP', + value: 50 + }, + { + name: 'MANY', + value: 50 + }, + { + name: 'INTERNET', + value: 50 + }, + { + name: 'TECHNOLOGY', + value: 50 + }, + { + name: 'CE NEW', + value: 50 + }, + { + name: 'BILLION', + value: 50 + }, + { + name: 'PART', + value: 50 + }, + { + name: 'TOOLS', + value: 50 + }, + { + name: 'PETABYTES- ALLOWING', + value: 50 + }, + { + name: 'SOCIAL', + value: 50 + }, + { + name: 'DEVELOPMENT', + value: 50 + }, + { + name: 'DEVEPLOMENT', + value: 50 + }, + { + name: 'NAS', + value: 50 + }, + { + name: 'DATABASE', + value: 50 + }, + { + name: 'BURNG', + value: 50 + }, + { + name: 'MANAGEMENT', + value: 50 + }, + { + name: 'WITH', + value: 50 + }, + { + name: 'TOTAL', + value: 50 + }, + { + name: 'AMOUNT', + value: 50 + }, + { + name: 'NEW', + value: 50 + }, + { + name: 'DATABASE', + value: 50 + }, + { + name: 'PHYSIOS', + value: 50 + }, + { + name: 'VILUME', + value: 50 + }, + { + name: 'MANAGEMENT', + value: 50 + }, + { + name: 'ALLOWINE', + value: 50 + }, + { + name: 'INFORMATIONDENCE', + value: 50 + }, + { + name: 'PROCESS', + value: 50 + }, + { + name: 'RELATED', + value: 50 + } +].map((entry, index) => { + return { + ...entry, + index + }; +}); +const dsl = { + acts: [ + { + id: 'defaultAct', + scenes: [ + { + id: 'defaultScene', + actions: [ + { + characterId: [ + 'background', + 'arc0', + 'arc1', + 'arc2', + 'leftTitle' + // 'listIconLeft1', + // 'listIconRight1', + // 'listNo1', + // 'listContent1', + + // 'listIconLeft2', + // 'listIconRight2', + // 'listNo2', + // 'listContent2', + + // 'listIconLeft3', + // 'listIconRight3', + // 'listNo3', + // 'listContent3', + + // 'listIconLeft4', + // 'listIconRight4', + // 'listNo4', + // 'listContent4', + + // 'wordCloud' + ], + characterActions: [ + { + action: 'appear' + } + ] + }, + + { + characterId: ['leftTitle'], + characterActions: [ + { + action: 'appear', + startTime: 0, + payload: [ + { + animation: { + duration: 400, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + }, + + { + characterId: ['listIconLeft1', 'listIconRight1', 'listNo1'], + characterActions: [ + { + action: 'appear', + startTime: 400, + payload: [ + { + animation: { + duration: 200, + easing: 'linear', + effect: 'fade' + } + } + ] + } + ] + }, + { + characterId: ['listContent1'], + characterActions: [ + { + action: 'appear', + startTime: 600, + payload: [ + { + animation: { + duration: 600, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + }, + + { + characterId: ['listIconLeft2', 'listIconRight2', 'listNo2'], + characterActions: [ + { + action: 'appear', + startTime: 1200, + payload: [ + { + animation: { + duration: 200, + easing: 'linear', + effect: 'fade' + } + } + ] + } + ] + }, + { + characterId: ['listContent2'], + characterActions: [ + { + action: 'appear', + startTime: 1400, + payload: [ + { + animation: { + duration: 600, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + }, + + { + characterId: ['listIconLeft3', 'listIconRight3', 'listNo3'], + characterActions: [ + { + action: 'appear', + startTime: 2000, + payload: [ + { + animation: { + duration: 200, + easing: 'linear', + effect: 'fade' + } + } + ] + } + ] + }, + { + characterId: ['listContent3'], + characterActions: [ + { + action: 'appear', + startTime: 2200, + payload: [ + { + animation: { + duration: 600, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + }, + + { + characterId: ['listIconLeft4', 'listIconRight4', 'listNo4'], + characterActions: [ + { + action: 'appear', + startTime: 2800, + payload: [ + { + animation: { + duration: 200, + easing: 'linear', + effect: 'fade' + } + } + ] + } + ] + }, + { + characterId: ['listContent4'], + characterActions: [ + { + action: 'appear', + startTime: 3000, + payload: [ + { + animation: { + duration: 600, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + }, + { + characterId: ['wordCloud'], + characterActions: [ + { + action: 'appear', + startTime: 3600, + payload: [ + { + animation: { + selector: '*', + duration: 100, + easing: 'linear', + effect: 'scale', + oneByOne: true + } + } + ] + } + ] + } + ] + } + ] + } + ], + characters: [ + { + id: 'background', + type: 'Rect', + zIndex: 0, + position: { + x: 0, + y: 0, + width: 1280, + height: 720 + }, + options: { + graphic: { + fill: '#fff' + } + } + }, + + { + id: 'arc0', + type: 'Shape', + zIndex: 0, + position: { + x: -300, + y: -860, + width: 1280 + 300, + height: 720 + 860 + }, + options: { + panel: { + clip: true + }, + graphic: { + size: 1200, + symbolType: + '', + fill: '#a9efd6' + } + } + }, + { + id: 'arc1', + type: 'Shape', + zIndex: 0, + position: { + x: -257, + y: -810, + width: 1280 + 257, + height: 720 + 810 + }, + options: { + panel: { + clip: true + }, + graphic: { + size: 1200, + symbolType: + '', + fill: '#dadad8' + } + } + }, + + { + id: 'arc2', + type: 'Shape', + zIndex: 0, + position: { + x: -220, + y: -780, + width: 1280 + 220, + height: 720 + 780 + }, + options: { + panel: { + clip: true + }, + graphic: { + size: 1200, + symbolType: + '', + fill: '#fff' + } + } + }, + + { + id: 'leftTitle', + type: 'Text', + zIndex: 0, + position: { + x: 54, + y: 60, + width: 444, + height: 140 + }, + options: { + graphic: { + text: 'Big Data Technology Development and Management Word Cloud', + lineHeight: 40, + fontSize: 32, + textAlign: 'left', + textBaseline: 'top', + fontWeight: 'bolder', + lineClamp: 3, + wordBreak: 'break-word' + } + } + }, + + { + id: 'listIconLeft1', + type: 'Shape', + zIndex: 0, + position: { + x: 54, + y: 250, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listIconRight1', + type: 'Shape', + zIndex: 0, + position: { + x: 84, + y: 250, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listNo1', + type: 'Text', + zIndex: 0, + position: { + x: 95, + y: 277, + width: 50, + height: 50 + }, + options: { + graphic: { + text: '01', + lineHeight: 48, + fontSize: 16, + textAlign: 'center', + textBaseline: 'middle', + fontWeight: 'bold' + } + } + }, + + { + id: 'listContent1', + type: 'Text', + zIndex: 0, + position: { + x: 160, + y: 277, + width: 340, + height: 54 + }, + options: { + graphic: { + text: `This slide is 100% editable. Adapt it to your needs and capture your audience's attention.`, + lineHeight: 26, + fontSize: 16, + textAlign: 'left', + textBaseline: 'middle', + lineClamp: 2, + wordBreak: 'break-word' + } + } + }, + + { + id: 'listIconLeft2', + type: 'Shape', + zIndex: 0, + position: { + x: 54, + y: 360, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listIconRight2', + type: 'Shape', + zIndex: 0, + position: { + x: 84, + y: 360, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listNo2', + type: 'Text', + zIndex: 0, + position: { + x: 95, + y: 387, + width: 50, + height: 50 + }, + options: { + graphic: { + text: '02', + lineHeight: 48, + fontSize: 16, + textAlign: 'center', + textBaseline: 'middle', + fontWeight: 'bold' + } + } + }, + + { + id: 'listContent2', + type: 'Text', + zIndex: 0, + position: { + x: 160, + y: 387, + width: 340, + height: 54 + }, + options: { + graphic: { + text: `This slide is 100% editable. Adapt it to your needs and capture your audience's attention.`, + lineHeight: 26, + fontSize: 16, + textAlign: 'left', + textBaseline: 'middle', + lineClamp: 2, + wordBreak: 'break-word' + } + } + }, + + { + id: 'listIconLeft3', + type: 'Shape', + zIndex: 0, + position: { + x: 54, + y: 470, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listIconRight3', + type: 'Shape', + zIndex: 0, + position: { + x: 84, + y: 470, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listNo3', + type: 'Text', + zIndex: 0, + position: { + x: 95, + y: 497, + width: 50, + height: 50 + }, + options: { + graphic: { + text: '03', + lineHeight: 48, + fontSize: 16, + textAlign: 'center', + textBaseline: 'middle', + fontWeight: 'bold' + } + } + }, + + { + id: 'listContent3', + type: 'Text', + zIndex: 0, + position: { + x: 160, + y: 497, + width: 340, + height: 54 + }, + options: { + graphic: { + text: `This slide is 100% editable. Adapt it to your needs and capture your audience's attention.`, + lineHeight: 26, + fontSize: 16, + textAlign: 'left', + textBaseline: 'middle', + lineClamp: 2, + wordBreak: 'break-word' + } + } + }, + + { + id: 'listIconLeft4', + type: 'Shape', + zIndex: 0, + position: { + x: 54, + y: 580, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listIconRight4', + type: 'Shape', + zIndex: 0, + position: { + x: 84, + y: 580, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listNo4', + type: 'Text', + zIndex: 0, + position: { + x: 95, + y: 607, + width: 50, + height: 50 + }, + options: { + graphic: { + text: '04', + lineHeight: 48, + fontSize: 16, + textAlign: 'center', + textBaseline: 'middle', + fontWeight: 'bold' + } + } + }, + + { + id: 'listContent4', + type: 'Text', + zIndex: 0, + position: { + x: 160, + y: 607, + width: 340, + height: 54 + }, + options: { + graphic: { + text: `This slide is 100% editable. Adapt it to your needs and capture your audience's attention.`, + lineHeight: 26, + fontSize: 16, + textAlign: 'left', + textBaseline: 'middle', + lineClamp: 2, + wordBreak: 'break-word' + } + } + }, + + { + id: 'wordCloud', + type: 'VChart', + zIndex: 0, + position: { + x: 720, + y: 112, + width: 500, + height: 500 + }, + options: { + spec: { + type: 'wordCloud', + color: [ + '#30c695', + '#30c695', + '#4589a7', + '#57878b', + '#4589a7', + '#77a5a4', + '#c9f0e3', + '#c9f0e3', + '#323436', + '#323436' + ], + nameField: 'name', + valueField: 'value', + seriesField: 'name', + rotateAngles: [0, 90], + fontSizeRange: [10, 70], + maskShape: { + shape: 'circle', + type: 'geometric', + hollow: true, + backgroundColor: '#eee' + }, + word: { + padding: 2, + style: { + fontWeight: datum => { + return datum.index < 2 ? 'bolder' : datum.index < 20 ? 'bold' : 'normal'; + } + } + }, + data: { + name: 'baseData', + values: dataWordCloud + } + } + } + } + ] +}; + +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/project-goal.md b/docs/assets/examples/en/infographic/project-goal.md new file mode 100644 index 00000000..ebb9b491 --- /dev/null +++ b/docs/assets/examples/en/infographic/project-goal.md @@ -0,0 +1,457 @@ +--- +category: examples +group: infographic +title: Gauge Infographic(Project Goal Progress) +keywords: templates, visualization, gauge, goal, progress +order: 1-0 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/project-goal.jpeg +--- + +# Gauge Infographic(Project Goal Progress) + +## 代码演示 + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); +const dsl = { + acts: [ + { + id: 'defaultAct', + scenes: [ + { + id: 'defaultScene', + actions: [ + { + characterId: ['background', 'leftRect'], + characterActions: [ + { + action: 'appear' + } + ] + }, + + { + characterId: ['topArrow', 'topText'], + characterActions: [ + { + action: 'appear', + startTime: 0, + payload: [ + { + animation: { + duration: 400, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + }, + + { + characterId: ['leftIcon', 'leftTitle', 'leftMiddleLine'], + characterActions: [ + { + action: 'appear', + startTime: 400, + payload: [ + { + animation: { + duration: 200, + easing: 'linear', + effect: 'fade' + } + } + ] + } + ] + }, + + { + characterId: ['leftContent'], + characterActions: [ + { + action: 'appear', + startTime: 600, + payload: [ + { + animation: { + duration: 400, + easing: 'linear', + effect: 'move' + } + } + ] + } + ] + }, + + { + characterId: ['gaugeChart'], + characterActions: [ + { + action: 'appear', + startTime: 1000 + } + ] + }, + + { + characterId: ['targetText'], + characterActions: [ + { + action: 'appear', + startTime: 1000, + payload: [ + { + animation: { + duration: 400, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + } + ] + } + ] + } + ], + characters: [ + { + id: 'background', + type: 'Image', + zIndex: 0, + position: { + x: 0, + y: 0, + width: 1280, + height: 720 + }, + options: { + graphic: { + image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/resource/goal.jpeg' + } + } + }, + { + id: 'leftRect', + type: 'Rect', + zIndex: 0, + position: { + x: 0, + y: 0, + width: 500, + height: 720 + }, + options: { + graphic: { + fill: '#b66777', + fillOpacity: 1 + } + } + }, + { + id: 'topArrow', + type: 'Line', + zIndex: 0, + position: { + x: 0, + y: 0, + width: 1178, + height: 172 + }, + options: { + graphic: { + points: [ + { x: 0, y: 0 }, + { x: 1124, y: 0 }, + { x: 1178, y: 86 }, + { x: 1124, y: 172 }, + { x: 0, y: 172 }, + { x: 0, y: 0 } + ], + fill: '#f2f2f0' + } + } + }, + { + id: 'topText', + type: 'Text', + zIndex: 0, + position: { + x: 56, + y: 58, + width: 1124, + height: 172 + }, + options: { + graphic: { + text: 'Project Goal Completion Status Report', + fill: '#375470', + fontSize: 58, + textAlign: 'left', + fontWeight: 'bolder' + } + } + }, + + { + id: 'leftIcon', + type: 'Shape', + zIndex: 0, + position: { + x: 210, + y: 210, + width: 100, + height: 100 + }, + options: { + graphic: { + size: 50, + symbolType: + '', + stroke: '#fdf1e2', + fill: '#fdf1e2', + lineWidth: 0 + } + } + }, + + { + id: 'leftTitle', + type: 'Text', + zIndex: 0, + position: { + x: 250, + y: 328, + width: 3300, + height: 80 + }, + options: { + graphic: { + text: ['GOAL COMPLETION', 'STATUS UPDATE'], + fill: '#fdf1e2', + fontSize: 26, + textAlign: 'center', + fontWeight: 'bolder', + lineHeight: 36 + } + } + }, + + { + id: 'leftMiddleLine', + type: 'Rect', + zIndex: 0, + position: { + x: 174, + y: 442, + width: 178, + height: 5 + }, + options: { + graphic: { + fill: '#fdf1e2' + } + } + }, + + { + id: 'leftContent', + type: 'Text', + zIndex: 0, + position: { + x: 250, + y: 484, + width: 300, + height: 200 + }, + options: { + graphic: { + textConfig: [ + { + text: 'A functional version of the\n' + }, + { + text: 'mobile app' + }, + { + text: ' has been developed\n', + fontWeight: 'bolder' + }, + { + text: ' successfully.', + fontWeight: 'bolder' + }, + { + text: ' Howerer, there are\n' + }, + { + text: ' some vital changes we need to \n' + }, + { + text: ' make before the app is ready to \n' + }, + { + text: ' go into the launch phase. \n' + } + ], + fill: 'rgb(248 238 235)', + fontSize: 18, + lineHeight: 28, + textAlign: 'center' + } + } + }, + + { + id: 'gaugeChart', + type: 'VChart', + zIndex: 0, + position: { + x: 500, + y: 172, + width: 780, + height: 542 + }, + options: { + spec: { + type: 'gauge', + color: ['#e86d6d'], + data: [ + { + id: 'id0', + values: [ + { + type: '目标A', + value: 0.62 + } + ] + } + ], + categoryField: 'type', + valueField: 'value', + outerRadius: 0.95, + innerRadius: 0.5, + centerX: '50%', + centerY: '60%', + startAngle: -180, + endAngle: 0, + gauge: { + type: 'circularProgress', + progress: { + style: { + stroke: '#f2f2f2', + lineWidth: 0.5 + } + }, + track: { + style: { + fill: '#f2f2f2', + stroke: '#f2f2f2', + lineWidth: 0.5, + fillOpacity: 1 + } + } + }, + pin: { + visible: false + }, + pinBackground: { + width: 0.03, + height: 0.03, + style: { + fill: '#f2f2f2' + } + }, + pointer: { + type: 'rect', + width: 0.01, + style: { + fill: '#f2f2f2' + } + }, + extensionMark: [ + { + type: 'path', + style: { + path: (datum, ctx) => { + const { getCenter, getLayoutRadius } = ctx; + const layoutRadius = getLayoutRadius(); + const center = getCenter(); + const angle = ((-180 + 180 * 0.62) / 180) * Math.PI; + const radius = 0.5 * layoutRadius * 0.8; + const x0 = center.x + radius * Math.cos(angle); + const y0 = center.y + radius * Math.sin(angle); + const size = 20; + const x1 = center.x + (radius + size) * Math.cos(angle); + const y1 = center.y + (radius + size) * Math.sin(angle); + const x2 = x0 + (Math.cos(angle + Math.PI / 2) * size) / 2; + const y2 = y0 + (Math.sin(angle + +Math.PI / 2) * size) / 2; + const x3 = x0 + (Math.cos(angle - Math.PI / 2) * size) / 2; + const y3 = y0 + (Math.sin(angle - Math.PI / 2) * size) / 2; + + return `M${x1},${y1}L${x2},${y2}L${x3},${y3}Z`; + }, + fill: '#f2f2f2' + } + } + ], + axes: [ + { + orient: 'angle', + label: { + visible: false + }, + grid: { + visible: false + } + } + ] + } + } + }, + + { + id: 'targetText', + type: 'Text', + zIndex: 0, + position: { + x: 890, + y: 600, + width: 300, + height: 200 + }, + options: { + graphic: { + text: '62%', + fill: '#f2f2f2', + fontSize: 90, + textAlign: 'center', + textBaseline: 'middle', + fontWeight: 'bolder' + } + } + } + ] +}; + +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 5728eaba..fb54c3f5 100644 --- a/docs/assets/examples/menu.json +++ b/docs/assets/examples/menu.json @@ -304,6 +304,20 @@ "zh": "信息图模板-象形图: 新手撸猫指南", "en": "Pictogram Infographic: Cat Stroking Guide" } + }, + { + "path": "project-goal", + "title": { + "zh": "信息图模板-仪表盘: 项目目标进度", + "en": "Gauge Infographic: Project Goal Progress" + } + }, + { + "path": "big-data-wordcloud", + "title": { + "zh": "信息图模板-词云图: 大数据关键词", + "en": "Word Cloud Infographic: Big Data Keywords" + } } ] } diff --git a/docs/assets/examples/zh/infographic/big-data-wordcloud.md b/docs/assets/examples/zh/infographic/big-data-wordcloud.md new file mode 100644 index 00000000..494a5bd0 --- /dev/null +++ b/docs/assets/examples/zh/infographic/big-data-wordcloud.md @@ -0,0 +1,1256 @@ +--- +category: examples +group: infographic +title: Word Cloud Infographic(Big Data Keywords) +keywords: templates, visualization, wordcloud, big-data +order: 1-0 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/big-data-wordcloud.png +--- + +# 信息图模板-词云图（大数据关键词） + +## 代码演示 + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); +const dataWordCloud = [ + { + name: 'BIG', + value: 400 + }, + { + name: 'DATA', + value: 360 + }, + { + name: 'BASED', + value: 120 + }, + { + name: 'TRANSFER', + value: 120 + }, + { + name: 'CAPTURE', + value: 120 + }, + { + name: 'EXEBYTES', + value: 120 + }, + { + name: 'IDEA', + value: 120 + }, + { + name: 'PLAY', + value: 120 + }, + { + name: 'INCLUDE', + value: 120 + }, + { + name: 'LOGS', + value: 120 + }, + { + name: 'INTERNET', + value: 120 + }, + { + name: 'REL', + value: 120 + }, + { + name: 'SOFTWARE', + value: 120 + }, + { + name: 'WORLD', + value: 120 + }, + { + name: 'TECHNOLOGY', + value: 120 + }, + { + name: 'BILLION CAPTURE', + value: 120 + }, + { + name: 'CAPTURE', + value: 120 + }, + { + name: 'VALL', + value: 120 + }, + { + name: 'INCLUDE', + value: 120 + }, + { + name: 'SCIENTISTS', + value: 120 + }, + { + name: 'STORAGE', + value: 120 + }, + { + name: 'CAPABILITIES', + value: 120 + }, + { + name: 'NEW', + value: 120 + }, + { + name: 'SOFTWARE', + value: 120 + }, + { + name: 'PETABYTES', + value: 120 + }, + { + name: 'LARGE', + value: 120 + }, + { + name: 'BECOMES', + value: 120 + }, + { + name: 'SEARCH', + value: 120 + }, + { + name: 'PHYSIC', + value: 120 + }, + { + name: 'SOFT WARE', + value: 120 + }, + { + name: 'DEVELOPMENT', + value: 100 + }, + { + name: 'QUALITY', + value: 100 + }, + { + name: 'DATABASE', + value: 100 + }, + { + name: 'DEPBIDING', + value: 100 + }, + { + name: 'BECAUSE', + value: 100 + }, + { + name: 'CAPTURE DEDITOR', + value: 100 + }, + { + name: 'WERE', + value: 100 + }, + { + name: 'ONGBESKTOP', + value: 100 + }, + { + name: 'MANY LAN', + value: 100 + }, + { + name: 'PLAY', + value: 100 + }, + { + name: 'STORAGE', + value: 100 + }, + { + name: 'PART', + value: 100 + }, + { + name: 'LARGE', + value: 100 + }, + { + name: 'XEBYTES', + value: 100 + }, + { + name: 'SETS', + value: 100 + }, + { + name: 'ORGANIZATION', + value: 100 + }, + { + name: 'IDEA', + value: 100 + }, + { + name: 'INTERNET', + value: 100 + }, + { + name: 'RESEAR', + value: 100 + }, + { + name: 'BIG', + value: 100 + }, + { + name: 'VOLUME', + value: 100 + }, + { + name: 'DATABASE USING', + value: 100 + }, + { + name: 'DATASAGE', + value: 100 + }, + { + name: 'MILLION', + value: 100 + }, + { + name: 'PART DEVELOPMBIT', + value: 100 + }, + { + name: 'VALL', + value: 100 + }, + { + name: 'LARGE', + value: 100 + }, + { + name: 'MANAGEMENT', + value: 100 + }, + { + name: 'PHYSICS', + value: 100 + }, + { + name: 'MILLION', + value: 100 + }, + { + name: 'DEDATOR', + value: 50 + }, + { + name: 'VALL', + value: 50 + }, + { + name: 'IDEA', + value: 50 + }, + { + name: 'SEARCH', + value: 50 + }, + { + name: 'SEARCH', + value: 50 + }, + { + name: 'CAPING REAL', + value: 50 + }, + { + name: 'SETS FUTURE', + value: 50 + }, + { + name: 'GROW', + value: 50 + }, + { + name: 'SOFTWARE', + value: 50 + }, + { + name: 'DATA', + value: 50 + }, + { + name: 'SAN', + value: 50 + }, + { + name: 'SOFTWARE', + value: 50 + }, + { + name: 'DETS', + value: 50 + }, + { + name: 'DATABASE BEFORE', + value: 50 + }, + { + name: 'MANAGEMENT', + value: 50 + }, + { + name: 'DEVELOPMENT', + value: 50 + }, + { + name: 'LOWING', + value: 50 + }, + { + name: 'SEARCH', + value: 50 + }, + { + name: 'MOST', + value: 50 + }, + { + name: 'WAN', + value: 50 + }, + { + name: 'BILLION', + value: 50 + }, + { + name: 'TOOLS', + value: 50 + }, + { + name: 'STORME', + value: 50 + }, + { + name: 'DATABASE', + value: 50 + }, + { + name: 'SETS', + value: 50 + }, + { + name: 'DEADOFTWA', + value: 50 + }, + { + name: 'PHYSICS', + value: 50 + }, + { + name: 'SOFTWARE', + value: 50 + }, + { + name: 'SOFTWARE', + value: 50 + }, + { + name: 'SEARCH', + value: 50 + }, + { + name: 'BLOPM', + value: 50 + }, + { + name: 'PHYSICS', + value: 50 + }, + { + name: 'GEENTOP', + value: 50 + }, + { + name: 'MANY', + value: 50 + }, + { + name: 'INTERNET', + value: 50 + }, + { + name: 'TECHNOLOGY', + value: 50 + }, + { + name: 'CE NEW', + value: 50 + }, + { + name: 'BILLION', + value: 50 + }, + { + name: 'PART', + value: 50 + }, + { + name: 'TOOLS', + value: 50 + }, + { + name: 'PETABYTES- ALLOWING', + value: 50 + }, + { + name: 'SOCIAL', + value: 50 + }, + { + name: 'DEVELOPMENT', + value: 50 + }, + { + name: 'DEVEPLOMENT', + value: 50 + }, + { + name: 'NAS', + value: 50 + }, + { + name: 'DATABASE', + value: 50 + }, + { + name: 'BURNG', + value: 50 + }, + { + name: 'MANAGEMENT', + value: 50 + }, + { + name: 'WITH', + value: 50 + }, + { + name: 'TOTAL', + value: 50 + }, + { + name: 'AMOUNT', + value: 50 + }, + { + name: 'NEW', + value: 50 + }, + { + name: 'DATABASE', + value: 50 + }, + { + name: 'PHYSIOS', + value: 50 + }, + { + name: 'VILUME', + value: 50 + }, + { + name: 'MANAGEMENT', + value: 50 + }, + { + name: 'ALLOWINE', + value: 50 + }, + { + name: 'INFORMATIONDENCE', + value: 50 + }, + { + name: 'PROCESS', + value: 50 + }, + { + name: 'RELATED', + value: 50 + } +].map((entry, index) => { + return { + ...entry, + index + }; +}); +const dsl = { + acts: [ + { + id: 'defaultAct', + scenes: [ + { + id: 'defaultScene', + actions: [ + { + characterId: [ + 'background', + 'arc0', + 'arc1', + 'arc2', + 'leftTitle' + // 'listIconLeft1', + // 'listIconRight1', + // 'listNo1', + // 'listContent1', + + // 'listIconLeft2', + // 'listIconRight2', + // 'listNo2', + // 'listContent2', + + // 'listIconLeft3', + // 'listIconRight3', + // 'listNo3', + // 'listContent3', + + // 'listIconLeft4', + // 'listIconRight4', + // 'listNo4', + // 'listContent4', + + // 'wordCloud' + ], + characterActions: [ + { + action: 'appear' + } + ] + }, + + { + characterId: ['leftTitle'], + characterActions: [ + { + action: 'appear', + startTime: 0, + payload: [ + { + animation: { + duration: 400, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + }, + + { + characterId: ['listIconLeft1', 'listIconRight1', 'listNo1'], + characterActions: [ + { + action: 'appear', + startTime: 400, + payload: [ + { + animation: { + duration: 200, + easing: 'linear', + effect: 'fade' + } + } + ] + } + ] + }, + { + characterId: ['listContent1'], + characterActions: [ + { + action: 'appear', + startTime: 600, + payload: [ + { + animation: { + duration: 600, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + }, + + { + characterId: ['listIconLeft2', 'listIconRight2', 'listNo2'], + characterActions: [ + { + action: 'appear', + startTime: 1200, + payload: [ + { + animation: { + duration: 200, + easing: 'linear', + effect: 'fade' + } + } + ] + } + ] + }, + { + characterId: ['listContent2'], + characterActions: [ + { + action: 'appear', + startTime: 1400, + payload: [ + { + animation: { + duration: 600, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + }, + + { + characterId: ['listIconLeft3', 'listIconRight3', 'listNo3'], + characterActions: [ + { + action: 'appear', + startTime: 2000, + payload: [ + { + animation: { + duration: 200, + easing: 'linear', + effect: 'fade' + } + } + ] + } + ] + }, + { + characterId: ['listContent3'], + characterActions: [ + { + action: 'appear', + startTime: 2200, + payload: [ + { + animation: { + duration: 600, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + }, + + { + characterId: ['listIconLeft4', 'listIconRight4', 'listNo4'], + characterActions: [ + { + action: 'appear', + startTime: 2800, + payload: [ + { + animation: { + duration: 200, + easing: 'linear', + effect: 'fade' + } + } + ] + } + ] + }, + { + characterId: ['listContent4'], + characterActions: [ + { + action: 'appear', + startTime: 3000, + payload: [ + { + animation: { + duration: 600, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + }, + { + characterId: ['wordCloud'], + characterActions: [ + { + action: 'appear', + startTime: 3600, + payload: [ + { + animation: { + selector: '*', + duration: 100, + easing: 'linear', + effect: 'scale', + oneByOne: true + } + } + ] + } + ] + } + ] + } + ] + } + ], + characters: [ + { + id: 'background', + type: 'Rect', + zIndex: 0, + position: { + x: 0, + y: 0, + width: 1280, + height: 720 + }, + options: { + graphic: { + fill: '#fff' + } + } + }, + + { + id: 'arc0', + type: 'Shape', + zIndex: 0, + position: { + x: -300, + y: -860, + width: 1280 + 300, + height: 720 + 860 + }, + options: { + panel: { + clip: true + }, + graphic: { + size: 1200, + symbolType: + '', + fill: '#a9efd6' + } + } + }, + { + id: 'arc1', + type: 'Shape', + zIndex: 0, + position: { + x: -257, + y: -810, + width: 1280 + 257, + height: 720 + 810 + }, + options: { + panel: { + clip: true + }, + graphic: { + size: 1200, + symbolType: + '', + fill: '#dadad8' + } + } + }, + + { + id: 'arc2', + type: 'Shape', + zIndex: 0, + position: { + x: -220, + y: -780, + width: 1280 + 220, + height: 720 + 780 + }, + options: { + panel: { + clip: true + }, + graphic: { + size: 1200, + symbolType: + '', + fill: '#fff' + } + } + }, + + { + id: 'leftTitle', + type: 'Text', + zIndex: 0, + position: { + x: 54, + y: 60, + width: 444, + height: 140 + }, + options: { + graphic: { + text: 'Big Data Technology Development and Management Word Cloud', + lineHeight: 40, + fontSize: 32, + textAlign: 'left', + textBaseline: 'top', + fontWeight: 'bolder', + lineClamp: 3, + wordBreak: 'break-word' + } + } + }, + + { + id: 'listIconLeft1', + type: 'Shape', + zIndex: 0, + position: { + x: 54, + y: 250, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listIconRight1', + type: 'Shape', + zIndex: 0, + position: { + x: 84, + y: 250, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listNo1', + type: 'Text', + zIndex: 0, + position: { + x: 95, + y: 277, + width: 50, + height: 50 + }, + options: { + graphic: { + text: '01', + lineHeight: 48, + fontSize: 16, + textAlign: 'center', + textBaseline: 'middle', + fontWeight: 'bold' + } + } + }, + + { + id: 'listContent1', + type: 'Text', + zIndex: 0, + position: { + x: 160, + y: 277, + width: 340, + height: 54 + }, + options: { + graphic: { + text: `This slide is 100% editable. Adapt it to your needs and capture your audience's attention.`, + lineHeight: 26, + fontSize: 16, + textAlign: 'left', + textBaseline: 'middle', + lineClamp: 2, + wordBreak: 'break-word' + } + } + }, + + { + id: 'listIconLeft2', + type: 'Shape', + zIndex: 0, + position: { + x: 54, + y: 360, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listIconRight2', + type: 'Shape', + zIndex: 0, + position: { + x: 84, + y: 360, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listNo2', + type: 'Text', + zIndex: 0, + position: { + x: 95, + y: 387, + width: 50, + height: 50 + }, + options: { + graphic: { + text: '02', + lineHeight: 48, + fontSize: 16, + textAlign: 'center', + textBaseline: 'middle', + fontWeight: 'bold' + } + } + }, + + { + id: 'listContent2', + type: 'Text', + zIndex: 0, + position: { + x: 160, + y: 387, + width: 340, + height: 54 + }, + options: { + graphic: { + text: `This slide is 100% editable. Adapt it to your needs and capture your audience's attention.`, + lineHeight: 26, + fontSize: 16, + textAlign: 'left', + textBaseline: 'middle', + lineClamp: 2, + wordBreak: 'break-word' + } + } + }, + + { + id: 'listIconLeft3', + type: 'Shape', + zIndex: 0, + position: { + x: 54, + y: 470, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listIconRight3', + type: 'Shape', + zIndex: 0, + position: { + x: 84, + y: 470, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listNo3', + type: 'Text', + zIndex: 0, + position: { + x: 95, + y: 497, + width: 50, + height: 50 + }, + options: { + graphic: { + text: '03', + lineHeight: 48, + fontSize: 16, + textAlign: 'center', + textBaseline: 'middle', + fontWeight: 'bold' + } + } + }, + + { + id: 'listContent3', + type: 'Text', + zIndex: 0, + position: { + x: 160, + y: 497, + width: 340, + height: 54 + }, + options: { + graphic: { + text: `This slide is 100% editable. Adapt it to your needs and capture your audience's attention.`, + lineHeight: 26, + fontSize: 16, + textAlign: 'left', + textBaseline: 'middle', + lineClamp: 2, + wordBreak: 'break-word' + } + } + }, + + { + id: 'listIconLeft4', + type: 'Shape', + zIndex: 0, + position: { + x: 54, + y: 580, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listIconRight4', + type: 'Shape', + zIndex: 0, + position: { + x: 84, + y: 580, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listNo4', + type: 'Text', + zIndex: 0, + position: { + x: 95, + y: 607, + width: 50, + height: 50 + }, + options: { + graphic: { + text: '04', + lineHeight: 48, + fontSize: 16, + textAlign: 'center', + textBaseline: 'middle', + fontWeight: 'bold' + } + } + }, + + { + id: 'listContent4', + type: 'Text', + zIndex: 0, + position: { + x: 160, + y: 607, + width: 340, + height: 54 + }, + options: { + graphic: { + text: `This slide is 100% editable. Adapt it to your needs and capture your audience's attention.`, + lineHeight: 26, + fontSize: 16, + textAlign: 'left', + textBaseline: 'middle', + lineClamp: 2, + wordBreak: 'break-word' + } + } + }, + + { + id: 'wordCloud', + type: 'VChart', + zIndex: 0, + position: { + x: 720, + y: 112, + width: 500, + height: 500 + }, + options: { + spec: { + type: 'wordCloud', + color: [ + '#30c695', + '#30c695', + '#4589a7', + '#57878b', + '#4589a7', + '#77a5a4', + '#c9f0e3', + '#c9f0e3', + '#323436', + '#323436' + ], + nameField: 'name', + valueField: 'value', + seriesField: 'name', + rotateAngles: [0, 90], + fontSizeRange: [10, 70], + maskShape: { + shape: 'circle', + type: 'geometric', + hollow: true, + backgroundColor: '#eee' + }, + word: { + padding: 2, + style: { + fontWeight: datum => { + return datum.index < 2 ? 'bolder' : datum.index < 20 ? 'bold' : 'normal'; + } + } + }, + data: { + name: 'baseData', + values: dataWordCloud + } + } + } + } + ] +}; + +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/project-goal.md b/docs/assets/examples/zh/infographic/project-goal.md new file mode 100644 index 00000000..5311e5e9 --- /dev/null +++ b/docs/assets/examples/zh/infographic/project-goal.md @@ -0,0 +1,457 @@ +--- +category: examples +group: infographic +title: Gauge Infographic(Project Goal Progress) +keywords: templates, visualization, gauge, goal, progress +order: 1-0 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/project-goal.jpeg +--- + +# 信息图模板-仪表盘（项目目标进度） + +## 代码演示 + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); +const dsl = { + acts: [ + { + id: 'defaultAct', + scenes: [ + { + id: 'defaultScene', + actions: [ + { + characterId: ['background', 'leftRect'], + characterActions: [ + { + action: 'appear' + } + ] + }, + + { + characterId: ['topArrow', 'topText'], + characterActions: [ + { + action: 'appear', + startTime: 0, + payload: [ + { + animation: { + duration: 400, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + }, + + { + characterId: ['leftIcon', 'leftTitle', 'leftMiddleLine'], + characterActions: [ + { + action: 'appear', + startTime: 400, + payload: [ + { + animation: { + duration: 200, + easing: 'linear', + effect: 'fade' + } + } + ] + } + ] + }, + + { + characterId: ['leftContent'], + characterActions: [ + { + action: 'appear', + startTime: 600, + payload: [ + { + animation: { + duration: 400, + easing: 'linear', + effect: 'move' + } + } + ] + } + ] + }, + + { + characterId: ['gaugeChart'], + characterActions: [ + { + action: 'appear', + startTime: 1000 + } + ] + }, + + { + characterId: ['targetText'], + characterActions: [ + { + action: 'appear', + startTime: 1000, + payload: [ + { + animation: { + duration: 400, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + } + ] + } + ] + } + ], + characters: [ + { + id: 'background', + type: 'Image', + zIndex: 0, + position: { + x: 0, + y: 0, + width: 1280, + height: 720 + }, + options: { + graphic: { + image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/resource/goal.jpeg' + } + } + }, + { + id: 'leftRect', + type: 'Rect', + zIndex: 0, + position: { + x: 0, + y: 0, + width: 500, + height: 720 + }, + options: { + graphic: { + fill: '#b66777', + fillOpacity: 1 + } + } + }, + { + id: 'topArrow', + type: 'Line', + zIndex: 0, + position: { + x: 0, + y: 0, + width: 1178, + height: 172 + }, + options: { + graphic: { + points: [ + { x: 0, y: 0 }, + { x: 1124, y: 0 }, + { x: 1178, y: 86 }, + { x: 1124, y: 172 }, + { x: 0, y: 172 }, + { x: 0, y: 0 } + ], + fill: '#f2f2f0' + } + } + }, + { + id: 'topText', + type: 'Text', + zIndex: 0, + position: { + x: 56, + y: 58, + width: 1124, + height: 172 + }, + options: { + graphic: { + text: 'Project Goal Completion Status Report', + fill: '#375470', + fontSize: 58, + textAlign: 'left', + fontWeight: 'bolder' + } + } + }, + + { + id: 'leftIcon', + type: 'Shape', + zIndex: 0, + position: { + x: 210, + y: 210, + width: 100, + height: 100 + }, + options: { + graphic: { + size: 50, + symbolType: + '', + stroke: '#fdf1e2', + fill: '#fdf1e2', + lineWidth: 0 + } + } + }, + + { + id: 'leftTitle', + type: 'Text', + zIndex: 0, + position: { + x: 250, + y: 328, + width: 3300, + height: 80 + }, + options: { + graphic: { + text: ['GOAL COMPLETION', 'STATUS UPDATE'], + fill: '#fdf1e2', + fontSize: 26, + textAlign: 'center', + fontWeight: 'bolder', + lineHeight: 36 + } + } + }, + + { + id: 'leftMiddleLine', + type: 'Rect', + zIndex: 0, + position: { + x: 174, + y: 442, + width: 178, + height: 5 + }, + options: { + graphic: { + fill: '#fdf1e2' + } + } + }, + + { + id: 'leftContent', + type: 'Text', + zIndex: 0, + position: { + x: 250, + y: 484, + width: 300, + height: 200 + }, + options: { + graphic: { + textConfig: [ + { + text: 'A functional version of the\n' + }, + { + text: 'mobile app' + }, + { + text: ' has been developed\n', + fontWeight: 'bolder' + }, + { + text: ' successfully.', + fontWeight: 'bolder' + }, + { + text: ' Howerer, there are\n' + }, + { + text: ' some vital changes we need to \n' + }, + { + text: ' make before the app is ready to \n' + }, + { + text: ' go into the launch phase. \n' + } + ], + fill: 'rgb(248 238 235)', + fontSize: 18, + lineHeight: 28, + textAlign: 'center' + } + } + }, + + { + id: 'gaugeChart', + type: 'VChart', + zIndex: 0, + position: { + x: 500, + y: 172, + width: 780, + height: 542 + }, + options: { + spec: { + type: 'gauge', + color: ['#e86d6d'], + data: [ + { + id: 'id0', + values: [ + { + type: '目标A', + value: 0.62 + } + ] + } + ], + categoryField: 'type', + valueField: 'value', + outerRadius: 0.95, + innerRadius: 0.5, + centerX: '50%', + centerY: '60%', + startAngle: -180, + endAngle: 0, + gauge: { + type: 'circularProgress', + progress: { + style: { + stroke: '#f2f2f2', + lineWidth: 0.5 + } + }, + track: { + style: { + fill: '#f2f2f2', + stroke: '#f2f2f2', + lineWidth: 0.5, + fillOpacity: 1 + } + } + }, + pin: { + visible: false + }, + pinBackground: { + width: 0.03, + height: 0.03, + style: { + fill: '#f2f2f2' + } + }, + pointer: { + type: 'rect', + width: 0.01, + style: { + fill: '#f2f2f2' + } + }, + extensionMark: [ + { + type: 'path', + style: { + path: (datum, ctx) => { + const { getCenter, getLayoutRadius } = ctx; + const layoutRadius = getLayoutRadius(); + const center = getCenter(); + const angle = ((-180 + 180 * 0.62) / 180) * Math.PI; + const radius = 0.5 * layoutRadius * 0.8; + const x0 = center.x + radius * Math.cos(angle); + const y0 = center.y + radius * Math.sin(angle); + const size = 20; + const x1 = center.x + (radius + size) * Math.cos(angle); + const y1 = center.y + (radius + size) * Math.sin(angle); + const x2 = x0 + (Math.cos(angle + Math.PI / 2) * size) / 2; + const y2 = y0 + (Math.sin(angle + +Math.PI / 2) * size) / 2; + const x3 = x0 + (Math.cos(angle - Math.PI / 2) * size) / 2; + const y3 = y0 + (Math.sin(angle - Math.PI / 2) * size) / 2; + + return `M${x1},${y1}L${x2},${y2}L${x3},${y3}Z`; + }, + fill: '#f2f2f2' + } + } + ], + axes: [ + { + orient: 'angle', + label: { + visible: false + }, + grid: { + visible: false + } + } + ] + } + } + }, + + { + id: 'targetText', + type: 'Text', + zIndex: 0, + position: { + x: 890, + y: 600, + width: 300, + height: 200 + }, + options: { + graphic: { + text: '62%', + fill: '#f2f2f2', + fontSize: 90, + textAlign: 'center', + textBaseline: 'middle', + fontWeight: 'bolder' + } + } + } + ] +}; + +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 6e0e88f9..bddf075c 100644 --- a/packages/vstory/demo/src/App.tsx +++ b/packages/vstory/demo/src/App.tsx @@ -40,6 +40,8 @@ import { LabelWorks } from './demos/works/label'; import { NanJinWordCloud } from './demos/works/nanjin-wordcloud'; import { NationalMemorial } from './demos/works/NationalMemorial'; import { BarWorkingInSameIndustry } from './demos/infographic/bar-work-in-same-industry'; +import { ProjectGoal } from './demos/infographic/project-goal'; +import { BigDataWordCloud } from './demos/infographic/big-data-wordcloud'; type MenusType = ( | { @@ -59,6 +61,8 @@ type MenusType = ( const App = () => { const [activeName, setActiveName] = useLocalStorage('menuName', ''); + + console.log(activeName); const menus = [ { name: 'Base', @@ -237,6 +241,14 @@ const App = () => { { name: 'WorkingInSameIndustry', component: BarWorkingInSameIndustry + }, + { + name: 'ProjectGoal', + component: ProjectGoal + }, + { + name: 'BigDataWordCloud', + component: BigDataWordCloud } ] }, diff --git a/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx b/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx new file mode 100644 index 00000000..5765a240 --- /dev/null +++ b/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx @@ -0,0 +1,1251 @@ +import React, { useEffect } from 'react'; +import { Player, Story } from '../../../../../vstory-core/src'; +import { registerAll } from '../../../../src'; + +const dataWordCloud = [ + { + name: 'BIG', + value: 400 + }, + { + name: 'DATA', + value: 360 + }, + { + name: 'BASED', + value: 120 + }, + { + name: 'TRANSFER', + value: 120 + }, + { + name: 'CAPTURE', + value: 120 + }, + { + name: 'EXEBYTES', + value: 120 + }, + { + name: 'IDEA', + value: 120 + }, + { + name: 'PLAY', + value: 120 + }, + { + name: 'INCLUDE', + value: 120 + }, + { + name: 'LOGS', + value: 120 + }, + { + name: 'INTERNET', + value: 120 + }, + { + name: 'REL', + value: 120 + }, + { + name: 'SOFTWARE', + value: 120 + }, + { + name: 'WORLD', + value: 120 + }, + { + name: 'TECHNOLOGY', + value: 120 + }, + { + name: 'BILLION CAPTURE', + value: 120 + }, + { + name: 'CAPTURE', + value: 120 + }, + { + name: 'VALL', + value: 120 + }, + { + name: 'INCLUDE', + value: 120 + }, + { + name: 'SCIENTISTS', + value: 120 + }, + { + name: 'STORAGE', + value: 120 + }, + { + name: 'CAPABILITIES', + value: 120 + }, + { + name: 'NEW', + value: 120 + }, + { + name: 'SOFTWARE', + value: 120 + }, + { + name: 'PETABYTES', + value: 120 + }, + { + name: 'LARGE', + value: 120 + }, + { + name: 'BECOMES', + value: 120 + }, + { + name: 'SEARCH', + value: 120 + }, + { + name: 'PHYSIC', + value: 120 + }, + { + name: 'SOFT WARE', + value: 120 + }, + { + name: 'DEVELOPMENT', + value: 100 + }, + { + name: 'QUALITY', + value: 100 + }, + { + name: 'DATABASE', + value: 100 + }, + { + name: 'DEPBIDING', + value: 100 + }, + { + name: 'BECAUSE', + value: 100 + }, + { + name: 'CAPTURE DEDITOR', + value: 100 + }, + { + name: 'WERE', + value: 100 + }, + { + name: 'ONGBESKTOP', + value: 100 + }, + { + name: 'MANY LAN', + value: 100 + }, + { + name: 'PLAY', + value: 100 + }, + { + name: 'STORAGE', + value: 100 + }, + { + name: 'PART', + value: 100 + }, + { + name: 'LARGE', + value: 100 + }, + { + name: 'XEBYTES', + value: 100 + }, + { + name: 'SETS', + value: 100 + }, + { + name: 'ORGANIZATION', + value: 100 + }, + { + name: 'IDEA', + value: 100 + }, + { + name: 'INTERNET', + value: 100 + }, + { + name: 'RESEAR', + value: 100 + }, + { + name: 'BIG', + value: 100 + }, + { + name: 'VOLUME', + value: 100 + }, + { + name: 'DATABASE USING', + value: 100 + }, + { + name: 'DATASAGE', + value: 100 + }, + { + name: 'MILLION', + value: 100 + }, + { + name: 'PART DEVELOPMBIT', + value: 100 + }, + { + name: 'VALL', + value: 100 + }, + { + name: 'LARGE', + value: 100 + }, + { + name: 'MANAGEMENT', + value: 100 + }, + { + name: 'PHYSICS', + value: 100 + }, + { + name: 'MILLION', + value: 100 + }, + { + name: 'DEDATOR', + value: 50 + }, + { + name: 'VALL', + value: 50 + }, + { + name: 'IDEA', + value: 50 + }, + { + name: 'SEARCH', + value: 50 + }, + { + name: 'SEARCH', + value: 50 + }, + { + name: 'CAPING REAL', + value: 50 + }, + { + name: 'SETS FUTURE', + value: 50 + }, + { + name: 'GROW', + value: 50 + }, + { + name: 'SOFTWARE', + value: 50 + }, + { + name: 'DATA', + value: 50 + }, + { + name: 'SAN', + value: 50 + }, + { + name: 'SOFTWARE', + value: 50 + }, + { + name: 'DETS', + value: 50 + }, + { + name: 'DATABASE BEFORE', + value: 50 + }, + { + name: 'MANAGEMENT', + value: 50 + }, + { + name: 'DEVELOPMENT', + value: 50 + }, + { + name: 'LOWING', + value: 50 + }, + { + name: 'SEARCH', + value: 50 + }, + { + name: 'MOST', + value: 50 + }, + { + name: 'WAN', + value: 50 + }, + { + name: 'BILLION', + value: 50 + }, + { + name: 'TOOLS', + value: 50 + }, + { + name: 'STORME', + value: 50 + }, + { + name: 'DATABASE', + value: 50 + }, + { + name: 'SETS', + value: 50 + }, + { + name: 'DEADOFTWA', + value: 50 + }, + { + name: 'PHYSICS', + value: 50 + }, + { + name: 'SOFTWARE', + value: 50 + }, + { + name: 'SOFTWARE', + value: 50 + }, + { + name: 'SEARCH', + value: 50 + }, + { + name: 'BLOPM', + value: 50 + }, + { + name: 'PHYSICS', + value: 50 + }, + { + name: 'GEENTOP', + value: 50 + }, + { + name: 'MANY', + value: 50 + }, + { + name: 'INTERNET', + value: 50 + }, + { + name: 'TECHNOLOGY', + value: 50 + }, + { + name: 'CE NEW', + value: 50 + }, + { + name: 'BILLION', + value: 50 + }, + { + name: 'PART', + value: 50 + }, + { + name: 'TOOLS', + value: 50 + }, + { + name: 'PETABYTES- ALLOWING', + value: 50 + }, + { + name: 'SOCIAL', + value: 50 + }, + { + name: 'DEVELOPMENT', + value: 50 + }, + { + name: 'DEVEPLOMENT', + value: 50 + }, + { + name: 'NAS', + value: 50 + }, + { + name: 'DATABASE', + value: 50 + }, + { + name: 'BURNG', + value: 50 + }, + { + name: 'MANAGEMENT', + value: 50 + }, + { + name: 'WITH', + value: 50 + }, + { + name: 'TOTAL', + value: 50 + }, + { + name: 'AMOUNT', + value: 50 + }, + { + name: 'NEW', + value: 50 + }, + { + name: 'DATABASE', + value: 50 + }, + { + name: 'PHYSIOS', + value: 50 + }, + { + name: 'VILUME', + value: 50 + }, + { + name: 'MANAGEMENT', + value: 50 + }, + { + name: 'ALLOWINE', + value: 50 + }, + { + name: 'INFORMATIONDENCE', + value: 50 + }, + { + name: 'PROCESS', + value: 50 + }, + { + name: 'RELATED', + value: 50 + } +].map((entry, index) => { + return { + ...entry, + index + }; +}); + +registerAll(); +export const BigDataWordCloud = () => { + const id = 'BigDataWordCloud'; + useEffect(() => { + const container = document.getElementById(id); + const canvas = document.createElement('canvas'); + container?.appendChild(canvas); + + const dsl = { + acts: [ + { + id: 'defaultAct', + scenes: [ + { + id: 'defaultScene', + actions: [ + { + characterId: [ + 'background', + 'arc0', + 'arc1', + 'arc2', + 'leftTitle' + // 'listIconLeft1', + // 'listIconRight1', + // 'listNo1', + // 'listContent1', + + // 'listIconLeft2', + // 'listIconRight2', + // 'listNo2', + // 'listContent2', + + // 'listIconLeft3', + // 'listIconRight3', + // 'listNo3', + // 'listContent3', + + // 'listIconLeft4', + // 'listIconRight4', + // 'listNo4', + // 'listContent4', + + // 'wordCloud' + ], + characterActions: [ + { + action: 'appear' + } + ] + }, + + { + characterId: ['leftTitle'], + characterActions: [ + { + action: 'appear', + startTime: 0, + payload: [ + { + animation: { + duration: 400, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + }, + + { + characterId: ['listIconLeft1', 'listIconRight1', 'listNo1'], + characterActions: [ + { + action: 'appear', + startTime: 400, + payload: [ + { + animation: { + duration: 200, + easing: 'linear', + effect: 'fade' + } + } + ] + } + ] + }, + { + characterId: ['listContent1'], + characterActions: [ + { + action: 'appear', + startTime: 600, + payload: [ + { + animation: { + duration: 600, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + }, + + { + characterId: ['listIconLeft2', 'listIconRight2', 'listNo2'], + characterActions: [ + { + action: 'appear', + startTime: 1200, + payload: [ + { + animation: { + duration: 200, + easing: 'linear', + effect: 'fade' + } + } + ] + } + ] + }, + { + characterId: ['listContent2'], + characterActions: [ + { + action: 'appear', + startTime: 1400, + payload: [ + { + animation: { + duration: 600, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + }, + + { + characterId: ['listIconLeft3', 'listIconRight3', 'listNo3'], + characterActions: [ + { + action: 'appear', + startTime: 2000, + payload: [ + { + animation: { + duration: 200, + easing: 'linear', + effect: 'fade' + } + } + ] + } + ] + }, + { + characterId: ['listContent3'], + characterActions: [ + { + action: 'appear', + startTime: 2200, + payload: [ + { + animation: { + duration: 600, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + }, + + { + characterId: ['listIconLeft4', 'listIconRight4', 'listNo4'], + characterActions: [ + { + action: 'appear', + startTime: 2800, + payload: [ + { + animation: { + duration: 200, + easing: 'linear', + effect: 'fade' + } + } + ] + } + ] + }, + { + characterId: ['listContent4'], + characterActions: [ + { + action: 'appear', + startTime: 3000, + payload: [ + { + animation: { + duration: 600, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + }, + { + characterId: ['wordCloud'], + characterActions: [ + { + action: 'appear', + startTime: 3600, + payload: [ + { + animation: { + selector: '*', + duration: 100, + easing: 'linear', + effect: 'scale', + oneByOne: true + } + } + ] + } + ] + } + ] + } + ] + } + ], + characters: [ + { + id: 'background', + type: 'Rect', + zIndex: 0, + position: { + x: 0, + y: 0, + width: 1280, + height: 720 + }, + options: { + graphic: { + fill: '#fff' + } + } + }, + + { + id: 'arc0', + type: 'Shape', + zIndex: 0, + position: { + x: -300, + y: -860, + width: 1280 + 300, + height: 720 + 860 + }, + options: { + panel: { + clip: true + }, + graphic: { + size: 1200, + symbolType: + '', + fill: '#a9efd6' + } + } + }, + { + id: 'arc1', + type: 'Shape', + zIndex: 0, + position: { + x: -257, + y: -810, + width: 1280 + 257, + height: 720 + 810 + }, + options: { + panel: { + clip: true + }, + graphic: { + size: 1200, + symbolType: + '', + fill: '#dadad8' + } + } + }, + + { + id: 'arc2', + type: 'Shape', + zIndex: 0, + position: { + x: -220, + y: -780, + width: 1280 + 220, + height: 720 + 780 + }, + options: { + panel: { + clip: true + }, + graphic: { + size: 1200, + symbolType: + '', + fill: '#fff' + } + } + }, + + { + id: 'leftTitle', + type: 'Text', + zIndex: 0, + position: { + x: 54, + y: 60, + width: 444, + height: 140 + }, + options: { + graphic: { + text: 'Big Data Technology Development and Management Word Cloud', + lineHeight: 40, + fontSize: 32, + textAlign: 'left', + textBaseline: 'top', + fontWeight: 'bolder', + lineClamp: 3, + wordBreak: 'break-word' + } + } + }, + + { + id: 'listIconLeft1', + type: 'Shape', + zIndex: 0, + position: { + x: 54, + y: 250, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listIconRight1', + type: 'Shape', + zIndex: 0, + position: { + x: 84, + y: 250, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listNo1', + type: 'Text', + zIndex: 0, + position: { + x: 95, + y: 277, + width: 50, + height: 50 + }, + options: { + graphic: { + text: '01', + lineHeight: 48, + fontSize: 16, + textAlign: 'center', + textBaseline: 'middle', + fontWeight: 'bold' + } + } + }, + + { + id: 'listContent1', + type: 'Text', + zIndex: 0, + position: { + x: 160, + y: 277, + width: 340, + height: 54 + }, + options: { + graphic: { + text: `This slide is 100% editable. Adapt it to your needs and capture your audience's attention.`, + lineHeight: 26, + fontSize: 16, + textAlign: 'left', + textBaseline: 'middle', + lineClamp: 2, + wordBreak: 'break-word' + } + } + }, + + { + id: 'listIconLeft2', + type: 'Shape', + zIndex: 0, + position: { + x: 54, + y: 360, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listIconRight2', + type: 'Shape', + zIndex: 0, + position: { + x: 84, + y: 360, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listNo2', + type: 'Text', + zIndex: 0, + position: { + x: 95, + y: 387, + width: 50, + height: 50 + }, + options: { + graphic: { + text: '02', + lineHeight: 48, + fontSize: 16, + textAlign: 'center', + textBaseline: 'middle', + fontWeight: 'bold' + } + } + }, + + { + id: 'listContent2', + type: 'Text', + zIndex: 0, + position: { + x: 160, + y: 387, + width: 340, + height: 54 + }, + options: { + graphic: { + text: `This slide is 100% editable. Adapt it to your needs and capture your audience's attention.`, + lineHeight: 26, + fontSize: 16, + textAlign: 'left', + textBaseline: 'middle', + lineClamp: 2, + wordBreak: 'break-word' + } + } + }, + + { + id: 'listIconLeft3', + type: 'Shape', + zIndex: 0, + position: { + x: 54, + y: 470, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listIconRight3', + type: 'Shape', + zIndex: 0, + position: { + x: 84, + y: 470, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listNo3', + type: 'Text', + zIndex: 0, + position: { + x: 95, + y: 497, + width: 50, + height: 50 + }, + options: { + graphic: { + text: '03', + lineHeight: 48, + fontSize: 16, + textAlign: 'center', + textBaseline: 'middle', + fontWeight: 'bold' + } + } + }, + + { + id: 'listContent3', + type: 'Text', + zIndex: 0, + position: { + x: 160, + y: 497, + width: 340, + height: 54 + }, + options: { + graphic: { + text: `This slide is 100% editable. Adapt it to your needs and capture your audience's attention.`, + lineHeight: 26, + fontSize: 16, + textAlign: 'left', + textBaseline: 'middle', + lineClamp: 2, + wordBreak: 'break-word' + } + } + }, + + { + id: 'listIconLeft4', + type: 'Shape', + zIndex: 0, + position: { + x: 54, + y: 580, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listIconRight4', + type: 'Shape', + zIndex: 0, + position: { + x: 84, + y: 580, + width: 54, + height: 54 + }, + options: { + graphic: { + symbolType: 'circle', + size: 54, + stroke: '#a9efd8', + lineWidth: 2 + } + } + }, + + { + id: 'listNo4', + type: 'Text', + zIndex: 0, + position: { + x: 95, + y: 607, + width: 50, + height: 50 + }, + options: { + graphic: { + text: '04', + lineHeight: 48, + fontSize: 16, + textAlign: 'center', + textBaseline: 'middle', + fontWeight: 'bold' + } + } + }, + + { + id: 'listContent4', + type: 'Text', + zIndex: 0, + position: { + x: 160, + y: 607, + width: 340, + height: 54 + }, + options: { + graphic: { + text: `This slide is 100% editable. Adapt it to your needs and capture your audience's attention.`, + lineHeight: 26, + fontSize: 16, + textAlign: 'left', + textBaseline: 'middle', + lineClamp: 2, + wordBreak: 'break-word' + } + } + }, + + { + id: 'wordCloud', + type: 'VChart', + zIndex: 0, + position: { + x: 720, + y: 112, + width: 500, + height: 500 + }, + options: { + spec: { + type: 'wordCloud', + color: [ + '#30c695', + '#30c695', + '#4589a7', + '#57878b', + '#4589a7', + '#77a5a4', + '#c9f0e3', + '#c9f0e3', + '#323436', + '#323436' + ], + nameField: 'name', + valueField: 'value', + seriesField: 'name', + rotateAngles: [0, 90], + fontSizeRange: [10, 70], + maskShape: { + shape: 'circle', + type: 'geometric', + hollow: true, + backgroundColor: '#eee' + }, + word: { + padding: 2, + style: { + fontWeight: (datum: any) => { + return datum.index < 2 ? 'bolder' : datum.index < 20 ? 'bold' : 'normal'; + } + } + }, + data: { + name: 'baseData', + values: dataWordCloud + } + } + } + } + ] + }; + + const story = new Story(dsl, { canvas, width: 1280, height: 720, background: 'pink' }); + const player = new Player(story); + story.init(player); + player.play(-1); + + return () => { + story.release(); + }; + }, []); + + return
; +}; diff --git a/packages/vstory/demo/src/demos/infographic/project-goal.tsx b/packages/vstory/demo/src/demos/infographic/project-goal.tsx new file mode 100644 index 00000000..883d6bfb --- /dev/null +++ b/packages/vstory/demo/src/demos/infographic/project-goal.tsx @@ -0,0 +1,464 @@ +import React, { useEffect } from 'react'; +import { Player, Story } from '../../../../../vstory-core/src'; +import { registerAll } from '../../../../src'; + +registerAll(); +export const ProjectGoal = () => { + const id = 'ProjectGoal'; + useEffect(() => { + const container = document.getElementById(id); + const canvas = document.createElement('canvas'); + container?.appendChild(canvas); + + const dsl = { + acts: [ + { + id: 'defaultAct', + scenes: [ + { + id: 'defaultScene', + + // characterId: [ + // 'background', + // 'leftRect', + // 'topArrow', + // 'topText', + // 'leftIcon', + // 'leftTitle', + // 'leftMiddleLine', + // 'leftContent', + // 'gaugeChart', + // 'targetText' + // ], + actions: [ + { + characterId: ['background', 'leftRect'], + characterActions: [ + { + action: 'appear' + } + ] + }, + + { + characterId: ['topArrow', 'topText'], + characterActions: [ + { + action: 'appear', + startTime: 0, + payload: [ + { + animation: { + duration: 400, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + }, + + { + characterId: ['leftIcon', 'leftTitle', 'leftMiddleLine'], + characterActions: [ + { + action: 'appear', + startTime: 400, + payload: [ + { + animation: { + duration: 200, + easing: 'linear', + effect: 'fade' + } + } + ] + } + ] + }, + + { + characterId: ['leftContent'], + characterActions: [ + { + action: 'appear', + startTime: 600, + payload: [ + { + animation: { + duration: 400, + easing: 'linear', + effect: 'move' + } + } + ] + } + ] + }, + + { + characterId: ['gaugeChart'], + characterActions: [ + { + action: 'appear', + startTime: 1000 + } + ] + }, + + { + characterId: ['targetText'], + characterActions: [ + { + action: 'appear', + startTime: 1000, + payload: [ + { + animation: { + duration: 400, + easing: 'linear', + effect: 'wipe' + } + } + ] + } + ] + } + ] + } + ] + } + ], + characters: [ + { + id: 'background', + type: 'Image', + zIndex: 0, + position: { + x: 0, + y: 0, + width: 1280, + height: 720 + }, + options: { + graphic: { + image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/resource/goal.jpeg' + } + } + }, + { + id: 'leftRect', + type: 'Rect', + zIndex: 0, + position: { + x: 0, + y: 0, + width: 500, + height: 720 + }, + options: { + graphic: { + fill: '#b66777', + fillOpacity: 1 + } + } + }, + { + id: 'topArrow', + type: 'Line', + zIndex: 0, + position: { + x: 0, + y: 0, + width: 1178, + height: 172 + }, + options: { + graphic: { + points: [ + { x: 0, y: 0 }, + { x: 1124, y: 0 }, + { x: 1178, y: 86 }, + { x: 1124, y: 172 }, + { x: 0, y: 172 }, + { x: 0, y: 0 } + ], + fill: '#f2f2f0' + } + } + }, + { + id: 'topText', + type: 'Text', + zIndex: 0, + position: { + x: 56, + y: 58, + width: 1124, + height: 172 + }, + options: { + graphic: { + text: 'Project Goal Completion Status Report', + fill: '#375470', + fontSize: 58, + textAlign: 'left', + fontWeight: 'bolder' + } + } + }, + + { + id: 'leftIcon', + type: 'Shape', + zIndex: 0, + position: { + x: 210, + y: 210, + width: 100, + height: 100 + }, + options: { + graphic: { + size: 50, + symbolType: + '', + stroke: '#fdf1e2', + fill: '#fdf1e2', + lineWidth: 0 + } + } + }, + + { + id: 'leftTitle', + type: 'Text', + zIndex: 0, + position: { + x: 250, + y: 328, + width: 3300, + height: 80 + }, + options: { + graphic: { + text: ['GOAL COMPLETION', 'STATUS UPDATE'], + fill: '#fdf1e2', + fontSize: 26, + textAlign: 'center', + fontWeight: 'bolder', + lineHeight: 36 + } + } + }, + + { + id: 'leftMiddleLine', + type: 'Rect', + zIndex: 0, + position: { + x: 174, + y: 442, + width: 178, + height: 5 + }, + options: { + graphic: { + fill: '#fdf1e2' + } + } + }, + + { + id: 'leftContent', + type: 'Text', + zIndex: 0, + position: { + x: 250, + y: 484, + width: 300, + height: 200 + }, + options: { + graphic: { + textConfig: [ + { + text: 'A functional version of the\n' + }, + { + text: 'mobile app' + }, + { + text: ' has been developed\n', + fontWeight: 'bolder' + }, + { + text: ' successfully.', + fontWeight: 'bolder' + }, + { + text: ' Howerer, there are\n' + }, + { + text: ' some vital changes we need to \n' + }, + { + text: ' make before the app is ready to \n' + }, + { + text: ' go into the launch phase. \n' + } + ], + fill: 'rgb(248 238 235)', + fontSize: 18, + lineHeight: 28, + textAlign: 'center' + } + } + }, + + { + id: 'gaugeChart', + type: 'VChart', + zIndex: 0, + position: { + x: 500, + y: 172, + width: 780, + height: 542 + }, + options: { + spec: { + type: 'gauge', + color: ['#e86d6d'], + data: [ + { + id: 'id0', + values: [ + { + type: '目标A', + value: 0.62 + } + ] + } + ], + categoryField: 'type', + valueField: 'value', + outerRadius: 0.95, + innerRadius: 0.5, + centerX: '50%', + centerY: '60%', + startAngle: -180, + endAngle: 0, + gauge: { + type: 'circularProgress', + progress: { + style: { + stroke: '#f2f2f2', + lineWidth: 0.5 + } + }, + track: { + style: { + fill: '#f2f2f2', + stroke: '#f2f2f2', + lineWidth: 0.5, + fillOpacity: 1 + } + } + }, + pin: { + visible: false + }, + pinBackground: { + width: 0.03, + height: 0.03, + style: { + fill: '#f2f2f2' + } + }, + pointer: { + type: 'rect', + width: 0.01, + style: { + fill: '#f2f2f2' + } + }, + extensionMark: [ + { + type: 'path', + style: { + path: (datum: any, ctx: any) => { + const { getCenter, getLayoutRadius } = ctx; + const layoutRadius = getLayoutRadius(); + const center = getCenter(); + const angle = ((-180 + 180 * 0.62) / 180) * Math.PI; + const radius = 0.5 * layoutRadius * 0.8; + const x0 = center.x + radius * Math.cos(angle); + const y0 = center.y + radius * Math.sin(angle); + const size = 20; + const x1 = center.x + (radius + size) * Math.cos(angle); + const y1 = center.y + (radius + size) * Math.sin(angle); + const x2 = x0 + (Math.cos(angle + Math.PI / 2) * size) / 2; + const y2 = y0 + (Math.sin(angle + +Math.PI / 2) * size) / 2; + const x3 = x0 + (Math.cos(angle - Math.PI / 2) * size) / 2; + const y3 = y0 + (Math.sin(angle - Math.PI / 2) * size) / 2; + + return `M${x1},${y1}L${x2},${y2}L${x3},${y3}Z`; + }, + fill: '#f2f2f2' + } + } + ], + axes: [ + { + orient: 'angle', + label: { + visible: false + }, + grid: { + visible: false + } + } + ] + } + } + }, + + { + id: 'targetText', + type: 'Text', + zIndex: 0, + position: { + x: 890, + y: 600, + width: 300, + height: 200 + }, + options: { + graphic: { + text: '62%', + fill: '#f2f2f2', + fontSize: 90, + textAlign: 'center', + textBaseline: 'middle', + fontWeight: 'bolder' + } + } + } + ] + }; + + const story = new Story(dsl, { canvas, width: 1280, height: 720, background: 'pink' }); + const player = new Player(story); + story.init(player); + player.play(-1); + + return () => { + story.release(); + }; + }, []); + + return
; +};