Hi, there👋

lmo-DataVisualization

简体中文 | 繁體中文

介绍

lmo-DataVisualization，一款开源可视化数据制作工具。 根据提供的模板，将各种业务数据转换为视频动画，使数据更加形象、生动。

内置功能

1. 数据相关
   • 支持手动编辑数据
   • 上传本地数据
   • 可导出模板示例数据
2. 文字 / 主题相关
   • 支持配置标题信息、颜色
   • 配置图表主题颜色
   • 背景颜色
   • 标题动画
   • 背景图片
3. 音频 / 时间相关
   • 背景音乐
   • 设置音量大小
4. 合成相关
   • 合成帧率设置
   • 视频清晰度配置(最高支持4K)
   • 动画时间配置

PS：不同的模板配置项可能有些差别，这是根据模板内部提供给编辑器的选项进行的。

*注 ： 由于合成服务无法模拟Animate.css提供的动画，后续将会采用纯JavaScript进行对Animate.css动画的模拟。

模板制作

我们为开发者提供了一些API，以简单、快速开发出适用的模板。请参阅 开发模板.md

在线体验

• 演示服务器关闭了合成服务、文件上传服务

演示地址

演示图

模板页
设计器
播放器
资源库 / 日志
预览 / 媒体文件选择

开发

项目服务端文件在/server目录下。 合成需要ffmpeg支持，点击这里下载 (请确保 ffmpeg 支持H.264视频压缩标准)

#clone
git clone https://github.com/ayuanlmo/lmo-data-visualization
#安装模块
yarn
#启动项目
yarn serve
#进入服务端目录
cd server/
#安装服务端模块
yarn
#运行服务端
yarn start-server

发布

#打包前端
yarn build
#注意部署后 请配置前端的WebSocket 和 API接口的反向代理
#WebSocket默认为：/connectSocket
#API接口默认为：/server
#如果你需要修改以上配置 请到/config/DevProxy.js修改配置

nginx配置參考

location /server/{
    proxy_pass http://127.0.0.1:3000/;
}

location /connectSocket{
    proxy_pass http://127.0.0.1:3000/ws/connect/;
    proxy_read_timeout 300s;
    proxy_send_timeout 300s;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
}

其他

  yarn lint

开源相关

本项目所有源代码基于 Apache-2.0协议开源。

本项目所使用的第三方库，请遵循该库的开源协议标准。

GitHub

有问题吗？

可通过YouTrack向我们提问，或者您可以发送issues

感谢贡献

• 糖兮兮
• 游游
• YC SEMI
• Yc Core

特别感谢

感谢 JetBrains 为此项目提供了免费的 开发许可证

本文档遵循知识共享许可协议CC 4.0 (http://creativecommons.org/Licenses/by/4.0/)。