VMind 数据视频入门
数据视频是一种通过图表、动画、标注、旁白等方式展示和介绍数据内容的视频形式。它不仅可以将复杂的数据变得更加易懂，还能够引导观众从中获取有用的信息和见解。数据视频通常被用于商业展示、新闻报道、教育培训等方面，是一种非常有效的数据呈现方式，流行于各大短视频平台。通过数据视频，可以将抽象的数据转化为直观的图形展示，以更加有趣的形式进行展现，让观众更加易于理解和接受。数据视频能够让观众更加深入地了解数据背后的故事，提高观众对信息的理解和 信任，从而增加影响力和说服力。
数据视频的制作流程包括：
- 确定数据来源和主题
- 收集和整理数据
- 图表绘制、编辑和导出
- 视频编辑
传统的数据视频制作流程需要创作者在收集数据后，使用专业的可视化软件将数据绘制为图表；或使用各种图表库，通过编码绘制图表并导出为视频。在短视频时代，每个人都可能是视频的创作者。然而，非专业的视频创作者往往不具备将数据可视化为图表并导出为视频的能力，这大大提高了数据视频的制作门槛。
@VisActor/VChart 提供从数据到展现的全流程解决方案，以“可视化叙事”及“智能化”为核心竞争力。大语言模型强大的生成能力为 VChart 提供了一个自然语言的交互接口，允许我们通过自然语言直接调用 VChart 的各项能力，简单、快速、高质量地完成图表生成与编辑。
@VisActor/VMind 是 VChart 基于大语言模型的图表智能模块，提供图表智能生成、智能配色、对话式图表编辑等能力。使用 VMind 制作数据视频，用户仅需在收集好数据之后，一句话描述想要展示的内容，便能直接生成图表动画，并支持一键导出为视频和 GIF，极大地降低了数据视频的创作门槛。
接下来，我们将展示使用 VMind 制作图表视频的完整流程
数据准备
首先，需要确定数据来源和主题。数据可以来自各种渠道，例如公共数据平台、市场调查、公司内部数据等。主题可以是任何与数据相关的话题，例如销售数据分析、社会现象分析、行业趋势等。
在这里我们从互联网上收集了国产汽车销量数据，作为我们想要呈现的内容，包括时间、汽车厂商、销量。这里我们只展示部分数据：
| 时间 | 汽车厂商 | 销量 |
|---|---|---|
| 2023 年 4 月 | 比亚迪 | 183534 |
| 2023 年 4 月 | 上汽大众 | 96203 |
| 2023 年 4 月 | 一汽-大众 | 78011 |
| 2023 年 4 月 | 广汽丰田 | 76925 |
| 2023 年 4 月 | 长安汽车 | 76455 |
| 2023 年 4 月 | 一汽丰田 | 71383 |
| 2023 年 4 月 | 广汽 本田 | 60462 |
| 2023 年 4 月 | 吉利汽车 | 59661 |
| 2023 年 4 月 | 上汽通用五菱 | 58210 |
| 2023 年 4 月 | 华晨宝马 | 53205 |
| 2023 年 5 月 | 比亚迪 | 209730 |
| 2023 年 5 月 | 上汽大众 | 90193 |
| 2023 年 5 月 | 一汽-大众 | 83610 |
| 2023 年 5 月 | 长安汽车 | 81209 |
| 2023 年 5 月 | 广汽丰田 | 77513 |
| 2023 年 5 月 | 一汽丰田 | 70001 |
| 2023 年 5 月 | 吉利汽车 | 67100 |
| 2023 年 5 月 | 上汽通用五菱 | 63292 |
| 2023 年 5 月 | 东风日产 | 56511 |
| 2023 年 5 月 | 一汽-大众奥迪 | 52696 |
| 2023 年 6 月 | 比亚迪 | 220600 |
| 2023 年 6 月 | 一汽-大众 | 98052 |
| 2023 年 6 月 | 上汽大众 | 94018 |
| 2023 年 6 月 | 广汽丰田 | 86345 |
| 2023 年 6 月 | 长安汽车 | 86189 |
| 2023 年 6 月 | 特斯拉中国 | 74212 |
| 2023 年 6 月 | 吉利汽车 | 71726 |
| 2023 年 6 月 | 一汽丰田 | 70795 |
| 2023 年 6 月 | 广汽本田 | 65540 |
| 2023 年 6 月 | 一汽-大众奥迪 | 64037 |
我们想通过展示国产汽车品牌销量排行的变化，讲述国内汽车市场的竞争格局。
图表生成
收集好数据并明确好视频主题后，我们可以使用 VMind 快速生成图表视频。
首先，我们需要在项目中安装 VMind：
# 使用 npm 安装 npm install @visactor/vmind # 使用 yarn 安装 yarn add @visactor/vmind
接下来，在 JavaScript 文件顶部使用 import 引入 VMind
import VMind from '@visactor/vmind';
随后，我们便可在项目中使用 VMind。VMind 目前仅支持 OpenAI GPT-3.5 模型，你需要提供OpenAI API key才能使用。未来我们将支持更多的大模型，并允许用户自定义调用大模型的方法。
首先，我们将数据整理成 csv 格式，可以借助 Excel 等工具完成：
const csvData = `时间,汽车厂商,销量 2022年1月,上汽大众,124491 2022年1月,长安汽车,123707 2022年1月,吉利汽车,112325 2022年1月,东风日产,110996 2022年1月,一汽-大众,103462 2022年1月,广汽丰田,99707 2022年1月,比亚迪,93363 2022年1月,华晨宝马,79087 2022年1月,广汽本田,77377 2022年1月,东风本田,76903 2022年2月,比亚迪,88093 2022年2月,上汽大众,86076 2022年2月,一汽丰田,75918 2022年2月,东风日产,74308 2022年2月,一汽-大众,70638 2022年2月,东风本田,58954 2022年2月,广汽本田,56734 2022年2月,特斯拉中国,56515 2022年2月,吉利汽车,55357 2022年2月,长安汽车,53034 2022年3月,长安汽车,110015 2022年3月,上汽大众,104200 2022年3月,比亚迪,103852 2022年3月,上汽通用五菱,102951 2022年3月,广汽丰田,96984 2022年3月,一汽-大众,76586 2022年3月,广汽本田,75858 2022年3月,吉利汽车,75447 2022年3月,东风本田,71074 2022年3月,一汽丰田,69957 2022年4月,比亚迪,105475 2022年4月,广汽丰田,68450 2022年4月,吉利汽车,49137 2022年4月,长安汽车,47980 2022年4月,上汽通用五菱,44002 2022年4月,一汽-大众,39444 2022年4月,东风日产,37636 2022年4月,华晨宝马,31743 2022年4月,一汽丰田,31443 2022年4月,长城汽车,29125 2022年5月,比亚迪,114183 2022年5月,一汽-大众,89025 2022年5月,广汽丰田,83730 2022年5月,上汽大众,83502 2022年5月,上汽通用五菱,71493 2022年5月,长安汽车,66091 2022年5月,华晨宝马,62567 2022年5月,吉利汽车,60197 2022年5月,一汽丰田,57958 2022年5月,东风日产,52531 2022年6月,比亚迪,133762 2022年6月,一汽-大众,123358 2022年6月,上汽大众,122100 2022年6月,一汽丰田,102039 2022年6月,广汽丰田,100794 2022年6月,吉利汽车,91695 2022年6月,长安汽车,88010 2022年6月,上汽通用五菱,87462 2022年6月,东风日产,79570 2022年6月,特斯拉中国,78906 2022年7月,比亚迪,162214 2022年7月,上汽大众,125450 2022年7月,上汽通用五菱,106483 2022年7月,一汽-大众,100160 2022年7月,长安汽车,96786 2022年7月,广汽丰田,83940 2022年7月,吉利汽车,83392 2022年7月,一汽丰田,82697 2022年7月,东风日产,80439 2022年7月,东风本田,78239 2022年8月,上汽大众,180439 2022年8月,比亚迪,173977 2022年8月,广汽丰田,108679 2022年8月,上汽通用五菱,96363 2022年8月,广汽本田,96325 2022年8月,奇瑞汽车,93720 2022年8月,一汽丰田,93361 2022年8月,吉利汽车,92525 2022年8月,一汽-大众奥迪,82348 2022年8月,特斯拉中国,76965 2022年9月,比亚迪,200973 2022年9月,上汽大众,125484 2022年9月,一汽-大众,114112 2022年9月,上汽通用五菱,105179 2022年9月,广汽丰田,95951 2022年9月,长安汽车,92616 2022年9月,奇瑞汽车,86915 2022年9月,一汽丰田,84954 2022年9月,特斯拉中国,83135 2022年9月,吉利汽车,82688 2022年10月,比亚迪,216593 2022年10月,上汽大众,121973 2022年10月,长安汽车,109451 2022年10月,吉利汽车,106877 2022年10月,上汽通用五菱,106458 2022年10月,一汽-大众,83332 2022年10月,广汽丰田,80800 2022年10月,一汽丰田,74924 2022年10月,奇瑞汽车,72512 2022年10月,东风日产,71986 2022年11月,比亚迪,224576 2022年11月,上汽通用五菱,129039 2022年11月,上汽大众,109343 2022年11月,特斯拉中国,100291 2022年11月,吉利汽车,94638 2022年11月,长安汽车,85776 2022年11月,广汽丰田,85169 2022年11月,一汽-大众,72423 2022年11月,一汽丰田,65837 2022年11月,华晨宝马,58527 2022年12月,比亚迪,226492 2022年12月,上汽通用五菱,141821 2022年12月,长安汽车,124609 2022年12月,上汽大众,118750 2022年12月,一汽-大众,93851 2022年12月,吉利汽车,82623 2022年12月,广汽丰田,74033 2022年12月,东风本田,60922 2022年12月,华晨宝马,60117 2022年12月,一汽丰田,59696 2023年1月,比亚迪,133317 2023年1月,长安汽车,90067 2023年1月,上汽大众,78000 2023年1月,一汽-大众,70004 2023年1月,吉利汽车,67479 2023年1月,广汽丰田,61105 2023年1月,华晨宝马,56765 2023年1月,上汽通用五菱,46922 2023年1月,一汽丰田,43787 2023年1月,北京奔驰,42357 2023年2月,比亚迪,169337 2023年2月,长安汽车,72241 2023年2月,上汽大众,71450 2023年2月,广汽丰田,66936 2023年2月,上汽通用五菱,65513 2023年2月,吉利汽车,65140 2023年2月,一汽-大众,60710 2023年2月,一汽丰田,49959 2023年2月,东风日产,49553 2023年2月,华晨宝马,49340 2023年3月,比亚迪,181391 2023年3月,一汽-大众,81030 2023年3月,上汽大众,81009 2023年3月,特斯拉中国,76663 2023年3月,长安汽车,67379 2023年3月,一汽丰田,62347 2023年3月,吉利汽车,61714 2023年3月,广汽丰田,60498 2023年3月,华晨宝马,58320 2023年3月,上汽通用五菱,56440 2023年4月,比亚迪,183534 2023年4月,上汽大众,96203 2023年4月,一汽-大众,78011 2023年4月,广汽丰田,76925 2023年4月,长安汽车,76455 2023年4月,一汽丰田,71383 2023年4月,广汽本田,60462 2023年4月,吉利汽车,59661 2023年4月,上汽通用五菱,58210 2023年4月,华晨宝马,53205 2023年5月,比亚迪,209730 2023年5月,上汽大众,90193 2023年5月,一汽-大众,83610 2023年5月,长安汽车,81209 2023年5月,广汽丰田,77513 2023年5月,一汽丰田,70001 2023年5月,吉利汽车,67100 2023年5月,上汽通用五菱,63292 2023年5月,东风日产,56511 2023年5月,一汽-大众奥迪,52696 2023年6月,比亚迪,220600 2023年6月,一汽-大众,98052 2023年6月,上汽大众,94018 2023年6月,广汽丰田,86345 2023年6月,长安汽车,86189 2023年6月,特斯拉中国,74212 2023年6月,吉利汽车,71726 2023年6月,一汽丰田,70795 2023年6月,广汽本田,65540 2023年6月,一汽-大众奥迪,64037`;
接下来，我们初始化一个 VMind 实例，并传入 OpenAI Key：
const vmind = new VMind(openAIKey); //传入您的openAI key
我们想要展示的内容为“各品牌汽车销量排行的变化”。调用 generateChart 方法，将数据和展示内容描述直接传递给 VMind。VMind 目前还支持指定视频时长、配色风格。相关代码如下：
const describe = '帮我展示各品牌汽车销量排行的变化，时长20s，科技感风格'; const { spec, time } = await(vmind.generateChart(csvData, describe)); //图表智能生成，传入您的csv格式的数据和图表描述，返回图表spec和图表动画时长
这样我们就得到了对应动态图表的 VChart spec 和视频时长。
VMind 目前支持柱状图、饼图、折线图、散点图、词云、动态条形图。你可以参考VChart 快速上手，使用 VChart 将其绘制出来，或者继续使用 VMind 将其导出为视频或 GIF。在未来，VMind 还将支持对话式的图表编辑功能，通过自然语言直接将编辑操作应用到图表上，实现更加个性化的数据视频创作。
图表视频导出
使用以下代码，将生成的图表导出为 GIF 或视频：
//导出视频
const videoSrc = await vmind.exportVideo(spec, time); //传入图表spec和视频时长，返回ObjectURL
//导出GIF图片
const gifSrc = await vmind.exportGIF(spec, time); //传入图表spec和GIF时长，返回ObjectURL
//创建dom元素，实现文件下载
const a = document.createElement('a');
a.href = videoSrc;
a.download = `${filename}.mp4`; //设置保存的文件名
a.dispatchEvent(new MouseEvent('click')); //保存文件
最终导出的视频如下：
你可以将导出的视频或 GIF 导入到视频编辑软件中，继续完成数据视频的制作。
编辑视频
我们可以将 VMind 生成的数据视频导入到剪映、Pr、Final Cut 等视频制作工具中，添加字幕、背景音乐、音效、转场效果等，使得视频更生动有趣：
最终我们得到了如下的数据视频片段：
你可以将它发布在抖音等各类短视频平台，或者插入到 PPT 中用于演示、汇报等方面，让更多人了解你的想法。
总结
本教程展示了使用 VMind 制作数据视频的 完整流程，包括数据准备、图表生成、图表视频导出、编辑视频。 VMind 目前支持柱状图、饼图、折线图、散点图、词云、动态条形图，满足用户的叙事需求。 VMind 能够根据用户数据和展示意图，推荐合适的图表类型，并将字段映射到合适的视觉通道上，自动生成符合用户需求的色板，帮助您轻松完成数据叙事。在未来，VMind 将继续支持更多的图表类型（雷达图、桑基图、瀑布图等），并增加对话式图表编辑功能，进一步降低数据视频的创作门槛。