From 13d59ef18522bb7932ee0202848d5362108a8c07 Mon Sep 17 00:00:00 2001 From: xile611 Date: Mon, 16 Dec 2024 14:44:30 +0800 Subject: [PATCH 1/5] feat: add demo of gauge --- .vscode/settings.json | 5 +- packages/vstory/demo/src/App.tsx | 11 + .../src/demos/infographic/project-goal.tsx | 376 ++++++++++++++++++ 3 files changed, 391 insertions(+), 1 deletion(-) create mode 100644 packages/vstory/demo/src/demos/infographic/project-goal.tsx 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/packages/vstory/demo/src/App.tsx b/packages/vstory/demo/src/App.tsx index 6e0e88f9..656b9dfc 100644 --- a/packages/vstory/demo/src/App.tsx +++ b/packages/vstory/demo/src/App.tsx @@ -40,6 +40,7 @@ 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'; type MenusType = ( | { @@ -59,6 +60,8 @@ type MenusType = ( const App = () => { const [activeName, setActiveName] = useLocalStorage('menuName', ''); + + console.log(activeName); const menus = [ { name: 'Base', @@ -237,6 +240,14 @@ const App = () => { { name: 'WorkingInSameIndustry', component: BarWorkingInSameIndustry + }, + { + name: 'ProjectGoal', + component: ProjectGoal + }, + { + name: 'BigDataWordCloud', + component: BigDataWordCloud } ] }, 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..ab5bb26f --- /dev/null +++ b/packages/vstory/demo/src/demos/infographic/project-goal.tsx @@ -0,0 +1,376 @@ +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', + actions: [ + { + characterId: [ + 'background', + 'leftRect', + 'topArrow', + 'topText', + 'leftIcon', + 'leftTitle', + 'leftMiddleLine', + 'leftContent', + 'gaugeChart', + 'targetText' + ], + characterActions: [ + { + action: 'appear' + } + ] + } + ] + } + ] + } + ], + 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
; +}; From a44565e742d698bde9436196dbf2f89f5c9c9ff2 Mon Sep 17 00:00:00 2001 From: xile611 Date: Mon, 16 Dec 2024 16:37:00 +0800 Subject: [PATCH 2/5] feat: add wordcloud --- packages/vstory/demo/src/App.tsx | 1 + .../demos/infographic/big-data-wordcloud.tsx | 1054 +++++++++++++++++ 2 files changed, 1055 insertions(+) create mode 100644 packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx diff --git a/packages/vstory/demo/src/App.tsx b/packages/vstory/demo/src/App.tsx index 656b9dfc..bddf075c 100644 --- a/packages/vstory/demo/src/App.tsx +++ b/packages/vstory/demo/src/App.tsx @@ -41,6 +41,7 @@ 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 = ( | { 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..6f95bd07 --- /dev/null +++ b/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx @@ -0,0 +1,1054 @@ +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' + } + ] + } + ] + } + ] + } + ], + 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, + height: 720 + }, + options: { + graphic: { + size: 1200, + symbolType: + '', + fill: '#a9efd6' + } + } + }, + { + id: 'arc1', + type: 'Shape', + zIndex: 0, + position: { + x: -257, + y: -810, + width: 1280, + height: 720 + }, + options: { + graphic: { + size: 1200, + symbolType: + '', + fill: '#dadad8' + } + } + }, + + { + id: 'arc2', + type: 'Shape', + zIndex: 0, + position: { + x: -220, + y: -780, + width: 1280, + height: 720 + }, + options: { + 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: { + 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
; +}; From 7425ea4d5fc2776bbe81da4685079b666750295e Mon Sep 17 00:00:00 2001 From: xile611 Date: Mon, 16 Dec 2024 16:38:13 +0800 Subject: [PATCH 3/5] fix: fix padding of wordcloud --- .../vstory/demo/src/demos/infographic/big-data-wordcloud.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx b/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx index 6f95bd07..945a84fc 100644 --- a/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx +++ b/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx @@ -1024,6 +1024,7 @@ export const BigDataWordCloud = () => { backgroundColor: '#eee' }, word: { + padding: 2, style: { fontWeight: (datum: any) => { return datum.index < 2 ? 'bolder' : datum.index < 20 ? 'bold' : 'normal'; From 0153b4ef15eeea92ddee8b22b4456160ccaabc52 Mon Sep 17 00:00:00 2001 From: xile611 Date: Mon, 16 Dec 2024 17:22:18 +0800 Subject: [PATCH 4/5] docs: add gauge and wordcloud to demo --- .../en/infographic/big-data-wordcloud.md | 1247 +++++++++++++++++ .../examples/en/infographic/project-goal.md | 457 ++++++ docs/assets/examples/menu.json | 14 + .../zh/infographic/big-data-wordcloud.md | 1247 +++++++++++++++++ .../examples/zh/infographic/project-goal.md | 457 ++++++ .../demos/infographic/big-data-wordcloud.tsx | 223 ++- .../src/demos/infographic/project-goal.tsx | 112 +- 7 files changed, 3727 insertions(+), 30 deletions(-) create mode 100644 docs/assets/examples/en/infographic/big-data-wordcloud.md create mode 100644 docs/assets/examples/en/infographic/project-goal.md create mode 100644 docs/assets/examples/zh/infographic/big-data-wordcloud.md create mode 100644 docs/assets/examples/zh/infographic/project-goal.md 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..0f3743ec --- /dev/null +++ b/docs/assets/examples/en/infographic/big-data-wordcloud.md @@ -0,0 +1,1247 @@ +--- +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, + height: 720 + }, + options: { + graphic: { + size: 1200, + symbolType: + '', + fill: '#a9efd6' + } + } + }, + { + id: 'arc1', + type: 'Shape', + zIndex: 0, + position: { + x: -257, + y: -810, + width: 1280, + height: 720 + }, + options: { + graphic: { + size: 1200, + symbolType: + '', + fill: '#dadad8' + } + } + }, + + { + id: 'arc2', + type: 'Shape', + zIndex: 0, + position: { + x: -220, + y: -780, + width: 1280, + height: 720 + }, + options: { + 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..97575233 --- /dev/null +++ b/docs/assets/examples/zh/infographic/big-data-wordcloud.md @@ -0,0 +1,1247 @@ +--- +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, + height: 720 + }, + options: { + graphic: { + size: 1200, + symbolType: + '', + fill: '#a9efd6' + } + } + }, + { + id: 'arc1', + type: 'Shape', + zIndex: 0, + position: { + x: -257, + y: -810, + width: 1280, + height: 720 + }, + options: { + graphic: { + size: 1200, + symbolType: + '', + fill: '#dadad8' + } + } + }, + + { + id: 'arc2', + type: 'Shape', + zIndex: 0, + position: { + x: -220, + y: -780, + width: 1280, + height: 720 + }, + options: { + 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/demos/infographic/big-data-wordcloud.tsx b/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx index 945a84fc..45cafafd 100644 --- a/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx +++ b/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx @@ -512,34 +512,221 @@ export const BigDataWordCloud = () => { 'arc0', 'arc1', 'arc2', - 'leftTitle', - 'listIconLeft1', - 'listIconRight1', - 'listNo1', - 'listContent1', + 'leftTitle' + // 'listIconLeft1', + // 'listIconRight1', + // 'listNo1', + // 'listContent1', - 'listIconLeft2', - 'listIconRight2', - 'listNo2', - 'listContent2', + // 'listIconLeft2', + // 'listIconRight2', + // 'listNo2', + // 'listContent2', - 'listIconLeft3', - 'listIconRight3', - 'listNo3', - 'listContent3', + // 'listIconLeft3', + // 'listIconRight3', + // 'listNo3', + // 'listContent3', - 'listIconLeft4', - 'listIconRight4', - 'listNo4', - 'listContent4', + // 'listIconLeft4', + // 'listIconRight4', + // 'listNo4', + // 'listContent4', - 'wordCloud' + // '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 + } + } + ] + } + ] } ] } diff --git a/packages/vstory/demo/src/demos/infographic/project-goal.tsx b/packages/vstory/demo/src/demos/infographic/project-goal.tsx index ab5bb26f..883d6bfb 100644 --- a/packages/vstory/demo/src/demos/infographic/project-goal.tsx +++ b/packages/vstory/demo/src/demos/infographic/project-goal.tsx @@ -17,25 +17,113 @@ export const ProjectGoal = () => { scenes: [ { id: 'defaultScene', + + // characterId: [ + // 'background', + // 'leftRect', + // 'topArrow', + // 'topText', + // 'leftIcon', + // 'leftTitle', + // 'leftMiddleLine', + // 'leftContent', + // 'gaugeChart', + // 'targetText' + // ], actions: [ { - characterId: [ - 'background', - 'leftRect', - 'topArrow', - 'topText', - 'leftIcon', - 'leftTitle', - 'leftMiddleLine', - 'leftContent', - 'gaugeChart', - 'targetText' - ], + 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' + } + } + ] + } + ] } ] } From c2d02fe7d5d2dae974350c0d1fa628b6c83cf166 Mon Sep 17 00:00:00 2001 From: xile611 Date: Mon, 16 Dec 2024 18:02:14 +0800 Subject: [PATCH 5/5] fix: fix clip of wordcloud --- .../en/infographic/big-data-wordcloud.md | 21 +++++++++++++------ .../zh/infographic/big-data-wordcloud.md | 21 +++++++++++++------ .../demos/infographic/big-data-wordcloud.tsx | 21 +++++++++++++------ 3 files changed, 45 insertions(+), 18 deletions(-) diff --git a/docs/assets/examples/en/infographic/big-data-wordcloud.md b/docs/assets/examples/en/infographic/big-data-wordcloud.md index 0f3743ec..e590fa64 100644 --- a/docs/assets/examples/en/infographic/big-data-wordcloud.md +++ b/docs/assets/examples/en/infographic/big-data-wordcloud.md @@ -761,10 +761,13 @@ const dsl = { position: { x: -300, y: -860, - width: 1280, - height: 720 + width: 1280 + 300, + height: 720 + 860 }, options: { + panel: { + clip: true + }, graphic: { size: 1200, symbolType: @@ -780,10 +783,13 @@ const dsl = { position: { x: -257, y: -810, - width: 1280, - height: 720 + width: 1280 + 257, + height: 720 + 810 }, options: { + panel: { + clip: true + }, graphic: { size: 1200, symbolType: @@ -800,10 +806,13 @@ const dsl = { position: { x: -220, y: -780, - width: 1280, - height: 720 + width: 1280 + 220, + height: 720 + 780 }, options: { + panel: { + clip: true + }, graphic: { size: 1200, symbolType: diff --git a/docs/assets/examples/zh/infographic/big-data-wordcloud.md b/docs/assets/examples/zh/infographic/big-data-wordcloud.md index 97575233..494a5bd0 100644 --- a/docs/assets/examples/zh/infographic/big-data-wordcloud.md +++ b/docs/assets/examples/zh/infographic/big-data-wordcloud.md @@ -761,10 +761,13 @@ const dsl = { position: { x: -300, y: -860, - width: 1280, - height: 720 + width: 1280 + 300, + height: 720 + 860 }, options: { + panel: { + clip: true + }, graphic: { size: 1200, symbolType: @@ -780,10 +783,13 @@ const dsl = { position: { x: -257, y: -810, - width: 1280, - height: 720 + width: 1280 + 257, + height: 720 + 810 }, options: { + panel: { + clip: true + }, graphic: { size: 1200, symbolType: @@ -800,10 +806,13 @@ const dsl = { position: { x: -220, y: -780, - width: 1280, - height: 720 + width: 1280 + 220, + height: 720 + 780 }, options: { + panel: { + clip: true + }, graphic: { size: 1200, symbolType: diff --git a/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx b/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx index 45cafafd..5765a240 100644 --- a/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx +++ b/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx @@ -758,10 +758,13 @@ export const BigDataWordCloud = () => { position: { x: -300, y: -860, - width: 1280, - height: 720 + width: 1280 + 300, + height: 720 + 860 }, options: { + panel: { + clip: true + }, graphic: { size: 1200, symbolType: @@ -777,10 +780,13 @@ export const BigDataWordCloud = () => { position: { x: -257, y: -810, - width: 1280, - height: 720 + width: 1280 + 257, + height: 720 + 810 }, options: { + panel: { + clip: true + }, graphic: { size: 1200, symbolType: @@ -797,10 +803,13 @@ export const BigDataWordCloud = () => { position: { x: -220, y: -780, - width: 1280, - height: 720 + width: 1280 + 220, + height: 720 + 780 }, options: { + panel: { + clip: true + }, graphic: { size: 1200, symbolType: