【开源大屏】玩转开源积木BI,从0到1设计一个大屏

积木 BI 重磅推出免费大屏设计器!功能超强大,操作超流畅,体验超酷炫。快来体验一下吧。

让我们一起来看一下如何从0到1设计一个大屏。

一、积木BI大屏介绍

积木BI可视化数据大屏 是一站式数据可视化展示平台,旨在帮助用户快速通过可视化图表展示海量数据,10 分钟零门槛打造出专业大屏数据展示。

大屏设计器支持多种数据来源配置,支持数据实时同步更新,同时大屏设计器基于 WEB 页面渲染,可灵活投屏多种屏幕终端。

精心预设多种行业模板,极致展示数据魅力。采用拖拽式自由布局,无需编码,全图形化编辑,快速可视化制作。

二、积木大屏安装/集成

支持maven本地集成或在线使用

本示例以本地安装为例;本地安装完成后,进入大屏后台;就可以开始大屏制作了。

三、大屏设计步骤

1. 创建大屏

点击"新建",弹出新建数据大屏弹框,输入大屏名称,选择文件夹,点击"保存并设计"即创建了大屏

可重新选择大屏的背景色或背景图片。

2. 数据准备

点击右上角"数据源"、"数据集",添加数据源和数据集

2.1 添加数据源

点击"新增",创建所需要的数据源,支持多种数据源

支持 MySQL5.5、MySQL5.7+、Oracle、SQLServer、MariaDB、PostgreSQL、达梦、人大金仓、神通、DB2、Hsqldb、Derby、H2、TIDB、clickhouse、TDengine、Redis、MongoDB 等

2.2 添加数据集
  • 点击"数据集"弹出数据集管理界面
  • 点击新增,创建数据集,选择所需的数据类型,点击解析即可。字段就都解析出来了

    数据集支持SQL、API、JSON和websocket
3. 添加组件(文本、图表、装饰、表格等)
3.1 添加设计文本
  • 添加文本
  • 修改文本样式
  • 修改文本数据
3.2 添加设计图表
  • 添加图表-饼图为例

  • 添加图表样式-饼图为例

根据自己的需求修改图表样式标题、图例、数值、配色等等

  • 添加图表数据-饼图为例

① 数据源类型:可选择静态数据源、动态数据源;此处以动态数据为例

② 数据集:数据集即"2.2"步骤,添加的数据集,点击选择即可

③ 映射字段:即"2.2"步骤添加数据集的解析字段

④ 数据条数:可输入数字控制返回数据条数,例如数据集总共返回10条,只需要显示5条

⑤ 数据过滤:可输入条件,对返回的数据进行过滤;如下代码:

复制代码
return data.filter((item)=>{
   return item.value > 0
});

⑥ 定时刷新(单位:秒):多长时间刷新一次数据

3.3 添加边框装饰
  • 添加边框
  • 调整边框位置、大小

依照此方法,设计其他图表及组件,即可设计完整大屏了。

3.4 Jeecg数据大屏管理驾驶舱效果图

四、快速创建大屏

在模版案例中复制一个相近的模版,再修改大屏的组件及数据即可快速创建一个大屏了。

相关推荐
云天徽上4 小时前
【数据可视化-94】2025 亚洲杯总决赛数据可视化分析:澳大利亚队 vs 中国队
python·信息可视化·数据挖掘·数据分析·数据可视化·pyecharts
Mapmost16 小时前
项目验证加速度!一屏预览多源数据,三维场景直观可见
数据可视化
Mapmost16 小时前
城市规划场景落地:多风格城市白模制作全流程(附插件包)
数据可视化
菜牙买菜16 小时前
深度解析HiCharts联动与交互:手把手实现数据与图表的“对话”
前端·vue.js·数据可视化
IT毕设梦工厂18 小时前
大数据毕业设计选题推荐-基于大数据的1688商品类目关系分析与可视化系统-Hadoop-Spark-数据可视化-BigData
大数据·毕业设计·源码·数据可视化·bigdata·选题推荐
我要学习别拦我~19 小时前
读《精益数据分析》:规模化(Scale)—— 复制成功,进军新市场
经验分享·数据分析
阿里云大数据AI技术1 天前
ODPS 十五周年实录 | 为 AI 而生的数据平台
大数据·数据分析·开源
FIT2CLOUD飞致云1 天前
下拉组件Tag支持自定义背景颜色,图片组支持设置刷新频率,DataEase开源BI工具v2.10.12 LTS版本发布
开源·数据可视化
SelectDB技术团队1 天前
Apache Doris 在菜鸟的大规模湖仓业务场景落地实践
数据库·数据仓库·数据分析·apache doris·菜鸟技术
一个处女座的程序猿1 天前
DataAnalytics之Tool:Metabase的简介、安装和使用方法、案例应用之详细攻略
数据分析