动态信息图是一种强大的可视化表达方式,它能够将复杂的数据和信息转化为直观、生动的图形化展示。通过动态信息图,我们可以:
- 更好地讲述数据故事,让枯燥的数据变得生动有趣
- 提升信息传递效率,帮助受众快速理解核心信息
- 增强表现力和互动性,提供沉浸式的用户体验
- 实现数据的实时更新和动态展示
本文将详细介绍如何使用 VStory 制作一个动态信息图,帮助大家快速上手这个强大的工具。
了解VStory
可以先前往 VStory 官网了解一下 VStory ，对其中的基本概念有所了解 https://www.visactor.com/vstory/guide/tutorial\_docs/Getting\_Started
Clone 仓库与本地环境
**首先，全局安装 ** @microsoft/rush ：
npm i --global @microsoft/rush
然后将代码克隆到本地机器：
git
clone
[git@github.com](mailto:git@github.com):VisActor/VStory.git
cd
VStory
也可以选择 Github Desktop
安装依赖
// 注意，在项目根目录执行
rush update
开始 vstory 的本地开发
rush story
成功后使用浏览器打开 http://localhost:6789/ 可以看到如下画面
可以进入 infographic 下查看已经制作完成的信息图
确定做什么
可以根据自己感兴趣的领域或者当前的新闻时事选材。信息图是通过含数据的多种可视化内容来进行数据故事讲述的图表。
这里我准备通过图表介绍deepseek发布开源模型后对Ai市场的冲击。并介绍为什么会产生这样的影响。
收集数据
根据目的，我需要收集相关数据：在deepseek发布开源模型后，美股发生了什么变化。
询问 AI 得到相关信息：
- DeepSeek于 2025年1月20日 正式发布了其最新开源模型 DeepSeek R1 。该模型以极低的训练成本（仅约600万美元）实现了与OpenAI o1模型相媲美的性能，并在全球范围内引发轰动
- 开源模型发布后逐渐火爆，一周后的 1月27日 （美国当地时间）美股科技板块因DeepSeek的冲击全面暴跌，英伟达股价单日下跌近17%，创下美股历史最大单日市值跌幅纪录，微软、AMD等公司股价也大幅受挫
从财经网站收集1月27日相关的准确数据
| 公司名称 | 股票代码 | 24日收盘价 | 27日收盘价 | | --- | --- | --- | --- | | 英伟达 | NVDA | 142.62 | 118.42 | | 博通 | AVGO | 244.70 | 202.13 | | AMD | AMD | 122.84 | 115.01 |
准备图形内容
数据展示
我这里选择使用图表展示这些数据，询问AI，用什么图表类型可以更好的展示。得到下面的推荐
现在我去 VChart官网 ，通过 VChart 绘制这个图表，不需要下载vchart，可以直接在官网提供的在线编辑能力上调试。
先找到 并列 柱状图的例子（发现在vchart中叫分组柱状图）
然后调整图表的展示效果
- 修改图表的数据为我想要展示的数据
- 缩小数据范围令数据变化幅度更清晰
- 去掉数值轴，单股价格对跌幅比例而言没有太大意义
- 添加标注，每支股票的跌幅都标记出来
最终图表效果如下。记录下这个配置 spec 。
3.2 标题与内容介绍
通过 ai 生成符合我想法的标题与文本
**中文标题：**
《DeepSeek重锤AI芯片股：两大巨头单日市值蒸发超17%》
（副标题：从24日到27日，看算法革命如何击穿硬件护城河）
**英文标题：**
DeepSeek
's Shockwaves: AI Giants Lose $170B in 72 Hours
(Subtitle: When Algorithms Crack the Silicon Fortress)
**分析文本（中文）：**
DeepSeek的技术突破正在改写市场对算力价值的评估体系。三家核心算力供应商的同步暴跌（英伟达-17%/博通-17.4%/AMD-6.4%）揭示了一个残酷现实：AI大模型的效率跃升可能使传统GPU堆叠路线沦为"算力泡沫"。尤其值得警惕的是，英伟达作为万亿市值龙头的断崖式下跌，实际上反映了资本对"算法优化替代硬件升级"技术路径的投票——当训练效率不再依赖芯片数量，整个AI基础设施的投资逻辑正在被颠覆。
**Analysis Text (English):**
DeepSeek'
s breakthrough exposes a seismic
shift
in
computing economics. The synchronized collapse of chip leaders signals that AI
's next phase may bypass brute-force hardware scaling. NVIDIA'
s historic plunge—its worst performance since the crypto-mining crash—mirrors Wall Street
's awakening: when algorithms can achieve 10x training efficiency, the $3 trillion semiconductor industry must reinvent its value proposition. This isn'
t a correction, but a Copernican revolution
in
AI infrastructure.
3.4 再来一个背景图
通过 ai 创建一个与内容相关的背景图
设计内容布局与展示效果
让 AI 给出一个基础的布局建议
总结布局效果
- 顶部一个大的标题
- 副标题在图表正上方
- 描述在图表右侧。
考虑到没有更多内容，图表的尺寸和文本内容的大小需要注意，不要给底部过多空白。
开始制作
第一步，新建demo
在项目的这个目录下新建一个你自己的 demo 文件。
packages/vstory/demo/src/demos/infographic
比如这是我新建的文件
然后可以先复制一份其他的信息图内容到你的文件里，删除dsl的内容，它大概长这样
import React, { useEffect } from
'react'
;
import { IStoryDSL, Player, Story } from
'../../../../../vstory-core/src'
;
import { registerAll } from
'../../../../src'
;
registerAll();
export
const DeepseekShockwave = () => {
const id =
'DeepseekShockwave'
;
useEffect(() => {
const container = document.getElementById(id);
const canvas = document.createElement(
'canvas'
);
canvas.width = 1024;
canvas.height = 1024;
container?.appendChild(canvas);
const dsl: IStoryDSL = {
acts: [],
characters: []
};
const story = new Story(dsl, {
canvas,
width: 1024, // 我准备做一个 1024 X 700 的长方形信息图
height: 700,
scaleX:
'auto'
,
scaleY:
'auto'
});
const player = new Player(story);
story.init(player);
player.play(-1);
return
() => {
story.release();
};
}, []);
return
<div style={{ width:
'100%'
, height:
'100%'
}} id={id}></div>;
};
添加你的demo到app目录。 app.tsx 在如下位置
然后在 menus 的 Infographic 下添加你的内容，注意先在 app.tsx 里导入你的组件
import { DeepseekShockwave } from
'./demos/infographic/deepseek-shockwave'
;
我添加的内容如下
好了，现在你可以在启动调试后的右侧菜单中看到你的 demo 了
添加元素
我们先将需要展示的元素都添加上，随便给它们一个位置。元素添加在character上
背景
首先添加图片资源
注意规则：图片资源必须放到下面这个目录
packages/vstory/demo/src/assest/infographic/
${yourDemoName}
然后添加一个图片类型的元素
// 引入图片元素
import
bg
from
'../../assets/infographic/deepseek-shockwave/bg.png'
;
characters: [
{
id:
'background'
, // 元素 id 后面会用到
type
:
'Image'
, // 类型
zIndex: 0, // 层级
position: { // 元素的位置大小
x: 0,
y: 0,
width: 1024,
height: 700
},
options: {
graphic: {
image:
bg
,
fillOpacity: 0.4 // 透明度
}
}
},
]
图表
// 引入图片元素
import
bg
from
'../../assets/infographic/deepseek-shockwave/bg.png'
;
characters: [
// ... others
{
id:
'chart'
,
type
:
'VChart'
,
zIndex: 1,
position: { //先随便给一位置吧
x: 50,
y: 50,
width: 400, // 注意要给宽高
height: 400
},
options: {
spec: spec // 之前内容准备时的图表配置
}
}
]
文本
// 引入图片元素
import
bg
from
'../../assets/infographic/deepseek-shockwave/bg.png'
;
characters: [
// ... others
{
id:
'title'
,
type
:
'Text'
,
zIndex: 1,
position: { x: 512, y: 0, width: 1024, height: 100 },
options: {
graphic: {
text: `DeepSeek
's shockwave: AI'
s technological revolution`,
fill:
'black'
,
fontSize: 48,
textAlign:
'center'
,
fontWeight:
'bolder'
}
}
},
]
全部元素添加完之后。
给它们配置一个展示动作。（动画我们最后再配置）
const dsl: IStoryDSL = {
acts: [
{
id:
'defaultAct'
,
scenes: [
{
id:
'defaultScene'
,
actions: [
{
// 给所有元素都先给一展示动作，不设置具体动画属性的话，它们会直接展示
characterId: [
'background'
,
'title'
,
'subTitle'
,
'desc1'
,
'desc2'
,
'chart'
],
characterActions: [
{
action:
'appear'
}
]
}
]
}
}
]
...character
}
你应该可以看到一个凌乱的信息图
布局与微调
现在我们需要调整元素到它对应的位置，调整属性让它看起来协调一些
- 可以通过 character 的 position 属性来调整元素位置与大小
- 文本的 text 属性可以数组，这样你可以通过下面的形式进行手动换行
text: [`When Algorithms Crack`,
'\n'
, `the Silicon Fortress`],
简单的调整位置，文本颜色与大小之后现在这个信息图已经快要完成了
艺术再加工
这一部分仁者见仁智者见智，比如可以添加图形，水印，给文字添加背景等等。
添加动画
刚刚我们在添加元素时，在action里添加了一个统一的
appear
动作。现在我们给元素单独配置不同的动画效果
以右侧文本为例：
const dsl: IStoryDSL = {
acts: [
{
id:
'defaultAct'
,
scenes: [
{
id:
'defaultScene'
,
actions: [
{
characterId: [
'desc1'
],
characterActions: [
{
action:
'appear'
,
startTime: 1000, // 开始动画的时间
payload: [
{
animation: {
duration: 800, // 持续时间
easing:
'linear'
, // 差值方法
effect:
'wipe'
// 效果
}
}
]
}
]
}
// ... other actions
]
}
}
]
}
// ... characters
具体动画配置文档在这里 https://www.visactor.com/vstory/guide/tutorial\_docs/VStory\_Concepts/action
最终效果
- 从 develop 拉新分支，提交 pr 的 target 也是 develop。
- 提交pr时，选择 demo update 并邀请 Reviewers ： xuefei1313 or neuqzxy or xiaoluoHe
如何提交pr ：https://link.juejin.cn/?target=https%3A%2F%2Fwww.visactor.io%2Fvstory%2Fcontributing%2F
-
VisActor Github： https://github.com/VisActor（欢迎star）
-
VStory Github： https://github.com/VisActor/VStory（欢迎star）
-
VisActor 飞书交流群： https://applink.larkoffice.com/client/chat/chatter/add\_by\_link?link\_token=43bu05e4-4cf6-41f0-82de-f20d83c2535e
Discord： discord.gg/3wPyxVyH6m
微信公众号：
Twiter： twitter.com/xuanhun1