【开源大屏】玩转开源积木BI，从0到1筹划一个大屏
积木 BI 重磅推出免费大屏筹划器！功能超强大，操纵超流畅，体验超酷炫。快来体验一下吧。让我们一起来看一下如何从0到1筹划一个大屏。
一、积木BI大屏介绍
积木BI可视化数据大屏 是一站式数据可视化展示平台，旨在资助用户快速通过可视化图表展示海量数据，10 分钟零门槛打造出专业大屏数据展示。
大屏筹划器支持多种数据来源设置，支持数据及时同步更新，同时大屏筹划器基于 WEB 页面渲染，可灵活投屏多种屏幕终端。
精心预设多种行业模板，极致展示数据魅力。采用拖拽式自由布局，无需编码，全图形化编辑，快速可视化制作。
二、积木大屏安装/集成
支持maven本地集成或在线使用
[*]下载代码： https://github.com/jeecgboot/JimuReport
[*]官网： https://jimureport.com
本示例以本地安装为例；本地安装完成后，进入大屏后台；就可以开始大屏制作了。
https://i-blog.csdnimg.cn/img_convert/ba881a915e07b7fd7c63f1fa73c00149.png
三、大屏筹划步骤
1. 创建大屏
点击“新建”，弹出新建数据大屏弹框，输入大屏名称，选择文件夹，点击“保存并筹划”即创建了大屏
https://i-blog.csdnimg.cn/img_convert/38157c27f8eb1ab72564007f41b8a6af.png
https://i-blog.csdnimg.cn/img_convert/624970e0e721816cb8e7cea5bcb42db4.png
可重新选择大屏的背景色或背景图片。
2. 数据准备
点击右上角“数据源”、“数据集”，添加数据源和数据集
https://i-blog.csdnimg.cn/img_convert/a58eaf3d8fc3c8239e34cd1640349d96.png
2.1 添加数据源
点击“新增”，创建所需要的数据源，支持多种数据源
https://i-blog.csdnimg.cn/img_convert/7ace3692430565973cf80da8edbe5d3f.png
支持 MySQL5.5、MySQL5.7+、Oracle、SQLServer、MariaDB、PostgreSQL、达梦、人大金仓、神通、DB2、Hsqldb、Derby、H2、TIDB、clickhouse、TDengine、Redis、MongoDB 等
2.2 添加数据集
[*]点击“数据集”弹出数据集管理界面
https://i-blog.csdnimg.cn/img_convert/6a0544decea961ed8cce1749757f943b.png
[*]点击新增，创建数据集，选择所需的数据类型，点击解析即可。字段就都解析出来了
https://i-blog.csdnimg.cn/direct/f6766f3d3fc44291af8c69df93248b77.png
数据集支持SQL、API、JSON和websocket
3. 添加组件(文本、图表、装饰、表格等)
3.1 添加筹划文本
[*]添加文本
https://i-blog.csdnimg.cn/img_convert/dda5ecf49a4c23100cdfc6ce91ba6a55.png
[*]修改文本样式
https://i-blog.csdnimg.cn/img_convert/8a9c605b650140635ce056cbcb044163.png
[*]修改文本数据
https://i-blog.csdnimg.cn/img_convert/4790644d90d5dd5d369e14a67a150308.png
3.2 添加筹划图表
[*] 添加图表-饼图为例
https://i-blog.csdnimg.cn/img_convert/7342a60140464d13bbba3886fd7ef7f9.png
[*] 添加图表样式-饼图为例
https://i-blog.csdnimg.cn/img_convert/ccf37f34d9041a2b2ba6ff3c305ce11d.png
根据自己的需求修改图表样式标题、图例、数值、配色等等
[*]添加图表数据-饼图为例
https://i-blog.csdnimg.cn/img_convert/b7230dd88e95beedc5118d033e150727.png
① 数据源类型：可选择静态数据源、动态数据源；此处以动态数据为例
② 数据集：数据集即“2.2”步骤，添加的数据集，点击选择即可
③ 映射字段：即“2.2”步骤添加数据集的解析字段
④ 数据条数：可输入数字控制返回数据条数，例如数据集总共返回10条，只需要显示5条
⑤ 数据过滤：可输入条件，对返回的数据举行过滤；如下代码：
return data.filter((item)=>{
return item.value > 0
});
⑥ 定时革新(单位:秒)：多长时间革新一次数据
3.3 添加边框装饰
[*]添加边框
https://i-blog.csdnimg.cn/img_convert/4295b7eaa45b98a53d337ff7af2a46ef.png
[*]调整边框位置、巨细
https://i-blog.csdnimg.cn/img_convert/13addc6650dfca9d7d61ee05d4667382.png
依照此方法，筹划其他图表及组件，即可筹划完整大屏了。
3.4 Jeecg数据大屏管理驾驶舱效果图
https://i-blog.csdnimg.cn/img_convert/9404db3ee7edd9bb2f1aefcaff659858.png
四、快速创建大屏
在模版案例中复制一个相近的模版，再修改大屏的组件及数据即可快速创建一个大屏了。
https://i-blog.csdnimg.cn/img_convert/59b50dac454ff1ae7ed1279386e2000f.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]