【实战】10分钟完成一个动态信息图

背景

动态信息图是一种强大的可视化表达方式,它能够将复杂的数据和信息转化为直观、生动的图形化展示。通过动态信息图,我们可以:

更好地讲述数据故事,让枯燥的数据变得生动有趣
提升信息传递效率,帮助受众快速理解核心信息
增强表现力和互动性,提供沉浸式的用户体验
实现数据的实时更新和动态展示

本文将详细介绍如何使用 VStory 制作一个动态信息图,帮助大家快速上手这个强大的工具。

准备工作

了解VStory

可以先前往 VStory 官网了解一下 VStory ，对其中的基本概念有所了解www.visactor.com/vstory/guid...

Clone 仓库与本地环境

首先，全局安装 @microsoft/rush：

css 复制代码

npm i --global @microsoft/rush

然后将代码克隆到本地机器：

less 复制代码

git clone [git@github.com](mailto:git@github.com):VisActor/VStory.git
cd VStory

也可以选择Github Desktop

安装依赖

arduino 复制代码

// 注意，在项目根目录执行
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 生成符合我想法的标题与文本

vbnet 复制代码

**中文标题：**

《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 文件。

bash 复制代码

packages/vstory/demo/src/demos/infographic

比如这是我新建的文件

然后可以先复制一份其他的信息图内容到你的文件里，删除dsl的内容，它大概长这样

ini 复制代码

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 里导入你的组件

javascript 复制代码

import { DeepseekShockwave } from './demos/infographic/deepseek-shockwave';

我添加的内容如下

好了，现在你可以在启动调试后的右侧菜单中看到你的 demo 了

添加元素

我们先将需要展示的元素都添加上，随便给它们一个位置。元素添加在character上

背景

首先添加图片资源

注意规则：图片资源必须放到下面这个目录

bash 复制代码

packages/vstory/demo/src/assest/infographic/${yourDemoName}

然后添加一个图片类型的元素

arduino 复制代码

// 引入图片元素
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 // 透明度
            }
          }
        },
]

图表

arduino 复制代码

// 引入图片元素
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 // 之前内容准备时的图表配置
      }
    }
]

文本

yaml 复制代码

// 引入图片元素
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'
        }
      }
    },
]

全部元素添加完之后。

给它们配置一个展示动作。（动画我们最后再配置）

css 复制代码

const dsl: IStoryDSL = {
  acts: [
    {
      id: 'defaultAct',
      scenes: [
        {
          id: 'defaultScene',
          actions: [
            {
            // 给所有元素都先给一展示动作，不设置具体动画属性的话，它们会直接展示
              characterId: ['background', 'title', 'subTitle', 'desc1', 'desc2', 'chart'],
              characterActions: [
                {
                  action: 'appear'
                }
              ]
            }
          ]
        }
      }
    ]
    ...character
}

你应该可以看到一个凌乱的信息图

布局与微调

现在我们需要调整元素到它对应的位置，调整属性让它看起来协调一些

可以通过 character 的 position 属性来调整元素位置与大小
文本的 text 属性可以数组，这样你可以通过下面的形式进行手动换行

go 复制代码

 text: [`When Algorithms Crack`, '\n', `the Silicon Fortress`],

具体的属性配置项在这里 www.visactor.com/vstory/guid...

简单的调整位置，文本颜色与大小之后现在这个信息图已经快要完成了

艺术再加工

这一部分仁者见仁智者见智，比如可以添加图形，水印，给文字添加背景等等。

添加动画

刚刚我们在添加元素时，在action里添加了一个统一的 appear 动作。现在我们给元素单独配置不同的动画效果

以右侧文本为例：

yaml 复制代码

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

具体动画配置文档在这里 www.visactor.com/vstory/guid...

最终效果

上传

从 develop 拉新分支，提交 pr 的 target 也是 develop。
提交pr时，选择 demo update 并邀请 Reviewers ：xuefei1313 or neuqzxy or xiaoluoHe

参考 pr

如何提交pr

欢迎交流

VisActor Github：github.com/VisActor（欢迎...
VStory Github：github.com/VisActor/VS...
VisActor 飞书交流群：applink.larkoffice.com/client/chat...

Discord：discord.gg/3wPyxVyH6m

微信公众号：打开链接扫码

Twiter：twitter.com/xuanhun1