From 751d6184c842edadf7dd55616bfbc6e77b83de1c Mon Sep 17 00:00:00 2001 From: "jiangtao.yang" Date: Tue, 17 Dec 2024 17:04:47 +0800 Subject: [PATCH 1/2] docs: add templates --- .../en/infographic/scatter-income-obesity.md | 426 +++++++++ .../infographic/scatter-suicide-rate-age.md | 808 ++++++++++++++++++ docs/assets/examples/menu.json | 14 + .../zh/infographic/scatter-income-obesity.md | 426 +++++++++ .../infographic/scatter-suicide-rate-age.md | 808 ++++++++++++++++++ 5 files changed, 2482 insertions(+) create mode 100644 docs/assets/examples/en/infographic/scatter-income-obesity.md create mode 100644 docs/assets/examples/en/infographic/scatter-suicide-rate-age.md create mode 100644 docs/assets/examples/zh/infographic/scatter-income-obesity.md create mode 100644 docs/assets/examples/zh/infographic/scatter-suicide-rate-age.md diff --git a/docs/assets/examples/en/infographic/scatter-income-obesity.md b/docs/assets/examples/en/infographic/scatter-income-obesity.md new file mode 100644 index 00000000..3e33a996 --- /dev/null +++ b/docs/assets/examples/en/infographic/scatter-income-obesity.md @@ -0,0 +1,426 @@ +--- +category: examples +group: infographic +title: Scatter Chart Infographic - Income and Obesity +keywords: templates, visualization, scatter +order: 1-0 +cover: https://tosv.byted.org/obj/bit-cloud/vstory-infographic/preview/income_obesity.png +--- + +# Scatter Chart Infographic: Incode and Obesity Rate + +## Code Demo + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); +console.log('debug'); +const dsl = { + acts: [ + { + id: 'defaultAct', + scenes: [ + { + id: 'defaultScene', + actions: [ + { + characterId: ['bg', 'bg-cover'], + characterActions: [ + { + action: 'appear', + payload: { + animation: { + duration: 1000 + } + } + } + ] + }, + { + characterId: ['text-1'], + characterActions: [ + { + action: 'appear', + payload: { + animation: { + duration: 1000, + effect: 'typewriter' + } + } + } + ] + }, + { + characterId: ['1'], + characterActions: [ + { + action: 'appear', + payload: [ + { + animation: { effect: 'grow' } + } + ] + } + ] + } + ] + } + ] + } + ], + characters: [ + { + id: 'bg-cover', + type: 'Rect', + zIndex: -1, + position: { + x: 0, + y: 0, + width: 1280, + height: 720 + }, + options: { + graphic: { + shadowBlur: 10, + fill: 'rgba(28, 42, 69)', + fillOpacity: 0.5, + background: 'https://tosv.byted.org/obj/bit-cloud/vstory-infographic/resource/scatter-food.jpg' + } + } + }, + { + id: '1', + type: 'VChart', + zIndex: 0, + position: { + x: 150, + y: 150, + width: 1280 - 300, + height: 720 - 200 + }, + options: { + spec: { + type: 'scatter', + data: [ + { + id: 'barData', + values: [ + { + x: 42830, + y: 33.5 + }, + { + x: 71583, + y: 29.7 + }, + { + x: 50068, + y: 28.9 + }, + { + x: 41262, + y: 35.9 + }, + { + x: 61933, + y: 24.7 + }, + { + x: 61303, + y: 21.3 + }, + { + x: 70048, + y: 26.3 + }, + { + x: 59716, + y: 30.7 + }, + { + x: 71648, + y: 21.7 + }, + { + x: 47463, + y: 26.2 + }, + { + x: 49321, + y: 30.5 + }, + { + x: 69592, + y: 22.1 + }, + { + x: 47861, + y: 28.9 + }, + { + x: 57444, + y: 29.3 + }, + { + x: 49446, + y: 32.7 + }, + { + x: 53712, + y: 30.9 + }, + { + x: 52504, + y: 31.3 + }, + { + x: 42958, + y: 31.6 + }, + { + x: 44555, + y: 34.9 + }, + { + x: 49462, + y: 28.2 + }, + { + x: 73971, + y: 29.6 + }, + { + x: 69160, + y: 23.3 + }, + { + x: 49847, + y: 30.7 + }, + { + x: 61481, + y: 27.6 + }, + { + x: 39680, + y: 35.5 + }, + { + x: 48363, + y: 30.2 + }, + { + x: 46328, + y: 26.4 + }, + { + x: 52686, + y: 30.2 + }, + { + x: 51450, + y: 27.7 + }, + { + x: 66532, + y: 27.4 + }, + { + x: 71919, + y: 26.9 + }, + { + x: 44803, + y: 28.4 + }, + { + x: 58878, + y: 27 + }, + { + x: 46556, + y: 29.7 + }, + { + x: 59029, + y: 32.2 + }, + { + x: 49308, + y: 32.6 + }, + { + x: 47529, + y: 33 + }, + { + x: 51075, + y: 27.9 + }, + { + x: 53234, + y: 30.2 + }, + { + x: 54891, + y: 27 + }, + { + x: 45238, + y: 32.1 + }, + { + x: 50979, + y: 29.8 + }, + { + x: 44361, + y: 31.2 + }, + { + x: 53035, + y: 31.9 + }, + { + x: 60922, + y: 25.7 + }, + { + x: 54166, + y: 24.8 + }, + { + x: 64902, + y: 28.5 + }, + { + x: 61366, + y: 27.3 + }, + { + x: 41059, + y: 35.7 + }, + { + x: 52622, + y: 31.2 + }, + { + x: 57055, + y: 29.5 + } + ] + } + ], + xField: 'x', + yField: 'y', + point: { + style: { + fill: '#F7CC11', + fillOpacity: 1 + } + }, + size: 10, + padding: 0, + axes: [ + { + orient: 'bottom', + visible: true, + type: 'linear', + domainLine: { + visible: true, + style: { + strokeOpacity: 0.5 + } + }, + grid: { visible: false }, + zero: false, + title: { + visible: true, + text: 'Income', + space: 50, + style: { + textAlign: 'center', + textBaseline: 'middle', + fontSize: 20, + fontWeight: 'bold', + fill: '#FF8C00' + } + } + }, + { + orient: 'left', + visible: true, + type: 'linear', + domainLine: { + visible: true, + style: { + strokeOpacity: 0.5 + } + }, + nice: true, + tick: { + visible: true, + tickCount: 8, + style: { + strokeOpacity: 0.5 + } + }, + label: { + formatMethod: v => { + return `${v}%`; + } + }, + grid: { visible: false }, + zero: false, + title: { + visible: true, + text: 'Obesity (% Body Fat)', + space: 50, + style: { + textAlign: 'center', + textBaseline: 'middle', + fontSize: 20, + fontWeight: 'bold', + fill: '#FF8C00' + } + } + } + ] + } + } + }, + { + id: 'text-1', + type: 'Text', + zIndex: 0, + position: { + x: 1280 / 2, + y: 50, + width: 1280, + height: 720 + }, + options: { + graphic: { + text: 'Income & Obesity', + textAlign: 'center', + fontSize: 42, + fontWeight: 'bolder', + fill: '#F8CC19' + } + } + } + ] +}; +console.log('debug'); +const story = new VStory.Story(dsl, { + dom: CONTAINER_ID, + scaleX: 0.7, + scaleY: 0.7 +}); +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/scatter-suicide-rate-age.md b/docs/assets/examples/en/infographic/scatter-suicide-rate-age.md new file mode 100644 index 00000000..a99994a9 --- /dev/null +++ b/docs/assets/examples/en/infographic/scatter-suicide-rate-age.md @@ -0,0 +1,808 @@ +--- +category: examples +group: infographic +title: Scatter Chart Infographic - Suicide Rate by Age +keywords: templates, visualization, scatter +order: 1-0 +cover: https://tosv.byted.org/obj/bit-cloud/vstory-infographic/preview/suicide_rate.png +--- + +# Scatter Chart Infographic: Suiicide Rate by Age + +## Code Demo + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); + +const dsl = { + acts: [ + { + id: 'defaultAct', + scenes: [ + { + id: 'defaultScene', + actions: [ + { + characterId: ['bg', 'bg-cover', 'bg-blur'], + characterActions: [ + { + action: 'appear', + payload: { + animation: { + duration: 1000 + } + } + } + ] + }, + { + characterId: ['text-1', 'text-2', 'text-3'], + characterActions: [ + { + action: 'appear', + payload: { + animation: { + duration: 1000, + effect: 'typewriter' + } + } + } + ] + }, + { + characterId: ['1'], + characterActions: [ + { + action: 'appear', + payload: [ + { + animation: { effect: 'grow', duration: 2000 } + } + ] + } + ] + } + ] + } + ] + } + ], + characters: [ + { + id: 'bg-cover', + type: 'Rect', + zIndex: -1, + position: { + x: 0, + y: 0, + width: 1280, + height: 720 + }, + options: { + graphic: { + background: 'https://tosv.byted.org/obj/bit-cloud/vstory-infographic/resource/scatter-life.jpg' + } + } + }, + { + id: 'bg-blur', + type: 'Rect', + zIndex: -1, + position: { + x: (1280 - 1280 * 0.6) / 2, + y: (720 - 720 * 0.6) / 2, + width: 1280 * 0.6, + height: 720 * 0.6 + }, + options: { + graphic: { + cornerRadius: 25, + lineWidth: 2, + fill: '#EFFAFB', + fillOpacity: 0.8 + } + } + }, + { + id: '1', + type: 'VChart', + zIndex: 0, + position: { + x: (1280 - 1280 * 0.6) / 2, + y: (720 - 720 * 0.6) / 2, + width: 1280 * 0.6, + height: 720 * 0.6 + }, + options: { + spec: { + type: 'scatter', + data: [ + { + id: 'barData', + values: [ + { + Age: '10', + xxx_rate: '2.8', + + Gender: 'F' + }, + { + Age: '15', + xxx_rate: '14.2', + + Gender: 'M' + }, + { + Age: '15', + xxx_rate: '11', + + Gender: 'M' + }, + { + Age: '16', + xxx_rate: '11', + + Gender: 'F' + }, + { + Age: '17', + xxx_rate: '11', + + Gender: 'M' + }, + { + Age: '18', + xxx_rate: '11.5', + + Gender: 'M' + }, + { + Age: '19', + xxx_rate: '12', + + Gender: 'M' + }, + { + Age: '20', + xxx_rate: '14.2', + + Gender: 'M' + }, + { + Age: '20', + xxx_rate: '12.5', + + Gender: 'M' + }, + { + Age: '21', + xxx_rate: '14', + + Gender: 'M' + }, + { + Age: '22', + xxx_rate: '14', + + Gender: 'F' + }, + { + Age: '23', + xxx_rate: '14', + + Gender: 'M' + }, + { + Age: '24', + xxx_rate: '13.5', + + Gender: 'M' + }, + { + Age: '25', + xxx_rate: '18.4', + + Gender: 'M' + }, + { + Age: '25', + xxx_rate: '14.8', + + Gender: 'M' + }, + { + Age: '26', + xxx_rate: '14.8', + + Gender: 'M' + }, + { + Age: '27', + xxx_rate: '14.8', + + Gender: 'F' + }, + { + Age: '28', + xxx_rate: '15', + + Gender: 'F' + }, + { + Age: '29', + xxx_rate: '15.5', + + Gender: 'F' + }, + { + Age: '30', + xxx_rate: '18.4', + Gender: 'M' + }, + { + Age: '30', + xxx_rate: '16', + + Gender: 'F' + }, + { + Age: '31', + xxx_rate: '16.8', + + Gender: 'F' + }, + { + Age: '32', + xxx_rate: '17', + + Gender: 'F' + }, + { + Age: '33', + xxx_rate: '17', + + Gender: 'M' + }, + { + Age: '34', + xxx_rate: '18', + + Gender: 'F' + }, + { + Age: '35', + xxx_rate: '17.4', + + Gender: 'F' + }, + { + Age: '35', + xxx_rate: '16.5', + + Gender: 'F' + }, + { + Age: '36', + xxx_rate: '16.8', + + Gender: 'F' + }, + { + Age: '37', + xxx_rate: '16.5', + + Gender: 'M' + }, + { + Age: '38', + xxx_rate: '16.8', + + Gender: 'M' + }, + { + Age: '39', + xxx_rate: '17', + + Gender: 'M' + }, + { + Age: '40', + xxx_rate: '17.4', + + Gender: 'F' + }, + { + Age: '40', + xxx_rate: '17.3', + + Gender: 'M' + }, + { + Age: '41', + xxx_rate: '18', + + Gender: 'F' + }, + { + Age: '42', + xxx_rate: '18.3', + + Gender: 'M' + }, + { + Age: '43', + xxx_rate: '18', + + Gender: 'F' + }, + { + Age: '44', + xxx_rate: '17', + + Gender: 'F' + }, + { + Age: '45', + xxx_rate: '18', + + Gender: 'M' + }, + { + Age: '45', + xxx_rate: '20', + + Gender: 'M' + }, + { + Age: '46', + xxx_rate: '20', + + Gender: 'F' + }, + { + Age: '47', + xxx_rate: '19.8', + + Gender: 'M' + }, + { + Age: '48', + xxx_rate: '20', + + Gender: 'M' + }, + { + Age: '49', + xxx_rate: '20.2', + + Gender: 'M' + }, + { + Age: '50', + xxx_rate: '18', + + Gender: 'F' + }, + { + Age: '50', + xxx_rate: '20.2', + + Gender: 'M' + }, + { + Age: '51', + xxx_rate: '19.8', + + Gender: 'M' + }, + { + Age: '52', + xxx_rate: '20', + + Gender: 'F' + }, + { + Age: '63', + xxx_rate: '19.5', + + Gender: 'F' + }, + { + Age: '54', + xxx_rate: '18', + + Gender: 'M' + }, + { + Age: '55', + xxx_rate: '16.9', + + Gender: 'M' + }, + { + Age: '55', + xxx_rate: '17', + + Gender: 'M' + }, + { + Age: '56', + xxx_rate: '17.5', + + Gender: 'M' + }, + { + Age: '57', + xxx_rate: '17.5', + + Gender: 'F' + }, + { + Age: '58', + xxx_rate: '18.5', + + Gender: 'M' + }, + { + Age: '59', + xxx_rate: '18.5', + + Gender: 'F' + }, + { + Age: '60', + xxx_rate: '16.9', + + Gender: 'M' + }, + { + Age: '60', + xxx_rate: '18.4', + + Gender: 'M' + }, + { + Age: '61', + xxx_rate: '18.5', + + Gender: 'F' + }, + { + Age: '62', + xxx_rate: '20', + + Gender: 'F' + }, + { + Age: '63', + xxx_rate: '19', + + Gender: 'F' + }, + { + Age: '64', + xxx_rate: '17', + + Gender: 'F' + }, + { + Age: '65', + xxx_rate: '14.5', + + Gender: 'F' + }, + { + Age: '65', + xxx_rate: '15.2', + + Gender: 'F' + }, + { + Age: '66', + xxx_rate: '15.2', + + Gender: 'F' + }, + { + Age: '67', + xxx_rate: '15.2', + + Gender: 'F' + }, + { + Age: '68', + xxx_rate: '15.5', + + Gender: 'M' + }, + { + Age: '69', + xxx_rate: '15.8', + + Gender: 'F' + }, + { + Age: '70', + xxx_rate: '14.5', + + Gender: 'M' + }, + { + Age: '70', + xxx_rate: '16', + + Gender: 'M' + }, + { + Age: '71', + xxx_rate: '16.5', + + Gender: 'F' + }, + { + Age: '72', + xxx_rate: '16.5', + + Gender: 'M' + }, + { + Age: '73', + xxx_rate: '16.5', + + Gender: 'F' + }, + { + Age: '74', + xxx_rate: '16.3', + + Gender: 'F' + }, + { + Age: '75', + xxx_rate: '18.4', + + Gender: 'F' + }, + { + Age: '75', + xxx_rate: '16.3', + + Gender: 'M' + }, + { + Age: '76', + xxx_rate: '16.3', + + Gender: 'F' + }, + { + Age: '77', + xxx_rate: '16.2', + + Gender: 'F' + }, + { + Age: '78', + xxx_rate: '16.3', + + Gender: 'F' + }, + { + Age: '79', + xxx_rate: '16.4', + + Gender: 'M' + }, + { + Age: '80', + xxx_rate: '18.4', + + Gender: 'F' + }, + { + Age: '80', + xxx_rate: '16.5', + + Gender: 'F' + }, + { + Age: '81', + xxx_rate: '16.4', + + Gender: 'M' + }, + { + Age: '82', + xxx_rate: '16.4', + + Gender: 'F' + }, + { + Age: '83', + xxx_rate: '16.3', + + Gender: 'M' + }, + { + Age: '84', + xxx_rate: '16.3', + + Gender: 'M' + }, + { + Age: '85', + xxx_rate: '20.9', + Gender: 'F' + }, + { + Age: '85', + xxx_rate: '16.2', + Gender: 'F' + } + ] + } + ], + xField: 'Age', + yField: 'xxx_rate', + seriesField: 'Gender', + legends: { + visible: true, + orient: 'right', + position: 'start', + item: { + label: { + style: { + fill: '#588996' + } + } + } + }, + color: ['#138AAA', '#E18398'], + point: { + style: { + fillOpacity: 1 + } + }, + padding: 20, + axes: [ + { + orient: 'bottom', + visible: true, + type: 'linear', + domainLine: { + visible: true, + style: { + stroke: 'gray', + strokeOpacity: 0.8 + } + }, + label: { + style: { + fill: '#3C859D', + fontWeight: 'bold' + } + }, + tick: { + visible: true, + tickCount: 16, + style: { + stroke: 'gray', + strokeOpacity: 1 + } + }, + grid: { visible: false }, + zero: false + }, + { + orient: 'left', + visible: true, + type: 'linear', + domainLine: { + visible: true, + style: { + stroke: 'gray', + strokeOpacity: 0.8 + } + }, + nice: true, + tick: { + visible: true, + tickCount: 8, + style: { + stroke: 'gray', + strokeOpacity: 1 + } + }, + label: { + style: { + fill: '#3C859D', + fontWeight: 'bold' + }, + formatMethod: v => { + return `${v}`; + } + }, + grid: { visible: false }, + zero: false + } + ] + } + } + }, + { + id: 'text-1', + type: 'Text', + zIndex: 0, + position: { + x: 1280 / 2, + y: 50, + width: 1280, + height: 720 + }, + options: { + graphic: { + text: 'Correlation of Suicide Rate and Age', + textAlign: 'center', + fontSize: 42, + fontWeight: 'bolder', + fill: '#FCFFFE' + } + } + }, + { + id: 'text-2', + type: 'Text', + zIndex: 0, + position: { + x: 1280 / 2, + y: 600, + width: 1280, + height: 720 + }, + options: { + graphic: { + text: 'Age', + textAlign: 'center', + fontSize: 42, + fontWeight: 'bolder', + fill: '#FCFFFE' + } + } + }, + { + id: 'text-3', + type: 'Text', + zIndex: 0, + position: { + x: 175, + y: 720 / 2 - 50, + width: 1280, + height: 720 + }, + options: { + graphic: { + text: 'Suicide \n Rate', + textAlign: 'center', + fontSize: 42, + fontWeight: 'bolder', + fill: '#FCFFFE' + } + } + } + ] +}; + +const story = new VStory.Story(dsl, { + dom: CONTAINER_ID, + scaleX: 0.7, + scaleY: 0.7 +}); +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 fb54c3f5..6a315d5d 100644 --- a/docs/assets/examples/menu.json +++ b/docs/assets/examples/menu.json @@ -318,6 +318,20 @@ "zh": "信息图模板-词云图: 大数据关键词", "en": "Word Cloud Infographic: Big Data Keywords" } + }, + { + "path": "scatter-income-obesity", + "title": { + "zh": "信息图模板-散点图: 收入与肥胖率", + "en": "Scatter Infographic: Income and Obesity Rate" + } + }, + { + "path": "scatter-suicide-rate-age", + "title": { + "zh": "信息图模板-散点图: 年龄与轻生率", + "en": "Scatter Cloud Infographic: Age and Suicide Rate" + } } ] } diff --git a/docs/assets/examples/zh/infographic/scatter-income-obesity.md b/docs/assets/examples/zh/infographic/scatter-income-obesity.md new file mode 100644 index 00000000..5f681ee7 --- /dev/null +++ b/docs/assets/examples/zh/infographic/scatter-income-obesity.md @@ -0,0 +1,426 @@ +--- +category: examples +group: infographic +title: Scatter Chart Infographic - Income and Obesity +keywords: templates, visualization, scatter +order: 1-0 +cover: https://tosv.byted.org/obj/bit-cloud/vstory-infographic/preview/income_obesity.png +--- + +# 信息图模板-散点图：收入与肥胖率 + +## 代码演示 + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); +console.log('debug'); +const dsl = { + acts: [ + { + id: 'defaultAct', + scenes: [ + { + id: 'defaultScene', + actions: [ + { + characterId: ['bg', 'bg-cover'], + characterActions: [ + { + action: 'appear', + payload: { + animation: { + duration: 1000 + } + } + } + ] + }, + { + characterId: ['text-1'], + characterActions: [ + { + action: 'appear', + payload: { + animation: { + duration: 1000, + effect: 'typewriter' + } + } + } + ] + }, + { + characterId: ['1'], + characterActions: [ + { + action: 'appear', + payload: [ + { + animation: { effect: 'grow' } + } + ] + } + ] + } + ] + } + ] + } + ], + characters: [ + { + id: 'bg-cover', + type: 'Rect', + zIndex: -1, + position: { + x: 0, + y: 0, + width: 1280, + height: 720 + }, + options: { + graphic: { + shadowBlur: 10, + fill: 'rgba(28, 42, 69)', + fillOpacity: 0.5, + background: 'https://tosv.byted.org/obj/bit-cloud/vstory-infographic/resource/scatter-food.jpg' + } + } + }, + { + id: '1', + type: 'VChart', + zIndex: 0, + position: { + x: 150, + y: 150, + width: 1280 - 300, + height: 720 - 200 + }, + options: { + spec: { + type: 'scatter', + data: [ + { + id: 'barData', + values: [ + { + x: 42830, + y: 33.5 + }, + { + x: 71583, + y: 29.7 + }, + { + x: 50068, + y: 28.9 + }, + { + x: 41262, + y: 35.9 + }, + { + x: 61933, + y: 24.7 + }, + { + x: 61303, + y: 21.3 + }, + { + x: 70048, + y: 26.3 + }, + { + x: 59716, + y: 30.7 + }, + { + x: 71648, + y: 21.7 + }, + { + x: 47463, + y: 26.2 + }, + { + x: 49321, + y: 30.5 + }, + { + x: 69592, + y: 22.1 + }, + { + x: 47861, + y: 28.9 + }, + { + x: 57444, + y: 29.3 + }, + { + x: 49446, + y: 32.7 + }, + { + x: 53712, + y: 30.9 + }, + { + x: 52504, + y: 31.3 + }, + { + x: 42958, + y: 31.6 + }, + { + x: 44555, + y: 34.9 + }, + { + x: 49462, + y: 28.2 + }, + { + x: 73971, + y: 29.6 + }, + { + x: 69160, + y: 23.3 + }, + { + x: 49847, + y: 30.7 + }, + { + x: 61481, + y: 27.6 + }, + { + x: 39680, + y: 35.5 + }, + { + x: 48363, + y: 30.2 + }, + { + x: 46328, + y: 26.4 + }, + { + x: 52686, + y: 30.2 + }, + { + x: 51450, + y: 27.7 + }, + { + x: 66532, + y: 27.4 + }, + { + x: 71919, + y: 26.9 + }, + { + x: 44803, + y: 28.4 + }, + { + x: 58878, + y: 27 + }, + { + x: 46556, + y: 29.7 + }, + { + x: 59029, + y: 32.2 + }, + { + x: 49308, + y: 32.6 + }, + { + x: 47529, + y: 33 + }, + { + x: 51075, + y: 27.9 + }, + { + x: 53234, + y: 30.2 + }, + { + x: 54891, + y: 27 + }, + { + x: 45238, + y: 32.1 + }, + { + x: 50979, + y: 29.8 + }, + { + x: 44361, + y: 31.2 + }, + { + x: 53035, + y: 31.9 + }, + { + x: 60922, + y: 25.7 + }, + { + x: 54166, + y: 24.8 + }, + { + x: 64902, + y: 28.5 + }, + { + x: 61366, + y: 27.3 + }, + { + x: 41059, + y: 35.7 + }, + { + x: 52622, + y: 31.2 + }, + { + x: 57055, + y: 29.5 + } + ] + } + ], + xField: 'x', + yField: 'y', + point: { + style: { + fill: '#F7CC11', + fillOpacity: 1 + } + }, + size: 10, + padding: 0, + axes: [ + { + orient: 'bottom', + visible: true, + type: 'linear', + domainLine: { + visible: true, + style: { + strokeOpacity: 0.5 + } + }, + grid: { visible: false }, + zero: false, + title: { + visible: true, + text: 'Income', + space: 50, + style: { + textAlign: 'center', + textBaseline: 'middle', + fontSize: 20, + fontWeight: 'bold', + fill: '#FF8C00' + } + } + }, + { + orient: 'left', + visible: true, + type: 'linear', + domainLine: { + visible: true, + style: { + strokeOpacity: 0.5 + } + }, + nice: true, + tick: { + visible: true, + tickCount: 8, + style: { + strokeOpacity: 0.5 + } + }, + label: { + formatMethod: v => { + return `${v}%`; + } + }, + grid: { visible: false }, + zero: false, + title: { + visible: true, + text: 'Obesity (% Body Fat)', + space: 50, + style: { + textAlign: 'center', + textBaseline: 'middle', + fontSize: 20, + fontWeight: 'bold', + fill: '#FF8C00' + } + } + } + ] + } + } + }, + { + id: 'text-1', + type: 'Text', + zIndex: 0, + position: { + x: 1280 / 2, + y: 50, + width: 1280, + height: 720 + }, + options: { + graphic: { + text: 'Income & Obesity', + textAlign: 'center', + fontSize: 42, + fontWeight: 'bolder', + fill: '#F8CC19' + } + } + } + ] +}; +console.log('debug'); +const story = new VStory.Story(dsl, { + dom: CONTAINER_ID, + scaleX: 0.7, + scaleY: 0.7 +}); +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/scatter-suicide-rate-age.md b/docs/assets/examples/zh/infographic/scatter-suicide-rate-age.md new file mode 100644 index 00000000..a61121bd --- /dev/null +++ b/docs/assets/examples/zh/infographic/scatter-suicide-rate-age.md @@ -0,0 +1,808 @@ +--- +category: examples +group: infographic +title: Scatter Chart Infographic - Suicide Rate by Age +keywords: templates, visualization, scatter +order: 1-0 +cover: https://tosv.byted.org/obj/bit-cloud/vstory-infographic/preview/suicide_rate.png +--- + +# 信息图模板-散点图：年龄与自杀率 + +## 代码演示 + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); + +const dsl = { + acts: [ + { + id: 'defaultAct', + scenes: [ + { + id: 'defaultScene', + actions: [ + { + characterId: ['bg', 'bg-cover', 'bg-blur'], + characterActions: [ + { + action: 'appear', + payload: { + animation: { + duration: 1000 + } + } + } + ] + }, + { + characterId: ['text-1', 'text-2', 'text-3'], + characterActions: [ + { + action: 'appear', + payload: { + animation: { + duration: 1000, + effect: 'typewriter' + } + } + } + ] + }, + { + characterId: ['1'], + characterActions: [ + { + action: 'appear', + payload: [ + { + animation: { effect: 'grow', duration: 2000 } + } + ] + } + ] + } + ] + } + ] + } + ], + characters: [ + { + id: 'bg-cover', + type: 'Rect', + zIndex: -1, + position: { + x: 0, + y: 0, + width: 1280, + height: 720 + }, + options: { + graphic: { + background: 'https://tosv.byted.org/obj/bit-cloud/vstory-infographic/resource/scatter-life.jpg' + } + } + }, + { + id: 'bg-blur', + type: 'Rect', + zIndex: -1, + position: { + x: (1280 - 1280 * 0.6) / 2, + y: (720 - 720 * 0.6) / 2, + width: 1280 * 0.6, + height: 720 * 0.6 + }, + options: { + graphic: { + cornerRadius: 25, + lineWidth: 2, + fill: '#EFFAFB', + fillOpacity: 0.8 + } + } + }, + { + id: '1', + type: 'VChart', + zIndex: 0, + position: { + x: (1280 - 1280 * 0.6) / 2, + y: (720 - 720 * 0.6) / 2, + width: 1280 * 0.6, + height: 720 * 0.6 + }, + options: { + spec: { + type: 'scatter', + data: [ + { + id: 'barData', + values: [ + { + Age: '10', + xxx_rate: '2.8', + + Gender: 'F' + }, + { + Age: '15', + xxx_rate: '14.2', + + Gender: 'M' + }, + { + Age: '15', + xxx_rate: '11', + + Gender: 'M' + }, + { + Age: '16', + xxx_rate: '11', + + Gender: 'F' + }, + { + Age: '17', + xxx_rate: '11', + + Gender: 'M' + }, + { + Age: '18', + xxx_rate: '11.5', + + Gender: 'M' + }, + { + Age: '19', + xxx_rate: '12', + + Gender: 'M' + }, + { + Age: '20', + xxx_rate: '14.2', + + Gender: 'M' + }, + { + Age: '20', + xxx_rate: '12.5', + + Gender: 'M' + }, + { + Age: '21', + xxx_rate: '14', + + Gender: 'M' + }, + { + Age: '22', + xxx_rate: '14', + + Gender: 'F' + }, + { + Age: '23', + xxx_rate: '14', + + Gender: 'M' + }, + { + Age: '24', + xxx_rate: '13.5', + + Gender: 'M' + }, + { + Age: '25', + xxx_rate: '18.4', + + Gender: 'M' + }, + { + Age: '25', + xxx_rate: '14.8', + + Gender: 'M' + }, + { + Age: '26', + xxx_rate: '14.8', + + Gender: 'M' + }, + { + Age: '27', + xxx_rate: '14.8', + + Gender: 'F' + }, + { + Age: '28', + xxx_rate: '15', + + Gender: 'F' + }, + { + Age: '29', + xxx_rate: '15.5', + + Gender: 'F' + }, + { + Age: '30', + xxx_rate: '18.4', + Gender: 'M' + }, + { + Age: '30', + xxx_rate: '16', + + Gender: 'F' + }, + { + Age: '31', + xxx_rate: '16.8', + + Gender: 'F' + }, + { + Age: '32', + xxx_rate: '17', + + Gender: 'F' + }, + { + Age: '33', + xxx_rate: '17', + + Gender: 'M' + }, + { + Age: '34', + xxx_rate: '18', + + Gender: 'F' + }, + { + Age: '35', + xxx_rate: '17.4', + + Gender: 'F' + }, + { + Age: '35', + xxx_rate: '16.5', + + Gender: 'F' + }, + { + Age: '36', + xxx_rate: '16.8', + + Gender: 'F' + }, + { + Age: '37', + xxx_rate: '16.5', + + Gender: 'M' + }, + { + Age: '38', + xxx_rate: '16.8', + + Gender: 'M' + }, + { + Age: '39', + xxx_rate: '17', + + Gender: 'M' + }, + { + Age: '40', + xxx_rate: '17.4', + + Gender: 'F' + }, + { + Age: '40', + xxx_rate: '17.3', + + Gender: 'M' + }, + { + Age: '41', + xxx_rate: '18', + + Gender: 'F' + }, + { + Age: '42', + xxx_rate: '18.3', + + Gender: 'M' + }, + { + Age: '43', + xxx_rate: '18', + + Gender: 'F' + }, + { + Age: '44', + xxx_rate: '17', + + Gender: 'F' + }, + { + Age: '45', + xxx_rate: '18', + + Gender: 'M' + }, + { + Age: '45', + xxx_rate: '20', + + Gender: 'M' + }, + { + Age: '46', + xxx_rate: '20', + + Gender: 'F' + }, + { + Age: '47', + xxx_rate: '19.8', + + Gender: 'M' + }, + { + Age: '48', + xxx_rate: '20', + + Gender: 'M' + }, + { + Age: '49', + xxx_rate: '20.2', + + Gender: 'M' + }, + { + Age: '50', + xxx_rate: '18', + + Gender: 'F' + }, + { + Age: '50', + xxx_rate: '20.2', + + Gender: 'M' + }, + { + Age: '51', + xxx_rate: '19.8', + + Gender: 'M' + }, + { + Age: '52', + xxx_rate: '20', + + Gender: 'F' + }, + { + Age: '63', + xxx_rate: '19.5', + + Gender: 'F' + }, + { + Age: '54', + xxx_rate: '18', + + Gender: 'M' + }, + { + Age: '55', + xxx_rate: '16.9', + + Gender: 'M' + }, + { + Age: '55', + xxx_rate: '17', + + Gender: 'M' + }, + { + Age: '56', + xxx_rate: '17.5', + + Gender: 'M' + }, + { + Age: '57', + xxx_rate: '17.5', + + Gender: 'F' + }, + { + Age: '58', + xxx_rate: '18.5', + + Gender: 'M' + }, + { + Age: '59', + xxx_rate: '18.5', + + Gender: 'F' + }, + { + Age: '60', + xxx_rate: '16.9', + + Gender: 'M' + }, + { + Age: '60', + xxx_rate: '18.4', + + Gender: 'M' + }, + { + Age: '61', + xxx_rate: '18.5', + + Gender: 'F' + }, + { + Age: '62', + xxx_rate: '20', + + Gender: 'F' + }, + { + Age: '63', + xxx_rate: '19', + + Gender: 'F' + }, + { + Age: '64', + xxx_rate: '17', + + Gender: 'F' + }, + { + Age: '65', + xxx_rate: '14.5', + + Gender: 'F' + }, + { + Age: '65', + xxx_rate: '15.2', + + Gender: 'F' + }, + { + Age: '66', + xxx_rate: '15.2', + + Gender: 'F' + }, + { + Age: '67', + xxx_rate: '15.2', + + Gender: 'F' + }, + { + Age: '68', + xxx_rate: '15.5', + + Gender: 'M' + }, + { + Age: '69', + xxx_rate: '15.8', + + Gender: 'F' + }, + { + Age: '70', + xxx_rate: '14.5', + + Gender: 'M' + }, + { + Age: '70', + xxx_rate: '16', + + Gender: 'M' + }, + { + Age: '71', + xxx_rate: '16.5', + + Gender: 'F' + }, + { + Age: '72', + xxx_rate: '16.5', + + Gender: 'M' + }, + { + Age: '73', + xxx_rate: '16.5', + + Gender: 'F' + }, + { + Age: '74', + xxx_rate: '16.3', + + Gender: 'F' + }, + { + Age: '75', + xxx_rate: '18.4', + + Gender: 'F' + }, + { + Age: '75', + xxx_rate: '16.3', + + Gender: 'M' + }, + { + Age: '76', + xxx_rate: '16.3', + + Gender: 'F' + }, + { + Age: '77', + xxx_rate: '16.2', + + Gender: 'F' + }, + { + Age: '78', + xxx_rate: '16.3', + + Gender: 'F' + }, + { + Age: '79', + xxx_rate: '16.4', + + Gender: 'M' + }, + { + Age: '80', + xxx_rate: '18.4', + + Gender: 'F' + }, + { + Age: '80', + xxx_rate: '16.5', + + Gender: 'F' + }, + { + Age: '81', + xxx_rate: '16.4', + + Gender: 'M' + }, + { + Age: '82', + xxx_rate: '16.4', + + Gender: 'F' + }, + { + Age: '83', + xxx_rate: '16.3', + + Gender: 'M' + }, + { + Age: '84', + xxx_rate: '16.3', + + Gender: 'M' + }, + { + Age: '85', + xxx_rate: '20.9', + Gender: 'F' + }, + { + Age: '85', + xxx_rate: '16.2', + Gender: 'F' + } + ] + } + ], + xField: 'Age', + yField: 'xxx_rate', + seriesField: 'Gender', + legends: { + visible: true, + orient: 'right', + position: 'start', + item: { + label: { + style: { + fill: '#588996' + } + } + } + }, + color: ['#138AAA', '#E18398'], + point: { + style: { + fillOpacity: 1 + } + }, + padding: 20, + axes: [ + { + orient: 'bottom', + visible: true, + type: 'linear', + domainLine: { + visible: true, + style: { + stroke: 'gray', + strokeOpacity: 0.8 + } + }, + label: { + style: { + fill: '#3C859D', + fontWeight: 'bold' + } + }, + tick: { + visible: true, + tickCount: 16, + style: { + stroke: 'gray', + strokeOpacity: 1 + } + }, + grid: { visible: false }, + zero: false + }, + { + orient: 'left', + visible: true, + type: 'linear', + domainLine: { + visible: true, + style: { + stroke: 'gray', + strokeOpacity: 0.8 + } + }, + nice: true, + tick: { + visible: true, + tickCount: 8, + style: { + stroke: 'gray', + strokeOpacity: 1 + } + }, + label: { + style: { + fill: '#3C859D', + fontWeight: 'bold' + }, + formatMethod: v => { + return `${v}`; + } + }, + grid: { visible: false }, + zero: false + } + ] + } + } + }, + { + id: 'text-1', + type: 'Text', + zIndex: 0, + position: { + x: 1280 / 2, + y: 50, + width: 1280, + height: 720 + }, + options: { + graphic: { + text: 'Correlation of Suicide Rate and Age', + textAlign: 'center', + fontSize: 42, + fontWeight: 'bolder', + fill: '#FCFFFE' + } + } + }, + { + id: 'text-2', + type: 'Text', + zIndex: 0, + position: { + x: 1280 / 2, + y: 600, + width: 1280, + height: 720 + }, + options: { + graphic: { + text: 'Age', + textAlign: 'center', + fontSize: 42, + fontWeight: 'bolder', + fill: '#FCFFFE' + } + } + }, + { + id: 'text-3', + type: 'Text', + zIndex: 0, + position: { + x: 175, + y: 720 / 2 - 50, + width: 1280, + height: 720 + }, + options: { + graphic: { + text: 'Suicide \n Rate', + textAlign: 'center', + fontSize: 42, + fontWeight: 'bolder', + fill: '#FCFFFE' + } + } + } + ] +}; + +const story = new VStory.Story(dsl, { + dom: CONTAINER_ID, + scaleX: 0.7, + scaleY: 0.7 +}); +const player = new VStory.Player(story); +story.init(player); + +player.play(-1); + +window['story'] = story; +window['vstory'] = story; +``` From e19f0ca8a7a2c78a0f6b75e8eb538c66b1bd63d3 Mon Sep 17 00:00:00 2001 From: "jiangtao.yang" Date: Tue, 17 Dec 2024 17:43:29 +0800 Subject: [PATCH 2/2] fix: delete console.log in demo --- docs/assets/examples/en/infographic/scatter-income-obesity.md | 2 -- docs/assets/examples/zh/infographic/scatter-income-obesity.md | 4 ++-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/assets/examples/en/infographic/scatter-income-obesity.md b/docs/assets/examples/en/infographic/scatter-income-obesity.md index 3e33a996..18ddc9f9 100644 --- a/docs/assets/examples/en/infographic/scatter-income-obesity.md +++ b/docs/assets/examples/en/infographic/scatter-income-obesity.md @@ -14,7 +14,6 @@ cover: https://tosv.byted.org/obj/bit-cloud/vstory-infographic/preview/income_ob ```javascript livedemo template=vstory // 注册所有需要的内容 VStory.registerAll(); -console.log('debug'); const dsl = { acts: [ { @@ -412,7 +411,6 @@ const dsl = { } ] }; -console.log('debug'); const story = new VStory.Story(dsl, { dom: CONTAINER_ID, scaleX: 0.7, diff --git a/docs/assets/examples/zh/infographic/scatter-income-obesity.md b/docs/assets/examples/zh/infographic/scatter-income-obesity.md index 5f681ee7..fbd29e64 100644 --- a/docs/assets/examples/zh/infographic/scatter-income-obesity.md +++ b/docs/assets/examples/zh/infographic/scatter-income-obesity.md @@ -14,7 +14,7 @@ cover: https://tosv.byted.org/obj/bit-cloud/vstory-infographic/preview/income_ob ```javascript livedemo template=vstory // 注册所有需要的内容 VStory.registerAll(); -console.log('debug'); + const dsl = { acts: [ { @@ -412,7 +412,7 @@ const dsl = { } ] }; -console.log('debug'); + const story = new VStory.Story(dsl, { dom: CONTAINER_ID, scaleX: 0.7,