极速构建数据大屏【Light Chaser】助你实现可视化【开源】_react 可视化大屏拖拽开源库

Light Chaser - 基于React的可视化数据大屏设计器

在线体验 | 视频展示

随着大数据的应用日益广泛,数据可视化已成为许多企业或组织呈现数据和洞察的首选方式。但是可视化方案的开发往往需要投入大量时间和精力。Light Chaser 正是为此而生,它可以帮助你快速地生成美观、高性能的数据大屏应用。

Light Chaser 的优势

Light Chaser 是一个基于 React 生态的可视化设计器,具有以下优势:

• 拖拽式操作,通过简单拖拽组件至画布上,即可高效地完成页面布局和内容设计。
• 性能优异,通过优化渲染机制,使百个组件级页面保持流畅。
• 可扩展性强,可以无限扩展组件库,引入任意 React 组件。
• 高度可定制,可以自定义组件配置,也可以使用自己实现的组件。
• 前后端分离,无需后端服务也可流畅运行。
• 主题快速切换,可在全局或局部快速更换主题风格。
• 丰富快捷键,大大提升操作效率。

通过 Light Chaser,你可以在短时间内生成功能强大、视觉出色的数据大屏,以支持数据分析和决策。

功能一览

• 拖拽式页面设计
• 栅格布局系统
• 导入第三方组件(Ant Design等)
• 主题切换
• 支持TS开发组件
• 快捷键操作
• 撤销重做
• 组件缩放
• 组件置顶/置底
• 组件锁定
• 数据模拟
• 在线预览
• 本地运行

支持快捷键

使用场景

Light Chaser可广泛应用于:

• 数据统计大屏展示
• 企业运营看板
• 智能会议室
• 智慧城市
• 物联网监控平台
• 数字营销展示
• 金融交易终端
• 交通、能源管理

它使开发者能以极快的速度实现数据化视觉呈现,支持数据决策和商业运营。

使用方法简介

1. 安装依赖

yarn install
1

2. 运行项目

yarn start 
1

3. 添加组件

双击左侧组件列表项即可添加组件,进行拖拽设计。

4. 发布和部署

yarn build
1

自定义组件

Light Chaser 支持无限扩展组件库。你可以轻松添加自己的 React 组件。

1. 找到src/comps目录，新建一个你自定义组件的文件夹
2. 假设我的自定义组件名为：MyComp
3. 新建ts文件，命名为：MyComp.ts，在该文件中新建一个class，并继承AbstractCustomComponentDefinition。实现其中的方法。
4. 新建ts文件，命名为：MyCompDefinition.ts，在该文件中新建一个class，并继承AbstractDesignerComponent。实现其中的方法。

到此就结束了！！！剩下的交给自动扫描器，他会自动扫描你的组件，并将其注册到LC中。

如果你对本项目感兴趣，可以访问顶部的开源项目地址或在线预览地址体验，也欢迎star