From 941ec9d60c4b98f8711e458b52103e770ce4a6b1 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Tue, 17 Dec 2024 15:34:39 +0800 Subject: [PATCH 1/3] docs: add source-of-new-contacts-area-chart demo --- packages/vstory/demo/src/App.tsx | 5 + .../source-of-new-contacts-area-chart.tsx | 370 ++++++++++++++++++ 2 files changed, 375 insertions(+) create mode 100644 packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx diff --git a/packages/vstory/demo/src/App.tsx b/packages/vstory/demo/src/App.tsx index bddf075c..c8395953 100644 --- a/packages/vstory/demo/src/App.tsx +++ b/packages/vstory/demo/src/App.tsx @@ -42,6 +42,7 @@ 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'; +import { AreaChart } from './demos/infographic/source-of-new-contacts-area-chart'; type MenusType = ( | { @@ -249,6 +250,10 @@ const App = () => { { name: 'BigDataWordCloud', component: BigDataWordCloud + }, + { + name: 'Source of New Contacts Area Chart', + component: AreaChart } ] }, diff --git a/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx b/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx new file mode 100644 index 00000000..47851ca9 --- /dev/null +++ b/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx @@ -0,0 +1,370 @@ +import React, { createRef, useEffect } from 'react'; +import { Player, Story } from '../../../../../vstory-core/src'; +import { registerAll } from '../../../../../vstory/src'; + +registerAll(); +export const AreaChart = () => { + const id = 'AreaChart'; + 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-top', + 'background-bottom', + 'title-icon', + 'title-text-1', + 'title-text-2', + 'chart-background', + 'chart', + 'legend-1-circle', + 'legend-1-text', + 'legend-2-circle', + 'legend-2-text', + 'legend-3-circle', + 'legend-3-text', + 'legend-4-circle', + 'legend-4-text' + ], + characterActions: [ + { + action: 'appear' + } + ] + } + ] + } + ] + } + ], + characters: [ + { + id: 'background-top', + type: 'Rect', + zIndex: 0, + position: { + x: 0, + y: 0, + width: 1280, + height: 180 + }, + options: { + graphic: { + fill: 'rgb(251,87,56)' + } + } + }, + { + id: 'background-bottom', + type: 'Rect', + zIndex: 0, + position: { + x: 0, + y: 180, + width: 1280, + height: 540 + }, + options: { + graphic: { + fill: 'rgb(0,41,107)' + } + } + }, + { + id: 'title-icon', + type: 'Image', + zIndex: 0, + position: { + x: 220, + y: 60, + width: 60, + height: 60 + }, + options: { + graphic: { + image: `` + } + } + }, + { + id: 'title-text-1', + type: 'Text', + zIndex: 0, + position: { + x: 290, + y: 50, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'Source of', + textAlign: 'left', + fontSize: 70, + fontWeight: 'bold', + fill: 'white' + } + } + }, + { + id: 'title-text-2', + type: 'Text', + zIndex: 0, + position: { + x: 630, + y: 50, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'New Contacts', + textAlign: 'left', + fontSize: 70, + fontWeight: 'bold', + fill: 'rgb(244,211,94)' + } + } + }, + { + id: 'chart-background', + type: 'Rect', + zIndex: 0, + position: { + x: 200, + y: 140, + width: 900, + height: 450 + }, + options: { + graphic: { + fill: '#FFF', + cornerRadius: 20 + } + } + }, + { + id: 'chart', + type: 'VChart', + zIndex: 0, + position: { + x: 200, + y: 140, + width: 900, + height: 450 + }, + options: { + spec: { + type: 'area', + data: { + values: [ + { type: 'Organic search', year: '2019', value: 14000 }, + { type: 'Organic search', year: '2020', value: 25000 }, + { type: 'Organic search', year: '2021', value: 20000 }, + { type: 'Organic search', year: '2022', value: 23000 }, + { type: 'Organic search', year: '2023', value: 28 }, + { type: 'Referral links', year: '2019', value: 8000 }, + { type: 'Referral links', year: '2020', value: 6500 }, + { type: 'Referral links', year: '2021', value: 12000 }, + { type: 'Referral links', year: '2022', value: 15000 }, + { type: 'Referral links', year: '2023', value: 18 }, + { type: 'Paid ads', year: '2019', value: 24000 }, + { type: 'Paid ads', year: '2020', value: 20000 }, + { type: 'Paid ads', year: '2021', value: 20000 }, + { type: 'Paid ads', year: '2022', value: 15000 }, + { type: 'Paid ads', year: '2023', value: 13 }, + { type: 'Social media', year: '2019', value: 30000 }, + { type: 'Social media', year: '2020', value: 20000 }, + { type: 'Social media', year: '2021', value: 33000 }, + { type: 'Social media', year: '2022', value: 28000 }, + { type: 'Social media', year: '2023', value: 6 } + ] + }, + stack: true, + xField: 'year', + yField: 'value', + seriesField: 'type', + background: '#FFF', + color: ['rgb(244,211,94)', 'rgb(249,87,56)', 'rgb(91,192,235)', 'rgb(155,197,61)'], + area: { + style: { + curveType: 'monotone', + fillOpacity: 0.6 + } + } + } + } + }, + { + id: 'legend-1-circle', + type: 'Shape', + zIndex: 0, + position: { + x: 200, + y: 640, + width: 30, + height: 30 + }, + options: { + graphic: { + shape: 'circle', + fill: 'rgb(244,211,94)' + } + } + }, + { + id: 'legend-1-text', + type: 'Text', + zIndex: 0, + position: { + x: 233, + y: 643, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'Organic search', + textAlign: 'left', + fontSize: 24, + fontWeight: 'bold', + fill: '#FFF' + } + } + }, + { + id: 'legend-2-circle', + type: 'Shape', + zIndex: 0, + position: { + x: 450, + y: 640, + width: 30, + height: 30 + }, + options: { + graphic: { + shape: 'circle', + fill: 'rgb(249,87,56)' + } + } + }, + { + id: 'legend-2-text', + type: 'Text', + zIndex: 0, + position: { + x: 483, + y: 640, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'Referral links', + textAlign: 'left', + fontSize: 24, + fontWeight: 'bold', + fill: '#FFF' + } + } + }, + { + id: 'legend-3-circle', + type: 'Shape', + zIndex: 0, + position: { + x: 690, + y: 640, + width: 30, + height: 30 + }, + options: { + graphic: { + shape: 'circle', + fill: 'rgb(91,192,235)' + } + } + }, + { + id: 'legend-3-text', + type: 'Text', + zIndex: 0, + position: { + x: 723, + y: 640, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'Paid ads', + textAlign: 'left', + fontSize: 24, + fontWeight: 'bold', + fill: '#FFF' + } + } + }, + { + id: 'legend-4-circle', + type: 'Shape', + zIndex: 0, + position: { + x: 900, + y: 640, + width: 30, + height: 30 + }, + options: { + graphic: { + shape: 'circle', + fill: 'rgb(155,197,61)' + } + } + }, + { + id: 'legend-4-text', + type: 'Text', + zIndex: 0, + position: { + x: 933, + y: 640, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'Social media', + textAlign: 'left', + fontSize: 24, + fontWeight: 'bold', + fill: '#FFF' + } + } + } + ] + }; + + 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 940fa7d90188a51c748eeafcc3a2eb9d66c44f8d Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Tue, 17 Dec 2024 16:43:55 +0800 Subject: [PATCH 2/3] docs: add marketing-wordclouds demo --- packages/vstory/demo/src/App.tsx | 5 + .../demos/infographic/marking-wordcloud.tsx | 368 ++++++++++++++++++ .../source-of-new-contacts-area-chart.tsx | 8 +- 3 files changed, 377 insertions(+), 4 deletions(-) create mode 100644 packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx diff --git a/packages/vstory/demo/src/App.tsx b/packages/vstory/demo/src/App.tsx index c8395953..8371ca03 100644 --- a/packages/vstory/demo/src/App.tsx +++ b/packages/vstory/demo/src/App.tsx @@ -43,6 +43,7 @@ import { BarWorkingInSameIndustry } from './demos/infographic/bar-work-in-same-i import { ProjectGoal } from './demos/infographic/project-goal'; import { BigDataWordCloud } from './demos/infographic/big-data-wordcloud'; import { AreaChart } from './demos/infographic/source-of-new-contacts-area-chart'; +import { MarketingWordcloud } from './demos/infographic/marking-wordcloud'; type MenusType = ( | { @@ -254,6 +255,10 @@ const App = () => { { name: 'Source of New Contacts Area Chart', component: AreaChart + }, + { + name: 'Marketing WordCloud', + component: MarketingWordcloud } ] }, diff --git a/packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx b/packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx new file mode 100644 index 00000000..2ffd1e34 --- /dev/null +++ b/packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx @@ -0,0 +1,368 @@ +import React, { createRef, useEffect } from 'react'; +import { Player, Story } from '../../../../../vstory-core/src'; +import { registerAll } from '../../../../../vstory/src'; + +registerAll(); +export const MarketingWordcloud = () => { + const id = 'MarketingWordcloud'; + useEffect(() => { + const container = document.getElementById(id); + const canvas = document.createElement('canvas'); + container?.appendChild(canvas); + + const chartPath = + 'M948.6 627c1.2-2 2.6-4 3.8-5.8 8-12.4 15.2-25.4 21.4-39 6.2-13.6 11.4-27.4 15.6-41.8 4.2-14.4 7.4-28.8 9.6-43.6 2.2-14.8 3.2-29.6 3.2-44.6 0.6-172.6-140.2-312.6-314.2-312.6-151.8 0-278.4 106.8-308.2 248.8-4.4 21-6.8 42.4-6.8 64 0 172.8 135.4 316.6 309.4 316.6 27.6 0 65-8.6 85.4-14.4 20.4-5.8 40.8-13.4 46-15.6 5.2-2 13.4-4.2 20-2.2l130 39c1.2 0.4 2.4 0.4 3.6 0 1.2-0.4 2.2-0.8 3-1.8 0.8-0.8 1.4-2 1.8-3.2 0.4-1.2 0.4-2.4 0-3.6L942.6 650c-2-8.8-2.4-10.4 6-23zM721 806c-13 2.2-26 3.4-39 3.6-71.2 0-138.6-19.4-193.2-56-17.4-11-33.8-23.8-48.8-38.2-15-14.4-28.6-30.2-40.4-47.4-43.8-60-67.8-136.4-67.8-216.4 0-5.4 0.2-10.6 0.4-16 0-0.8 0-1.6-0.2-2.2-0.2-0.8-0.4-1.4-0.8-2.2-0.4-0.6-0.8-1.2-1.4-1.8l-1.8-1.2c-0.6-0.2-1.4-0.4-2.2-0.6-0.8 0-1.4 0-2.2 0.2-0.8 0.2-1.4 0.4-2 0.8-0.6 0.4-1.2 0.8-1.8 1.4-2.4 2.8-5 5.6-7.4 8.6-2.4 3-4.6 5.8-7 9-2.2 3-4.4 6-6.6 9.2-2.2 3.2-4.2 6.2-6.2 9.4s-4 6.4-5.8 9.8c-1.8 3.2-3.6 6.6-5.4 10-1.8 3.4-3.4 6.8-5 10.2-1.6 3.4-3.2 7-4.6 10.4-1.4 3.6-2.8 7-4.2 10.6-1.4 3.6-2.6 7.2-3.8 10.8-1.2 3.6-2.2 7.2-3.4 11-1 3.6-2 7.4-2.8 11-0.8 3.8-1.6 7.4-2.4 11.2-0.8 3.8-1.4 7.6-2 11.2-0.6 3.8-1 7.6-1.6 11.4-0.4 3.8-0.8 7.6-1 11.4l-0.6 11.4c-0.2 3.8-0.2 7.6-0.2 11.4 0 3.8 0.2 7.6 0.4 11.4 0.2 3.8 0.4 7.6 0.8 11.4l1.2 11.4c0.4 3.8 1 7.6 1.6 11.4 0.6 3.8 1.4 7.6 2.2 11.2 0.8 3.8 1.6 7.4 2.6 11.2 1 3.6 2 7.4 3 11 1 3.6 2.2 7.2 3.4 10.8 1.2 3.6 2.6 7.2 4 10.8 1.4 3.6 2.8 7 4.4 10.6 1.6 3.4 3 7 4.8 10.4 1.6 3.4 3.4 6.8 5.2 10.2 1.8 3.4 3.6 6.6 5.6 10l6 9.6c4.2 6.6 6.6 11.6 5.8 15L277.2 910c0 0.2 0 0.6-0.2 0.8v1c0 0.4 0 0.6 0.2 0.8 0 0.2 0.2 0.6 0.2 0.8 0 0.2 0.2 0.6 0.4 0.8 0.2 0.2 0.2 0.6 0.4 0.8 0.2 0.2 0.4 0.4 0.6 0.8l0.6 0.6 0.6 0.6c0.2 0.2 0.4 0.4 0.8 0.4 0.2 0.2 0.6 0.2 0.8 0.4 0.2 0 0.6 0.2 0.8 0.2 0.2 0 0.6 0 0.8 0.2h0.8c0.2 0 0.6 0 0.8-0.2 0.2 0 0.6-0.2 0.8-0.2l114.2-42.2c3.4-1.4 7.2-2.2 10.8-2 3.8 0 7.4 0.8 10.8 2.4 34.2 14 72 22.4 109.8 22.4 9 0 18-0.4 27-1.2 9-0.8 17.8-2.2 26.6-3.8 8.8-1.8 17.6-3.8 26.2-6.4 8.6-2.6 17.2-5.6 25.6-9a274.252 274.252 0 0 0 48-25.2c7.6-5 15-10.4 22-16 7.2-5.8 14-11.8 20.4-18.2 0.6-0.6 1-1.2 1.4-1.8 0.4-0.8 0.6-1.4 0.8-2.2 0.2-0.8 0.2-1.6 0-2.4-0.2-0.8-0.4-1.6-0.6-2.2-0.4-0.8-0.8-1.4-1.4-2-0.6-0.6-1.2-1-1.8-1.4-0.6-0.4-1.4-0.6-2.2-0.8-0.8 0.2-1.4 0.2-2.2 0.2z'; + + const dsl = { + acts: [ + { + id: 'defaultAct', + scenes: [ + { + id: 'defaultScene', + actions: [ + { + characterId: [ + 'background-1', + 'background-2', + 'title', + 'chart', + 'list-1-icon', + 'list-1-text', + 'list-2-icon', + 'list-2-text', + 'list-3-icon', + 'list-3-text', + 'list-4-icon', + 'list-4-text' + ], + characterActions: [ + { + action: 'appear' + } + ] + } + ] + } + ] + } + ], + characters: [ + { + id: 'background-1', + type: 'Rect', + zIndex: 0, + position: { + x: -150, + y: 610, + width: 400, + height: 400, + + angle: Math.PI / 4 - 0.2 + }, + options: { + graphic: { + fill: 'rgb(242,242,242)' + } + } + }, + { + id: 'background-2', + type: 'Rect', + zIndex: 0, + position: { + x: -150, + y: 600, + width: 300, + height: 300, + angle: Math.PI / 4 + }, + options: { + graphic: { + fill: 'rgb(217,217,217)' + } + } + }, + { + id: 'title', + type: 'Text', + zIndex: 0, + position: { + x: 420, + y: 50, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'Marketing Wordcloud', + textAlign: 'left', + fontSize: 40, + fontWeight: 'bold', + fill: '#000' + } + } + }, + { + id: 'chart', + type: 'VChart', + zIndex: 0, + position: { + x: 120, + y: 140, + width: 600, + height: 450 + }, + options: { + spec: { + type: 'wordCloud', + maskShape: + '', + nameField: 'name', + valueField: 'value', + seriesField: 'name', + seriesStyle: [ + { + name: 'MARKETING', + word: { + style: { + fill: 'rgb(51,133,105)' + } + } + } + ], + colorList: ['#000'], + wordCloudShapeConfig: { + fillingColorList: ['#000'] + }, + data: [ + { + name: 'data', + values: [ + { name: 'MARKETING', value: 1000 }, + { name: 'SALES', value: 500 }, + { name: 'INTERNET', value: 500 }, + { name: 'ACCOUNT', value: 500 }, + { name: 'DEVELOP', value: 200 }, + { name: 'ORGANIZATION', value: 200 }, + { name: 'CUSTOMERS', value: 200 }, + { name: 'BUDGET', value: 200 }, + { name: 'RESEARCH', value: 100 }, + { name: 'SOCIAL', value: 10 }, + { name: 'AGGRESSIVE', value: 10 }, + { name: 'PLANNING', value: 10 }, + { name: 'MEDIA', value: 10 }, + { name: 'TARGET', value: 10 }, + { name: 'ADVANCE', value: 10 }, + { name: 'INNOVATE', value: 10 }, + { name: 'IDEA', value: 10 }, + { name: 'TEAM', value: 10 }, + { name: 'PROMOTION', value: 10 }, + { name: 'ACCOMPLISHMENT', value: 10 }, + { name: 'BELIEF', value: 10 }, + { name: 'NEWS', value: 10 }, + { name: 'SUCCESS', value: 10 }, + { name: 'GROWING', value: 10 }, + { name: 'SEGMENT', value: 10 }, + { name: 'DIVISION', value: 10 }, + { name: 'STRATEGY', value: 10 }, + { name: 'REFRESH', value: 10 }, + { name: 'DESIGN', value: 10 }, + { name: 'CONTEST', value: 10 }, + { name: 'ARCHITECTURE', value: 10 }, + { name: 'CREATIVE', value: 10 }, + { name: 'COMPANY', value: 10 }, + { name: 'INQUIRY', value: 10 }, + { name: 'DESTINATION', value: 10 }, + { name: 'MATCH', value: 10 }, + { name: 'ADMIT', value: 10 }, + { name: 'AMOUNT', value: 10 }, + { name: 'FORWARD', value: 10 }, + { name: 'ACCEPT', value: 10 }, + { name: 'COOL', value: 10 }, + { name: 'VIRAL', value: 10 }, + { name: 'MASS', value: 10 }, + { name: 'CONSTRUCTION', value: 10 }, + { name: 'INNOVATION', value: 10 } + ] + } + ], + color: { + type: 'ordinal', + // domain: ['a', 'b'], + // range: ['#000', '#000'], + specified: { + MARKETING: 'green', + d: 'red' + } + } + } + } + }, + { + id: 'list-1-icon', + type: 'Shape', + zIndex: 0, + position: { + x: 700, + y: 155, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: chartPath, + fill: '#ddd' + } + } + }, + { + id: 'list-1-text', + type: 'Text', + zIndex: 0, + position: { + x: 780, + y: 163, + width: 450, + height: 200 + }, + options: { + graphic: { + text: 'MARKETING strategies require continuous INNOVATION and CREATIVE approaches to effectively engage CUSTOMERS.', + textAlign: 'left', + fontSize: 18, + fontWeight: 'bold', + fill: '#aaa', + wordBreak: 'break-word' + } + } + }, + { + id: 'list-2-icon', + type: 'Shape', + zIndex: 0, + position: { + x: 700, + y: 255, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: chartPath, + fill: '#ddd' + } + } + }, + { + id: 'list-2-text', + type: 'Text', + zIndex: 0, + position: { + x: 780, + y: 260, + width: 450, + height: 200 + }, + options: { + graphic: { + text: 'Successful SALES not only depend on the BUDGET but also on thorough RESEARCH and market INQUIRY.', + textAlign: 'left', + fontSize: 18, + fontWeight: 'bold', + fill: '#aaa', + wordBreak: 'break-word' + } + } + }, + { + id: 'list-3-icon', + type: 'Shape', + zIndex: 0, + position: { + x: 700, + y: 355, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: chartPath, + fill: '#ddd' + } + } + }, + { + id: 'list-3-text', + type: 'Text', + zIndex: 0, + position: { + x: 780, + y: 360, + width: 450, + height: 200 + }, + options: { + graphic: { + text: 'In the INTERNET age, SOCIAL media plays a crucial role in PROMOTION and reaching the TARGET audience.', + textAlign: 'left', + fontSize: 18, + fontWeight: 'bold', + fill: '#aaa', + wordBreak: 'break-word' + } + } + }, + { + id: 'list-4-icon', + type: 'Shape', + zIndex: 0, + position: { + x: 700, + y: 455, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: chartPath, + fill: '#ddd' + } + } + }, + { + id: 'list-4-text', + type: 'Text', + zIndex: 0, + position: { + x: 780, + y: 460, + width: 450, + height: 200 + }, + options: { + graphic: { + text: 'A strong ORGANIZATION focuses on PLANNING and DEVELOP to achieve SUCCESS and ACCOMPLISHMENT in their goals.', + textAlign: 'left', + fontSize: 18, + fontWeight: 'bold', + fill: '#aaa', + wordBreak: 'break-word' + } + } + } + ] + }; + + const story = new Story(dsl, { canvas, width: 1280, height: 720, background: '#FFF' }); + const player = new Player(story); + story.init(player); + player.play(-1); + + return () => { + story.release(); + }; + }, []); + + return
; +}; diff --git a/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx b/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx index 47851ca9..ce400d8e 100644 --- a/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx +++ b/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx @@ -217,7 +217,7 @@ export const AreaChart = () => { }, options: { graphic: { - shape: 'circle', + symbolType: 'circle', fill: 'rgb(244,211,94)' } } @@ -254,7 +254,7 @@ export const AreaChart = () => { }, options: { graphic: { - shape: 'circle', + symbolType: 'circle', fill: 'rgb(249,87,56)' } } @@ -291,7 +291,7 @@ export const AreaChart = () => { }, options: { graphic: { - shape: 'circle', + symbolType: 'circle', fill: 'rgb(91,192,235)' } } @@ -328,7 +328,7 @@ export const AreaChart = () => { }, options: { graphic: { - shape: 'circle', + symbolType: 'circle', fill: 'rgb(155,197,61)' } } From d66a103dde6ba0cb06e1e575c348b1bd99f89ffc Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Tue, 17 Dec 2024 17:13:57 +0800 Subject: [PATCH 3/3] docs: add infographic demos --- .../en/infographic/marking-wordcloud.md | 370 +++++++++++++++++ .../source-of-new-contacts-area-chart.md | 372 +++++++++++++++++ docs/assets/examples/menu.json | 14 + .../zh/infographic/marking-wordcloud.md | 371 +++++++++++++++++ .../source-of-new-contacts-area-chart.md | 373 ++++++++++++++++++ 5 files changed, 1500 insertions(+) create mode 100644 docs/assets/examples/en/infographic/marking-wordcloud.md create mode 100644 docs/assets/examples/en/infographic/source-of-new-contacts-area-chart.md create mode 100644 docs/assets/examples/zh/infographic/marking-wordcloud.md create mode 100644 docs/assets/examples/zh/infographic/source-of-new-contacts-area-chart.md diff --git a/docs/assets/examples/en/infographic/marking-wordcloud.md b/docs/assets/examples/en/infographic/marking-wordcloud.md new file mode 100644 index 00000000..bd0039bd --- /dev/null +++ b/docs/assets/examples/en/infographic/marking-wordcloud.md @@ -0,0 +1,370 @@ +--- +category: examples +group: infographic +title: Marketing Wordcloud +keywords: templates, visualization, wordcloud +order: 1-0 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/wordcloud-marketing.png +--- + +# Wordcloud Infographic + +## Code Demo + +```javascript livedemo template=vstory +VStory.registerAll(); +const chartPath = + 'M948.6 627c1.2-2 2.6-4 3.8-5.8 8-12.4 15.2-25.4 21.4-39 6.2-13.6 11.4-27.4 15.6-41.8 4.2-14.4 7.4-28.8 9.6-43.6 2.2-14.8 3.2-29.6 3.2-44.6 0.6-172.6-140.2-312.6-314.2-312.6-151.8 0-278.4 106.8-308.2 248.8-4.4 21-6.8 42.4-6.8 64 0 172.8 135.4 316.6 309.4 316.6 27.6 0 65-8.6 85.4-14.4 20.4-5.8 40.8-13.4 46-15.6 5.2-2 13.4-4.2 20-2.2l130 39c1.2 0.4 2.4 0.4 3.6 0 1.2-0.4 2.2-0.8 3-1.8 0.8-0.8 1.4-2 1.8-3.2 0.4-1.2 0.4-2.4 0-3.6L942.6 650c-2-8.8-2.4-10.4 6-23zM721 806c-13 2.2-26 3.4-39 3.6-71.2 0-138.6-19.4-193.2-56-17.4-11-33.8-23.8-48.8-38.2-15-14.4-28.6-30.2-40.4-47.4-43.8-60-67.8-136.4-67.8-216.4 0-5.4 0.2-10.6 0.4-16 0-0.8 0-1.6-0.2-2.2-0.2-0.8-0.4-1.4-0.8-2.2-0.4-0.6-0.8-1.2-1.4-1.8l-1.8-1.2c-0.6-0.2-1.4-0.4-2.2-0.6-0.8 0-1.4 0-2.2 0.2-0.8 0.2-1.4 0.4-2 0.8-0.6 0.4-1.2 0.8-1.8 1.4-2.4 2.8-5 5.6-7.4 8.6-2.4 3-4.6 5.8-7 9-2.2 3-4.4 6-6.6 9.2-2.2 3.2-4.2 6.2-6.2 9.4s-4 6.4-5.8 9.8c-1.8 3.2-3.6 6.6-5.4 10-1.8 3.4-3.4 6.8-5 10.2-1.6 3.4-3.2 7-4.6 10.4-1.4 3.6-2.8 7-4.2 10.6-1.4 3.6-2.6 7.2-3.8 10.8-1.2 3.6-2.2 7.2-3.4 11-1 3.6-2 7.4-2.8 11-0.8 3.8-1.6 7.4-2.4 11.2-0.8 3.8-1.4 7.6-2 11.2-0.6 3.8-1 7.6-1.6 11.4-0.4 3.8-0.8 7.6-1 11.4l-0.6 11.4c-0.2 3.8-0.2 7.6-0.2 11.4 0 3.8 0.2 7.6 0.4 11.4 0.2 3.8 0.4 7.6 0.8 11.4l1.2 11.4c0.4 3.8 1 7.6 1.6 11.4 0.6 3.8 1.4 7.6 2.2 11.2 0.8 3.8 1.6 7.4 2.6 11.2 1 3.6 2 7.4 3 11 1 3.6 2.2 7.2 3.4 10.8 1.2 3.6 2.6 7.2 4 10.8 1.4 3.6 2.8 7 4.4 10.6 1.6 3.4 3 7 4.8 10.4 1.6 3.4 3.4 6.8 5.2 10.2 1.8 3.4 3.6 6.6 5.6 10l6 9.6c4.2 6.6 6.6 11.6 5.8 15L277.2 910c0 0.2 0 0.6-0.2 0.8v1c0 0.4 0 0.6 0.2 0.8 0 0.2 0.2 0.6 0.2 0.8 0 0.2 0.2 0.6 0.4 0.8 0.2 0.2 0.2 0.6 0.4 0.8 0.2 0.2 0.4 0.4 0.6 0.8l0.6 0.6 0.6 0.6c0.2 0.2 0.4 0.4 0.8 0.4 0.2 0.2 0.6 0.2 0.8 0.4 0.2 0 0.6 0.2 0.8 0.2 0.2 0 0.6 0 0.8 0.2h0.8c0.2 0 0.6 0 0.8-0.2 0.2 0 0.6-0.2 0.8-0.2l114.2-42.2c3.4-1.4 7.2-2.2 10.8-2 3.8 0 7.4 0.8 10.8 2.4 34.2 14 72 22.4 109.8 22.4 9 0 18-0.4 27-1.2 9-0.8 17.8-2.2 26.6-3.8 8.8-1.8 17.6-3.8 26.2-6.4 8.6-2.6 17.2-5.6 25.6-9a274.252 274.252 0 0 0 48-25.2c7.6-5 15-10.4 22-16 7.2-5.8 14-11.8 20.4-18.2 0.6-0.6 1-1.2 1.4-1.8 0.4-0.8 0.6-1.4 0.8-2.2 0.2-0.8 0.2-1.6 0-2.4-0.2-0.8-0.4-1.6-0.6-2.2-0.4-0.8-0.8-1.4-1.4-2-0.6-0.6-1.2-1-1.8-1.4-0.6-0.4-1.4-0.6-2.2-0.8-0.8 0.2-1.4 0.2-2.2 0.2z'; + +const dsl = { + acts: [ + { + id: 'defaultAct', + scenes: [ + { + id: 'defaultScene', + actions: [ + { + characterId: [ + 'background-1', + 'background-2', + 'title', + 'chart', + 'list-1-icon', + 'list-1-text', + 'list-2-icon', + 'list-2-text', + 'list-3-icon', + 'list-3-text', + 'list-4-icon', + 'list-4-text' + ], + characterActions: [ + { + action: 'appear' + } + ] + } + ] + } + ] + } + ], + characters: [ + { + id: 'background-1', + type: 'Rect', + zIndex: 0, + position: { + x: -150, + y: 610, + width: 400, + height: 400, + + angle: Math.PI / 4 - 0.2 + }, + options: { + graphic: { + fill: 'rgb(242,242,242)' + } + } + }, + { + id: 'background-2', + type: 'Rect', + zIndex: 0, + position: { + x: -150, + y: 600, + width: 300, + height: 300, + angle: Math.PI / 4 + }, + options: { + graphic: { + fill: 'rgb(217,217,217)' + } + } + }, + { + id: 'title', + type: 'Text', + zIndex: 0, + position: { + x: 420, + y: 50, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'Marketing Wordcloud', + textAlign: 'left', + fontSize: 40, + fontWeight: 'bold', + fill: '#000' + } + } + }, + { + id: 'chart', + type: 'VChart', + zIndex: 0, + position: { + x: 120, + y: 140, + width: 600, + height: 450 + }, + options: { + spec: { + type: 'wordCloud', + maskShape: + '', + nameField: 'name', + valueField: 'value', + seriesField: 'name', + seriesStyle: [ + { + name: 'MARKETING', + word: { + style: { + fill: 'rgb(51,133,105)' + } + } + } + ], + colorList: ['#000'], + wordCloudShapeConfig: { + fillingColorList: ['#000'] + }, + data: [ + { + name: 'data', + values: [ + { name: 'MARKETING', value: 1000 }, + { name: 'SALES', value: 500 }, + { name: 'INTERNET', value: 500 }, + { name: 'ACCOUNT', value: 500 }, + { name: 'DEVELOP', value: 200 }, + { name: 'ORGANIZATION', value: 200 }, + { name: 'CUSTOMERS', value: 200 }, + { name: 'BUDGET', value: 200 }, + { name: 'RESEARCH', value: 100 }, + { name: 'SOCIAL', value: 10 }, + { name: 'AGGRESSIVE', value: 10 }, + { name: 'PLANNING', value: 10 }, + { name: 'MEDIA', value: 10 }, + { name: 'TARGET', value: 10 }, + { name: 'ADVANCE', value: 10 }, + { name: 'INNOVATE', value: 10 }, + { name: 'IDEA', value: 10 }, + { name: 'TEAM', value: 10 }, + { name: 'PROMOTION', value: 10 }, + { name: 'ACCOMPLISHMENT', value: 10 }, + { name: 'BELIEF', value: 10 }, + { name: 'NEWS', value: 10 }, + { name: 'SUCCESS', value: 10 }, + { name: 'GROWING', value: 10 }, + { name: 'SEGMENT', value: 10 }, + { name: 'DIVISION', value: 10 }, + { name: 'STRATEGY', value: 10 }, + { name: 'REFRESH', value: 10 }, + { name: 'DESIGN', value: 10 }, + { name: 'CONTEST', value: 10 }, + { name: 'ARCHITECTURE', value: 10 }, + { name: 'CREATIVE', value: 10 }, + { name: 'COMPANY', value: 10 }, + { name: 'INQUIRY', value: 10 }, + { name: 'DESTINATION', value: 10 }, + { name: 'MATCH', value: 10 }, + { name: 'ADMIT', value: 10 }, + { name: 'AMOUNT', value: 10 }, + { name: 'FORWARD', value: 10 }, + { name: 'ACCEPT', value: 10 }, + { name: 'COOL', value: 10 }, + { name: 'VIRAL', value: 10 }, + { name: 'MASS', value: 10 }, + { name: 'CONSTRUCTION', value: 10 }, + { name: 'INNOVATION', value: 10 } + ] + } + ], + color: { + type: 'ordinal', + // domain: ['a', 'b'], + // range: ['#000', '#000'], + specified: { + MARKETING: 'green', + d: 'red' + } + } + } + } + }, + { + id: 'list-1-icon', + type: 'Shape', + zIndex: 0, + position: { + x: 700, + y: 155, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: chartPath, + fill: '#ddd' + } + } + }, + { + id: 'list-1-text', + type: 'Text', + zIndex: 0, + position: { + x: 780, + y: 163, + width: 450, + height: 200 + }, + options: { + graphic: { + text: 'MARKETING strategies require continuous INNOVATION and CREATIVE approaches to effectively engage CUSTOMERS.', + textAlign: 'left', + fontSize: 18, + fontWeight: 'bold', + fill: '#aaa', + wordBreak: 'break-word' + } + } + }, + { + id: 'list-2-icon', + type: 'Shape', + zIndex: 0, + position: { + x: 700, + y: 255, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: chartPath, + fill: '#ddd' + } + } + }, + { + id: 'list-2-text', + type: 'Text', + zIndex: 0, + position: { + x: 780, + y: 260, + width: 450, + height: 200 + }, + options: { + graphic: { + text: 'Successful SALES not only depend on the BUDGET but also on thorough RESEARCH and market INQUIRY.', + textAlign: 'left', + fontSize: 18, + fontWeight: 'bold', + fill: '#aaa', + wordBreak: 'break-word' + } + } + }, + { + id: 'list-3-icon', + type: 'Shape', + zIndex: 0, + position: { + x: 700, + y: 355, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: chartPath, + fill: '#ddd' + } + } + }, + { + id: 'list-3-text', + type: 'Text', + zIndex: 0, + position: { + x: 780, + y: 360, + width: 450, + height: 200 + }, + options: { + graphic: { + text: 'In the INTERNET age, SOCIAL media plays a crucial role in PROMOTION and reaching the TARGET audience.', + textAlign: 'left', + fontSize: 18, + fontWeight: 'bold', + fill: '#aaa', + wordBreak: 'break-word' + } + } + }, + { + id: 'list-4-icon', + type: 'Shape', + zIndex: 0, + position: { + x: 700, + y: 455, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: chartPath, + fill: '#ddd' + } + } + }, + { + id: 'list-4-text', + type: 'Text', + zIndex: 0, + position: { + x: 780, + y: 460, + width: 450, + height: 200 + }, + options: { + graphic: { + text: 'A strong ORGANIZATION focuses on PLANNING and DEVELOP to achieve SUCCESS and ACCOMPLISHMENT in their goals.', + textAlign: 'left', + fontSize: 18, + fontWeight: 'bold', + fill: '#aaa', + wordBreak: 'break-word' + } + } + } + ] +}; +const story = new VStory.Story(dsl, { + dom: CONTAINER_ID, + width: 1280, height: 720 +}); +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/source-of-new-contacts-area-chart.md b/docs/assets/examples/en/infographic/source-of-new-contacts-area-chart.md new file mode 100644 index 00000000..08a2de70 --- /dev/null +++ b/docs/assets/examples/en/infographic/source-of-new-contacts-area-chart.md @@ -0,0 +1,372 @@ +--- +category: examples +group: infographic +title: Source of New Contacts Area Chart +keywords: templates, visualization, area-chart +order: 1-0 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/source-of-new-contacts.png +--- + +# Area Chart Infographic: Source of New Contacts Area Chart + +## Code Demo + +```javascript livedemo template=vstory +VStory.registerAll(); +const dsl = { + acts: [ + { + id: 'defaultAct', + scenes: [ + { + id: 'defaultScene', + actions: [ + { + characterId: [ + 'background-top', + 'background-bottom', + 'title-icon', + 'title-text-1', + 'title-text-2', + 'chart-background', + 'chart', + 'legend-1-circle', + 'legend-1-text', + 'legend-2-circle', + 'legend-2-text', + 'legend-3-circle', + 'legend-3-text', + 'legend-4-circle', + 'legend-4-text' + ], + characterActions: [ + { + action: 'appear' + } + ] + } + ] + } + ] + } + ], + characters: [ + { + id: 'background-top', + type: 'Rect', + zIndex: 0, + position: { + x: 0, + y: 0, + width: 1280, + height: 180 + }, + options: { + graphic: { + fill: 'rgb(251,87,56)' + } + } + }, + { + id: 'background-bottom', + type: 'Rect', + zIndex: 0, + position: { + x: 0, + y: 180, + width: 1280, + height: 540 + }, + options: { + graphic: { + fill: 'rgb(0,41,107)' + } + } + }, + { + id: 'title-icon', + type: 'Image', + zIndex: 0, + position: { + x: 220, + y: 60, + width: 60, + height: 60 + }, + options: { + graphic: { + image: `` + } + } + }, + { + id: 'title-text-1', + type: 'Text', + zIndex: 0, + position: { + x: 290, + y: 50, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'Source of', + textAlign: 'left', + fontSize: 70, + fontWeight: 'bold', + fill: 'white' + } + } + }, + { + id: 'title-text-2', + type: 'Text', + zIndex: 0, + position: { + x: 630, + y: 50, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'New Contacts', + textAlign: 'left', + fontSize: 70, + fontWeight: 'bold', + fill: 'rgb(244,211,94)' + } + } + }, + { + id: 'chart-background', + type: 'Rect', + zIndex: 0, + position: { + x: 200, + y: 140, + width: 900, + height: 450 + }, + options: { + graphic: { + fill: '#FFF', + cornerRadius: 20 + } + } + }, + { + id: 'chart', + type: 'VChart', + zIndex: 0, + position: { + x: 200, + y: 140, + width: 900, + height: 450 + }, + options: { + spec: { + type: 'area', + data: { + values: [ + { type: 'Organic search', year: '2019', value: 14000 }, + { type: 'Organic search', year: '2020', value: 25000 }, + { type: 'Organic search', year: '2021', value: 20000 }, + { type: 'Organic search', year: '2022', value: 23000 }, + { type: 'Organic search', year: '2023', value: 28 }, + { type: 'Referral links', year: '2019', value: 8000 }, + { type: 'Referral links', year: '2020', value: 6500 }, + { type: 'Referral links', year: '2021', value: 12000 }, + { type: 'Referral links', year: '2022', value: 15000 }, + { type: 'Referral links', year: '2023', value: 18 }, + { type: 'Paid ads', year: '2019', value: 24000 }, + { type: 'Paid ads', year: '2020', value: 20000 }, + { type: 'Paid ads', year: '2021', value: 20000 }, + { type: 'Paid ads', year: '2022', value: 15000 }, + { type: 'Paid ads', year: '2023', value: 13 }, + { type: 'Social media', year: '2019', value: 30000 }, + { type: 'Social media', year: '2020', value: 20000 }, + { type: 'Social media', year: '2021', value: 33000 }, + { type: 'Social media', year: '2022', value: 28000 }, + { type: 'Social media', year: '2023', value: 6 } + ] + }, + stack: true, + xField: 'year', + yField: 'value', + seriesField: 'type', + background: '#FFF', + color: ['rgb(244,211,94)', 'rgb(249,87,56)', 'rgb(91,192,235)', 'rgb(155,197,61)'], + area: { + style: { + curveType: 'monotone', + fillOpacity: 0.6 + } + } + } + } + }, + { + id: 'legend-1-circle', + type: 'Shape', + zIndex: 0, + position: { + x: 200, + y: 640, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: 'circle', + fill: 'rgb(244,211,94)' + } + } + }, + { + id: 'legend-1-text', + type: 'Text', + zIndex: 0, + position: { + x: 233, + y: 643, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'Organic search', + textAlign: 'left', + fontSize: 24, + fontWeight: 'bold', + fill: '#FFF' + } + } + }, + { + id: 'legend-2-circle', + type: 'Shape', + zIndex: 0, + position: { + x: 450, + y: 640, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: 'circle', + fill: 'rgb(249,87,56)' + } + } + }, + { + id: 'legend-2-text', + type: 'Text', + zIndex: 0, + position: { + x: 483, + y: 640, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'Referral links', + textAlign: 'left', + fontSize: 24, + fontWeight: 'bold', + fill: '#FFF' + } + } + }, + { + id: 'legend-3-circle', + type: 'Shape', + zIndex: 0, + position: { + x: 690, + y: 640, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: 'circle', + fill: 'rgb(91,192,235)' + } + } + }, + { + id: 'legend-3-text', + type: 'Text', + zIndex: 0, + position: { + x: 723, + y: 640, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'Paid ads', + textAlign: 'left', + fontSize: 24, + fontWeight: 'bold', + fill: '#FFF' + } + } + }, + { + id: 'legend-4-circle', + type: 'Shape', + zIndex: 0, + position: { + x: 900, + y: 640, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: 'circle', + fill: 'rgb(155,197,61)' + } + } + }, + { + id: 'legend-4-text', + type: 'Text', + zIndex: 0, + position: { + x: 933, + y: 640, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'Social media', + textAlign: 'left', + fontSize: 24, + fontWeight: 'bold', + fill: '#FFF' + } + } + } + ] +}; +const story = new VStory.Story(dsl, { + dom: CONTAINER_ID, + width: 1280, height: 720 +}); +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..c07022d8 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": "marking-wordcloud", + "title": { + "zh": "信息图模板-词云图: Marketing关键词", + "en": "Word Cloud Infographic: Marketing Keywords" + } + }, + { + "path": "source-of-new-contacts-area-chart", + "title": { + "zh": "信息图模板-面积图: Source of New Contacts", + "en": "Area Chart Infographic: Source of New Contacts" + } } ] } diff --git a/docs/assets/examples/zh/infographic/marking-wordcloud.md b/docs/assets/examples/zh/infographic/marking-wordcloud.md new file mode 100644 index 00000000..64bcc3cb --- /dev/null +++ b/docs/assets/examples/zh/infographic/marking-wordcloud.md @@ -0,0 +1,371 @@ +--- +category: examples +group: infographic +title: Marketing Wordcloud +keywords: templates, visualization, wordcloud +order: 1-0 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/wordcloud-marketing.png +--- + +# 信息图模板-词云图 + +## 代码演示 + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); +const chartPath = + 'M948.6 627c1.2-2 2.6-4 3.8-5.8 8-12.4 15.2-25.4 21.4-39 6.2-13.6 11.4-27.4 15.6-41.8 4.2-14.4 7.4-28.8 9.6-43.6 2.2-14.8 3.2-29.6 3.2-44.6 0.6-172.6-140.2-312.6-314.2-312.6-151.8 0-278.4 106.8-308.2 248.8-4.4 21-6.8 42.4-6.8 64 0 172.8 135.4 316.6 309.4 316.6 27.6 0 65-8.6 85.4-14.4 20.4-5.8 40.8-13.4 46-15.6 5.2-2 13.4-4.2 20-2.2l130 39c1.2 0.4 2.4 0.4 3.6 0 1.2-0.4 2.2-0.8 3-1.8 0.8-0.8 1.4-2 1.8-3.2 0.4-1.2 0.4-2.4 0-3.6L942.6 650c-2-8.8-2.4-10.4 6-23zM721 806c-13 2.2-26 3.4-39 3.6-71.2 0-138.6-19.4-193.2-56-17.4-11-33.8-23.8-48.8-38.2-15-14.4-28.6-30.2-40.4-47.4-43.8-60-67.8-136.4-67.8-216.4 0-5.4 0.2-10.6 0.4-16 0-0.8 0-1.6-0.2-2.2-0.2-0.8-0.4-1.4-0.8-2.2-0.4-0.6-0.8-1.2-1.4-1.8l-1.8-1.2c-0.6-0.2-1.4-0.4-2.2-0.6-0.8 0-1.4 0-2.2 0.2-0.8 0.2-1.4 0.4-2 0.8-0.6 0.4-1.2 0.8-1.8 1.4-2.4 2.8-5 5.6-7.4 8.6-2.4 3-4.6 5.8-7 9-2.2 3-4.4 6-6.6 9.2-2.2 3.2-4.2 6.2-6.2 9.4s-4 6.4-5.8 9.8c-1.8 3.2-3.6 6.6-5.4 10-1.8 3.4-3.4 6.8-5 10.2-1.6 3.4-3.2 7-4.6 10.4-1.4 3.6-2.8 7-4.2 10.6-1.4 3.6-2.6 7.2-3.8 10.8-1.2 3.6-2.2 7.2-3.4 11-1 3.6-2 7.4-2.8 11-0.8 3.8-1.6 7.4-2.4 11.2-0.8 3.8-1.4 7.6-2 11.2-0.6 3.8-1 7.6-1.6 11.4-0.4 3.8-0.8 7.6-1 11.4l-0.6 11.4c-0.2 3.8-0.2 7.6-0.2 11.4 0 3.8 0.2 7.6 0.4 11.4 0.2 3.8 0.4 7.6 0.8 11.4l1.2 11.4c0.4 3.8 1 7.6 1.6 11.4 0.6 3.8 1.4 7.6 2.2 11.2 0.8 3.8 1.6 7.4 2.6 11.2 1 3.6 2 7.4 3 11 1 3.6 2.2 7.2 3.4 10.8 1.2 3.6 2.6 7.2 4 10.8 1.4 3.6 2.8 7 4.4 10.6 1.6 3.4 3 7 4.8 10.4 1.6 3.4 3.4 6.8 5.2 10.2 1.8 3.4 3.6 6.6 5.6 10l6 9.6c4.2 6.6 6.6 11.6 5.8 15L277.2 910c0 0.2 0 0.6-0.2 0.8v1c0 0.4 0 0.6 0.2 0.8 0 0.2 0.2 0.6 0.2 0.8 0 0.2 0.2 0.6 0.4 0.8 0.2 0.2 0.2 0.6 0.4 0.8 0.2 0.2 0.4 0.4 0.6 0.8l0.6 0.6 0.6 0.6c0.2 0.2 0.4 0.4 0.8 0.4 0.2 0.2 0.6 0.2 0.8 0.4 0.2 0 0.6 0.2 0.8 0.2 0.2 0 0.6 0 0.8 0.2h0.8c0.2 0 0.6 0 0.8-0.2 0.2 0 0.6-0.2 0.8-0.2l114.2-42.2c3.4-1.4 7.2-2.2 10.8-2 3.8 0 7.4 0.8 10.8 2.4 34.2 14 72 22.4 109.8 22.4 9 0 18-0.4 27-1.2 9-0.8 17.8-2.2 26.6-3.8 8.8-1.8 17.6-3.8 26.2-6.4 8.6-2.6 17.2-5.6 25.6-9a274.252 274.252 0 0 0 48-25.2c7.6-5 15-10.4 22-16 7.2-5.8 14-11.8 20.4-18.2 0.6-0.6 1-1.2 1.4-1.8 0.4-0.8 0.6-1.4 0.8-2.2 0.2-0.8 0.2-1.6 0-2.4-0.2-0.8-0.4-1.6-0.6-2.2-0.4-0.8-0.8-1.4-1.4-2-0.6-0.6-1.2-1-1.8-1.4-0.6-0.4-1.4-0.6-2.2-0.8-0.8 0.2-1.4 0.2-2.2 0.2z'; + +const dsl = { + acts: [ + { + id: 'defaultAct', + scenes: [ + { + id: 'defaultScene', + actions: [ + { + characterId: [ + 'background-1', + 'background-2', + 'title', + 'chart', + 'list-1-icon', + 'list-1-text', + 'list-2-icon', + 'list-2-text', + 'list-3-icon', + 'list-3-text', + 'list-4-icon', + 'list-4-text' + ], + characterActions: [ + { + action: 'appear' + } + ] + } + ] + } + ] + } + ], + characters: [ + { + id: 'background-1', + type: 'Rect', + zIndex: 0, + position: { + x: -150, + y: 610, + width: 400, + height: 400, + + angle: Math.PI / 4 - 0.2 + }, + options: { + graphic: { + fill: 'rgb(242,242,242)' + } + } + }, + { + id: 'background-2', + type: 'Rect', + zIndex: 0, + position: { + x: -150, + y: 600, + width: 300, + height: 300, + angle: Math.PI / 4 + }, + options: { + graphic: { + fill: 'rgb(217,217,217)' + } + } + }, + { + id: 'title', + type: 'Text', + zIndex: 0, + position: { + x: 420, + y: 50, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'Marketing Wordcloud', + textAlign: 'left', + fontSize: 40, + fontWeight: 'bold', + fill: '#000' + } + } + }, + { + id: 'chart', + type: 'VChart', + zIndex: 0, + position: { + x: 120, + y: 140, + width: 600, + height: 450 + }, + options: { + spec: { + type: 'wordCloud', + maskShape: + '', + nameField: 'name', + valueField: 'value', + seriesField: 'name', + seriesStyle: [ + { + name: 'MARKETING', + word: { + style: { + fill: 'rgb(51,133,105)' + } + } + } + ], + colorList: ['#000'], + wordCloudShapeConfig: { + fillingColorList: ['#000'] + }, + data: [ + { + name: 'data', + values: [ + { name: 'MARKETING', value: 1000 }, + { name: 'SALES', value: 500 }, + { name: 'INTERNET', value: 500 }, + { name: 'ACCOUNT', value: 500 }, + { name: 'DEVELOP', value: 200 }, + { name: 'ORGANIZATION', value: 200 }, + { name: 'CUSTOMERS', value: 200 }, + { name: 'BUDGET', value: 200 }, + { name: 'RESEARCH', value: 100 }, + { name: 'SOCIAL', value: 10 }, + { name: 'AGGRESSIVE', value: 10 }, + { name: 'PLANNING', value: 10 }, + { name: 'MEDIA', value: 10 }, + { name: 'TARGET', value: 10 }, + { name: 'ADVANCE', value: 10 }, + { name: 'INNOVATE', value: 10 }, + { name: 'IDEA', value: 10 }, + { name: 'TEAM', value: 10 }, + { name: 'PROMOTION', value: 10 }, + { name: 'ACCOMPLISHMENT', value: 10 }, + { name: 'BELIEF', value: 10 }, + { name: 'NEWS', value: 10 }, + { name: 'SUCCESS', value: 10 }, + { name: 'GROWING', value: 10 }, + { name: 'SEGMENT', value: 10 }, + { name: 'DIVISION', value: 10 }, + { name: 'STRATEGY', value: 10 }, + { name: 'REFRESH', value: 10 }, + { name: 'DESIGN', value: 10 }, + { name: 'CONTEST', value: 10 }, + { name: 'ARCHITECTURE', value: 10 }, + { name: 'CREATIVE', value: 10 }, + { name: 'COMPANY', value: 10 }, + { name: 'INQUIRY', value: 10 }, + { name: 'DESTINATION', value: 10 }, + { name: 'MATCH', value: 10 }, + { name: 'ADMIT', value: 10 }, + { name: 'AMOUNT', value: 10 }, + { name: 'FORWARD', value: 10 }, + { name: 'ACCEPT', value: 10 }, + { name: 'COOL', value: 10 }, + { name: 'VIRAL', value: 10 }, + { name: 'MASS', value: 10 }, + { name: 'CONSTRUCTION', value: 10 }, + { name: 'INNOVATION', value: 10 } + ] + } + ], + color: { + type: 'ordinal', + // domain: ['a', 'b'], + // range: ['#000', '#000'], + specified: { + MARKETING: 'green', + d: 'red' + } + } + } + } + }, + { + id: 'list-1-icon', + type: 'Shape', + zIndex: 0, + position: { + x: 700, + y: 155, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: chartPath, + fill: '#ddd' + } + } + }, + { + id: 'list-1-text', + type: 'Text', + zIndex: 0, + position: { + x: 780, + y: 163, + width: 450, + height: 200 + }, + options: { + graphic: { + text: 'MARKETING strategies require continuous INNOVATION and CREATIVE approaches to effectively engage CUSTOMERS.', + textAlign: 'left', + fontSize: 18, + fontWeight: 'bold', + fill: '#aaa', + wordBreak: 'break-word' + } + } + }, + { + id: 'list-2-icon', + type: 'Shape', + zIndex: 0, + position: { + x: 700, + y: 255, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: chartPath, + fill: '#ddd' + } + } + }, + { + id: 'list-2-text', + type: 'Text', + zIndex: 0, + position: { + x: 780, + y: 260, + width: 450, + height: 200 + }, + options: { + graphic: { + text: 'Successful SALES not only depend on the BUDGET but also on thorough RESEARCH and market INQUIRY.', + textAlign: 'left', + fontSize: 18, + fontWeight: 'bold', + fill: '#aaa', + wordBreak: 'break-word' + } + } + }, + { + id: 'list-3-icon', + type: 'Shape', + zIndex: 0, + position: { + x: 700, + y: 355, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: chartPath, + fill: '#ddd' + } + } + }, + { + id: 'list-3-text', + type: 'Text', + zIndex: 0, + position: { + x: 780, + y: 360, + width: 450, + height: 200 + }, + options: { + graphic: { + text: 'In the INTERNET age, SOCIAL media plays a crucial role in PROMOTION and reaching the TARGET audience.', + textAlign: 'left', + fontSize: 18, + fontWeight: 'bold', + fill: '#aaa', + wordBreak: 'break-word' + } + } + }, + { + id: 'list-4-icon', + type: 'Shape', + zIndex: 0, + position: { + x: 700, + y: 455, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: chartPath, + fill: '#ddd' + } + } + }, + { + id: 'list-4-text', + type: 'Text', + zIndex: 0, + position: { + x: 780, + y: 460, + width: 450, + height: 200 + }, + options: { + graphic: { + text: 'A strong ORGANIZATION focuses on PLANNING and DEVELOP to achieve SUCCESS and ACCOMPLISHMENT in their goals.', + textAlign: 'left', + fontSize: 18, + fontWeight: 'bold', + fill: '#aaa', + wordBreak: 'break-word' + } + } + } + ] +}; +const story = new VStory.Story(dsl, { + dom: CONTAINER_ID, + width: 1280, height: 720 +}); +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/source-of-new-contacts-area-chart.md b/docs/assets/examples/zh/infographic/source-of-new-contacts-area-chart.md new file mode 100644 index 00000000..89b1046b --- /dev/null +++ b/docs/assets/examples/zh/infographic/source-of-new-contacts-area-chart.md @@ -0,0 +1,373 @@ +--- +category: examples +group: infographic +title: Source of New Contacts Area Chart +keywords: templates, visualization, area-chart +order: 1-0 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/source-of-new-contacts.png +--- + +# 信息图模板-面积图: Source of New Contacts + +## 代码演示 + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); +const dsl = { + acts: [ + { + id: 'defaultAct', + scenes: [ + { + id: 'defaultScene', + actions: [ + { + characterId: [ + 'background-top', + 'background-bottom', + 'title-icon', + 'title-text-1', + 'title-text-2', + 'chart-background', + 'chart', + 'legend-1-circle', + 'legend-1-text', + 'legend-2-circle', + 'legend-2-text', + 'legend-3-circle', + 'legend-3-text', + 'legend-4-circle', + 'legend-4-text' + ], + characterActions: [ + { + action: 'appear' + } + ] + } + ] + } + ] + } + ], + characters: [ + { + id: 'background-top', + type: 'Rect', + zIndex: 0, + position: { + x: 0, + y: 0, + width: 1280, + height: 180 + }, + options: { + graphic: { + fill: 'rgb(251,87,56)' + } + } + }, + { + id: 'background-bottom', + type: 'Rect', + zIndex: 0, + position: { + x: 0, + y: 180, + width: 1280, + height: 540 + }, + options: { + graphic: { + fill: 'rgb(0,41,107)' + } + } + }, + { + id: 'title-icon', + type: 'Image', + zIndex: 0, + position: { + x: 220, + y: 60, + width: 60, + height: 60 + }, + options: { + graphic: { + image: `` + } + } + }, + { + id: 'title-text-1', + type: 'Text', + zIndex: 0, + position: { + x: 290, + y: 50, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'Source of', + textAlign: 'left', + fontSize: 70, + fontWeight: 'bold', + fill: 'white' + } + } + }, + { + id: 'title-text-2', + type: 'Text', + zIndex: 0, + position: { + x: 630, + y: 50, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'New Contacts', + textAlign: 'left', + fontSize: 70, + fontWeight: 'bold', + fill: 'rgb(244,211,94)' + } + } + }, + { + id: 'chart-background', + type: 'Rect', + zIndex: 0, + position: { + x: 200, + y: 140, + width: 900, + height: 450 + }, + options: { + graphic: { + fill: '#FFF', + cornerRadius: 20 + } + } + }, + { + id: 'chart', + type: 'VChart', + zIndex: 0, + position: { + x: 200, + y: 140, + width: 900, + height: 450 + }, + options: { + spec: { + type: 'area', + data: { + values: [ + { type: 'Organic search', year: '2019', value: 14000 }, + { type: 'Organic search', year: '2020', value: 25000 }, + { type: 'Organic search', year: '2021', value: 20000 }, + { type: 'Organic search', year: '2022', value: 23000 }, + { type: 'Organic search', year: '2023', value: 28 }, + { type: 'Referral links', year: '2019', value: 8000 }, + { type: 'Referral links', year: '2020', value: 6500 }, + { type: 'Referral links', year: '2021', value: 12000 }, + { type: 'Referral links', year: '2022', value: 15000 }, + { type: 'Referral links', year: '2023', value: 18 }, + { type: 'Paid ads', year: '2019', value: 24000 }, + { type: 'Paid ads', year: '2020', value: 20000 }, + { type: 'Paid ads', year: '2021', value: 20000 }, + { type: 'Paid ads', year: '2022', value: 15000 }, + { type: 'Paid ads', year: '2023', value: 13 }, + { type: 'Social media', year: '2019', value: 30000 }, + { type: 'Social media', year: '2020', value: 20000 }, + { type: 'Social media', year: '2021', value: 33000 }, + { type: 'Social media', year: '2022', value: 28000 }, + { type: 'Social media', year: '2023', value: 6 } + ] + }, + stack: true, + xField: 'year', + yField: 'value', + seriesField: 'type', + background: '#FFF', + color: ['rgb(244,211,94)', 'rgb(249,87,56)', 'rgb(91,192,235)', 'rgb(155,197,61)'], + area: { + style: { + curveType: 'monotone', + fillOpacity: 0.6 + } + } + } + } + }, + { + id: 'legend-1-circle', + type: 'Shape', + zIndex: 0, + position: { + x: 200, + y: 640, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: 'circle', + fill: 'rgb(244,211,94)' + } + } + }, + { + id: 'legend-1-text', + type: 'Text', + zIndex: 0, + position: { + x: 233, + y: 643, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'Organic search', + textAlign: 'left', + fontSize: 24, + fontWeight: 'bold', + fill: '#FFF' + } + } + }, + { + id: 'legend-2-circle', + type: 'Shape', + zIndex: 0, + position: { + x: 450, + y: 640, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: 'circle', + fill: 'rgb(249,87,56)' + } + } + }, + { + id: 'legend-2-text', + type: 'Text', + zIndex: 0, + position: { + x: 483, + y: 640, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'Referral links', + textAlign: 'left', + fontSize: 24, + fontWeight: 'bold', + fill: '#FFF' + } + } + }, + { + id: 'legend-3-circle', + type: 'Shape', + zIndex: 0, + position: { + x: 690, + y: 640, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: 'circle', + fill: 'rgb(91,192,235)' + } + } + }, + { + id: 'legend-3-text', + type: 'Text', + zIndex: 0, + position: { + x: 723, + y: 640, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'Paid ads', + textAlign: 'left', + fontSize: 24, + fontWeight: 'bold', + fill: '#FFF' + } + } + }, + { + id: 'legend-4-circle', + type: 'Shape', + zIndex: 0, + position: { + x: 900, + y: 640, + width: 30, + height: 30 + }, + options: { + graphic: { + symbolType: 'circle', + fill: 'rgb(155,197,61)' + } + } + }, + { + id: 'legend-4-text', + type: 'Text', + zIndex: 0, + position: { + x: 933, + y: 640, + width: 600, + height: 200 + }, + options: { + graphic: { + text: 'Social media', + textAlign: 'left', + fontSize: 24, + fontWeight: 'bold', + fill: '#FFF' + } + } + } + ] +}; +const story = new VStory.Story(dsl, { + dom: CONTAINER_ID, + width: 1280, height: 720 +}); +const player = new VStory.Player(story); +story.init(player); + +player.play(-1); + +window['story'] = story; +window['vstory'] = story; +```