lc设计器.png
Snipaste_2023-08-30_19-24-24.png
Light Chaser - 基于React的可视化数据大屏设计器
随着大数据的应用日益广泛,数据可视化已成为许多企业或组织呈现数据和洞察的首选方式。但是可视化方案的开发往往需要投入大量时间和精力。Light Chaser 正是为此而生,它可以帮助你快速地生成美观、高性能的数据大屏应用。
Light Chaser 的优势
Light Chaser 是一个基于 React 生态的可视化设计器,具有以下优势:
- 拖拽式操作,通过简单拖拽组件至画布上,即可高效地完成页面布局和内容设计。
- 性能优异,通过优化渲染机制,使百个组件级页面保持流畅。
- 可扩展性强,可以无限扩展组件库,引入任意 React 组件。
- 高度可定制,可以自定义组件配置,也可以使用自己实现的组件。
- 前后端分离,无需后端服务也可流畅运行。
- 主题快速切换,可在全局或局部快速更换主题风格。
- 丰富快捷键,大大提升操作效率。
通过 Light Chaser,你可以在短时间内生成功能强大、视觉出色的数据大屏,以支持数据分析和决策。
功能一览
- 拖拽式页面设计
- 栅格布局系统
- 导入第三方组件(Ant Design等)
- 主题切换
- 支持TS开发组件
- 快捷键操作
- 撤销重做
- 组件缩放
- 组件置顶/置底
- 组件锁定
- 数据模拟
- 在线预览
- 本地运行
支持快捷键
| 操作方式/快捷键 | 说明 |
|---|---|
| 双击左侧组件 | 添加组件到画布 |
| 鼠标右键长按 | 拖拽画布 |
| alt + 滑轮 | 缩放画布 |
| ctrl + v | 复制组件 |
| ctrl + l | 锁定组件 |
| ctrl + 方向上键 | 置顶组件 |
| ctrl + 方向下键 | 置底组件 |
| delete | 删除组件 |
| up | 组件上移 |
| down | 组件下移 |
| left | 组件左移 |
| right | 组件右移 |
| ctrl + shift + up | 组件向上放大 |
| ctrl + shift + down | 组件向下放大 |
| ctrl + shift + left | 组件向左放大 |
| ctrl + shift + right | 组件向右放大 |
| ctrl + alt + up | 组件向上缩小 |
| ctrl + alt + down | 组件向下缩小 |
| ctrl + alt + left | 组件向左缩小 |
| ctrl + alt + fight | 组件向右缩小 |
| ctrl + z | 撤销 |
| ctrl + shift + z | 重做 |
使用场景
Light Chaser可广泛应用于:
- 数据统计大屏展示
- 企业运营看板
- 智能会议室
- 智慧城市
- 物联网监控平台
- 数字营销展示
- 金融交易终端
- 交通、能源管理
它使开发者能以极快的速度实现数据化视觉呈现,支持数据决策和商业运营。
使用方法简介
1. 安装依赖
yarn install
2. 运行项目
yarn start
3. 添加组件
双击左侧组件列表项即可添加组件,进行拖拽设计。
4. 发布和部署
yarn build
自定义组件
Light Chaser 支持无限扩展组件库。你可以轻松添加自己的 React 组件。
- 找到src/comps目录，新建一个你自定义组件的文件夹
- 假设我的自定义组件名为：MyComp
- 新建ts文件，命名为：MyComp.ts，在该文件中新建一个class，并继承AbstractCustomComponentDefinition。实现其中的方法。
- 新建ts文件，命名为：MyCompDefinition.ts，在该文件中新建一个class，并继承AbstractDesignerComponent。实现其中的方法。
到此就结束了！！！剩下的交给自动扫描器，他会自动扫描你的组件，并将其注册到LC中。
如果你对本项目感兴趣，可以访问顶部的开源项目地址或在线预览地址体验，也欢迎star
