diff --git a/docs/assets/examples/en/infographic/bar-chart-regional-sales.md b/docs/assets/examples/en/infographic/bar-chart-regional-sales.md new file mode 100644 index 00000000..53e178ee --- /dev/null +++ b/docs/assets/examples/en/infographic/bar-chart-regional-sales.md @@ -0,0 +1,194 @@ +--- +category: examples +group: infographic +title: Regional Sales +keywords: templates, visualization, bar, ranking +order: 1-8 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/regional-sales.png +--- + +# Bar Chart Infographic(Regional Sales) + +## Demo Code + +```javascript livedemo template=vstory +VStory.registerAll(); + +async function loadDSL() { + const barSpec = { + type: 'bar', + color: [ + 'rgba(96, 182, 195)', + 'rgba(112, 151, 169)', + 'rgba(239, 149, 77)', + 'rgba(239, 174, 117)', + 'rgba(182, 78, 67)' + ], + padding: { + left: 20, + bottom: 80 + }, + data: [ + { + id: 'id0', + values: [ + { + Region: 'Asia', + Sales: 23000 + }, + { + Region: 'South America', + Sales: 16000 + }, + { + Region: 'Europe', + Sales: 12000 + }, + { + Region: 'North America', + Sales: 8000 + }, + { + Region: 'Africa', + Sales: 7200 + } + ] + } + ], + direction: 'horizontal', + xField: 'Sales', + yField: 'Region', + seriesField: 'Region', + title: { + visible: true, + text: 'Regional Sales', + align: 'center', + textStyle: { + fontSize: 50, + fill: '#fff' + } + }, + axes: [ + { + orient: 'left', + visible: false, + paddingInner: 0.3 + }, + { + orient: 'bottom', + visible: false + } + ], + legends: [ + { + visible: true, + orient: 'top', + item: { + label: { + style: { + fill: '#fff' + } + } + } + } + ], + label: { + visible: true, + position: 'inside', + formatMethod: (text, datum) => { + return `${datum.Sales / 10000}M`; + }, + smartInvert: false, + style: { + fill: '#fff', + fontSize: 20, + lineWidth: 0 + } + }, + background: 'rgba(0,0,0,0.2)' + }; + return { + characters: [ + { + type: 'VChart', + id: 'bar', + zIndex: 10, + position: { + top: 50, + left: 0, + width: 1280, + height: 720 + }, + options: { + spec: barSpec + } + }, + { + id: '0', + 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/singleBar-background.jpg' + } + } + }, + { + id: '1', + type: 'Rect', + zIndex: 1, + position: { + x: 0, + y: 0, + width: 1280, + height: 720 + }, + options: { + graphic: { + fill: 'black', + fillOpacity: 0.7 + } + } + } + ], + acts: [ + { + id: 'default-chapter', + scenes: [ + { + id: 'scene0', + actions: [ + { + characterId: ['bar', '0', '1'], + characterActions: [ + { + action: 'appear' + } + ] + } + ] + } + ] + } + ] + }; +} + +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720 }); +const player = new VStory.Player(story); +story.init(player); + +loadDSL().then(dsl => { + story.load(dsl); + player.play(0); +}); +window['story'] = story; +window['vstory'] = story; +``` diff --git a/docs/assets/examples/en/infographic/pie-chart-transportation.md b/docs/assets/examples/en/infographic/pie-chart-transportation.md new file mode 100644 index 00000000..6d05c78c --- /dev/null +++ b/docs/assets/examples/en/infographic/pie-chart-transportation.md @@ -0,0 +1,246 @@ +--- +category: examples +group: infographic +title: Transportation +keywords: templates, visualization, pie, transportation +order: 1-9 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/transportation.png +--- + +# Pie Chart Infographic(Transportation) + +## Demo Code + +```javascript livedemo template=vstory +VStory.registerAll(); +const iconMap = { + Walk: '', + Car: '', + Bike: '', + Bus: '' +}; +async function loadDSL() { + const pieSpec = { + type: 'pie', + color: [ + 'rgba(109, 182, 214)', + 'rgba(68, 103, 168)', + 'rgba(251, 243, 127)', + 'rgba(239, 174, 117)', + 'rgba(182, 78, 67)' + ], + padding: { + left: 20, + bottom: 80 + }, + data: [ + { + id: 'id0', + values: [ + { + Category: 'Bike', + Value: 38 + }, + { + Category: 'Walk', + Value: 32 + }, + { + Category: 'Car', + Value: 18 + }, + { + Category: 'Bus', + Value: 12 + } + ] + } + ], + valueField: 'Value', + categoryField: 'Category', + background: 'rgba(0,0,0,0.2)', + extensionMark: [ + { + name: 'marker', + type: 'symbol', + dataId: 'id0', + style: { + interactive: false, + symbolType: (...params) => { + return iconMap[params[0]['Category']]; + }, + fill: (...params) => { + if (params[0]['Category'] === 'Car') { + return 'rgb(22, 54, 129)'; + } + return 'white'; + }, + stroke: 'white', + visible: true, + x: (...params) => { + const radius = params[1].getLayoutRadius() / 4; + const posX = + Math.cos((params[1].startAngleScale(params[0]) + params[1].endAngleScale(params[0])) / 2) * radius; + const offsetX = 280; + return posX + offsetX; + }, + y: (...params) => { + const radius = params[1].getLayoutRadius() / 4; + const posY = + Math.sin((params[1].startAngleScale(params[0]) + params[1].endAngleScale(params[0])) / 2) * radius; + const offsetY = 280; + return posY + offsetY; + }, + size: 60 + } + } + ] + }; + return { + characters: [ + { + type: 'VChart', + id: 'bar', + zIndex: 10, + position: { + top: 50, + left: 640, + width: 640, + height: 720 + }, + options: { + spec: pieSpec + } + }, + { + id: '0', + 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/singlePie2-background.jpg' + } + } + }, + { + id: '1', + type: 'Rect', + zIndex: 1, + position: { + x: 0, + y: 0, + width: 1280, + height: 720 + }, + options: { + graphic: { + fill: 'rgba(213, 103, 100)', + fillOpacity: 0.9 + } + } + }, + { + id: '2', + type: 'Text', + zIndex: 10, + position: { + x: 80, + y: 200, + width: 640, + height: 720 + }, + options: { + graphic: { + text: 'Types of Transportation', + textAlign: 'left', + fontSize: 50, + fill: '#fff', + textBaseline: 'middle', + fontWeight: 'bold' + } + } + }, + { + id: '3', + type: 'Text', + zIndex: 10, + position: { + x: 80, + y: 380, + width: 640, + height: 720 + }, + options: { + graphic: { + text: 'Types of Transportation', + textAlign: 'left', + fontSize: 36, + fill: '#fff', + textBaseline: 'middle', + fontWeight: 'bold' + } + } + }, + { + id: '4', + type: 'Text', + zIndex: 10, + position: { + x: 80, + y: 500, + width: 640, + height: 720 + }, + options: { + graphic: { + text: 'PIE CHART', + textAlign: 'left', + fontSize: 36, + fill: '#fff', + textBaseline: 'middle', + fontWeight: 100 + } + } + } + ], + acts: [ + { + id: 'default-chapter', + scenes: [ + { + id: 'scene0', + actions: [ + { + characterId: ['bar', '0', '1', '2', '3', '4'], + characterActions: [ + { + action: 'appear' + } + ] + } + ] + } + ] + } + ] + }; +} + +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720 }); +const player = new VStory.Player(story); +story.init(player); + +loadDSL().then(dsl => { + story.load(dsl); + player.play(0); +}); +window['story'] = story; +window['vstory'] = story; +``` diff --git a/docs/assets/examples/menu.json b/docs/assets/examples/menu.json index 9a56a681..9ad7decf 100644 --- a/docs/assets/examples/menu.json +++ b/docs/assets/examples/menu.json @@ -256,6 +256,20 @@ "en": "Bar Chart Infographic: HIV Treatment Access" } }, + { + "path": "bar-chart-regional-sales", + "title": { + "zh": "信息图模板-条形图: Regional Sales", + "en": "Bar Chart Infographic: Regional Sales" + } + }, + { + "path": "pie-chart-transportation", + "title": { + "zh": "信息图模板-饼图: Transportation", + "en": "Pie Chart Infographic: Transportation" + } + }, { "path": "bar-work-in-same-industry", "title": { diff --git a/docs/assets/examples/zh/infographic/bar-chart-regional-sales.md b/docs/assets/examples/zh/infographic/bar-chart-regional-sales.md new file mode 100644 index 00000000..3f69bff5 --- /dev/null +++ b/docs/assets/examples/zh/infographic/bar-chart-regional-sales.md @@ -0,0 +1,195 @@ +--- +category: examples +group: infographic +title: Regional Sales +keywords: templates, visualization, bar, ranking +order: 1-8 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/regional-sales.png +--- + +# 地区销售额-条形图 + +## 代码演示 + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); + +async function loadDSL() { + const barSpec = { + type: 'bar', + color: [ + 'rgba(96, 182, 195)', + 'rgba(112, 151, 169)', + 'rgba(239, 149, 77)', + 'rgba(239, 174, 117)', + 'rgba(182, 78, 67)' + ], + padding: { + left: 20, + bottom: 80 + }, + data: [ + { + id: 'id0', + values: [ + { + Region: 'Asia', + Sales: 23000 + }, + { + Region: 'South America', + Sales: 16000 + }, + { + Region: 'Europe', + Sales: 12000 + }, + { + Region: 'North America', + Sales: 8000 + }, + { + Region: 'Africa', + Sales: 7200 + } + ] + } + ], + direction: 'horizontal', + xField: 'Sales', + yField: 'Region', + seriesField: 'Region', + title: { + visible: true, + text: 'Regional Sales', + align: 'center', + textStyle: { + fontSize: 50, + fill: '#fff' + } + }, + axes: [ + { + orient: 'left', + visible: false, + paddingInner: 0.3 + }, + { + orient: 'bottom', + visible: false + } + ], + legends: [ + { + visible: true, + orient: 'top', + item: { + label: { + style: { + fill: '#fff' + } + } + } + } + ], + label: { + visible: true, + position: 'inside', + formatMethod: (text, datum) => { + return `${datum.Sales / 10000}M`; + }, + smartInvert: false, + style: { + fill: '#fff', + fontSize: 20, + lineWidth: 0 + } + }, + background: 'rgba(0,0,0,0.2)' + }; + return { + characters: [ + { + type: 'VChart', + id: 'bar', + zIndex: 10, + position: { + top: 50, + left: 0, + width: 1280, + height: 720 + }, + options: { + spec: barSpec + } + }, + { + id: '0', + 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/singleBar-background.jpg' + } + } + }, + { + id: '1', + type: 'Rect', + zIndex: 1, + position: { + x: 0, + y: 0, + width: 1280, + height: 720 + }, + options: { + graphic: { + fill: 'black', + fillOpacity: 0.7 + } + } + } + ], + acts: [ + { + id: 'default-chapter', + scenes: [ + { + id: 'scene0', + actions: [ + { + characterId: ['bar', '0', '1'], + characterActions: [ + { + action: 'appear' + } + ] + } + ] + } + ] + } + ] + }; +} + +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720 }); +const player = new VStory.Player(story); +story.init(player); + +loadDSL().then(dsl => { + story.load(dsl); + player.play(0); +}); +window['story'] = story; +window['vstory'] = story; +``` diff --git a/docs/assets/examples/zh/infographic/pie-chart-transportation.md b/docs/assets/examples/zh/infographic/pie-chart-transportation.md new file mode 100644 index 00000000..d88b8d6b --- /dev/null +++ b/docs/assets/examples/zh/infographic/pie-chart-transportation.md @@ -0,0 +1,247 @@ +--- +category: examples +group: infographic +title: Transportation +keywords: templates, visualization, pie, transportation +order: 1-9 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/transportation.png +--- + +# 交通方式统计-饼图 + +## 代码演示 + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); +const iconMap = { + Walk: '', + Car: '', + Bike: '', + Bus: '' +}; +async function loadDSL() { + const pieSpec = { + type: 'pie', + color: [ + 'rgba(109, 182, 214)', + 'rgba(68, 103, 168)', + 'rgba(251, 243, 127)', + 'rgba(239, 174, 117)', + 'rgba(182, 78, 67)' + ], + padding: { + left: 20, + bottom: 80 + }, + data: [ + { + id: 'id0', + values: [ + { + Category: 'Bike', + Value: 38 + }, + { + Category: 'Walk', + Value: 32 + }, + { + Category: 'Car', + Value: 18 + }, + { + Category: 'Bus', + Value: 12 + } + ] + } + ], + valueField: 'Value', + categoryField: 'Category', + background: 'rgba(0,0,0,0.2)', + extensionMark: [ + { + name: 'marker', + type: 'symbol', + dataId: 'id0', + style: { + interactive: false, + symbolType: (...params) => { + return iconMap[params[0]['Category']]; + }, + fill: (...params) => { + if (params[0]['Category'] === 'Car') { + return 'rgb(22, 54, 129)'; + } + return 'white'; + }, + stroke: 'white', + visible: true, + x: (...params) => { + const radius = params[1].getLayoutRadius() / 4; + const posX = + Math.cos((params[1].startAngleScale(params[0]) + params[1].endAngleScale(params[0])) / 2) * radius; + const offsetX = 280; + return posX + offsetX; + }, + y: (...params) => { + const radius = params[1].getLayoutRadius() / 4; + const posY = + Math.sin((params[1].startAngleScale(params[0]) + params[1].endAngleScale(params[0])) / 2) * radius; + const offsetY = 280; + return posY + offsetY; + }, + size: 60 + } + } + ] + }; + return { + characters: [ + { + type: 'VChart', + id: 'bar', + zIndex: 10, + position: { + top: 50, + left: 640, + width: 640, + height: 720 + }, + options: { + spec: pieSpec + } + }, + { + id: '0', + 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/singlePie2-background.jpg' + } + } + }, + { + id: '1', + type: 'Rect', + zIndex: 1, + position: { + x: 0, + y: 0, + width: 1280, + height: 720 + }, + options: { + graphic: { + fill: 'rgba(213, 103, 100)', + fillOpacity: 0.9 + } + } + }, + { + id: '2', + type: 'Text', + zIndex: 10, + position: { + x: 80, + y: 200, + width: 640, + height: 720 + }, + options: { + graphic: { + text: 'Types of Transportation', + textAlign: 'left', + fontSize: 50, + fill: '#fff', + textBaseline: 'middle', + fontWeight: 'bold' + } + } + }, + { + id: '3', + type: 'Text', + zIndex: 10, + position: { + x: 80, + y: 380, + width: 640, + height: 720 + }, + options: { + graphic: { + text: 'Types of Transportation', + textAlign: 'left', + fontSize: 36, + fill: '#fff', + textBaseline: 'middle', + fontWeight: 'bold' + } + } + }, + { + id: '4', + type: 'Text', + zIndex: 10, + position: { + x: 80, + y: 500, + width: 640, + height: 720 + }, + options: { + graphic: { + text: 'PIE CHART', + textAlign: 'left', + fontSize: 36, + fill: '#fff', + textBaseline: 'middle', + fontWeight: 100 + } + } + } + ], + acts: [ + { + id: 'default-chapter', + scenes: [ + { + id: 'scene0', + actions: [ + { + characterId: ['bar', '0', '1', '2', '3', '4'], + characterActions: [ + { + action: 'appear' + } + ] + } + ] + } + ] + } + ] + }; +} + +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720 }); +const player = new VStory.Player(story); +story.init(player); + +loadDSL().then(dsl => { + story.load(dsl); + player.play(0); +}); +window['story'] = story; +window['vstory'] = story; +```