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

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

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

一、积木BI大屏介绍

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

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

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

二、积木大屏安装/集成

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

  • 下载代码: https://github.com/jeecgboot/JimuReport
  • 官网: https://jimureport.com

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

三、大屏设计步骤

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数据大屏管理驾驶舱效果图

四、快速创建大屏

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/63950.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

挑食的机器

描述 未来世界有群机器人,他们以阿拉伯数字为食。但其中有个机器人Tom从小到大都不吃质数,为了Tom的健康着想,医生建议Tom有计划的只吃质数,以保证营养均衡。但超市的货架上只有从1到105并且按顺序排列好的实物售卖,所…

HarmonyOS 线性容器ArrayList 常用的几个方法

ArrayList是一种线性数据结构,底层基于数组实现。ArrayList会根据实际需要动态调整容量,每次扩容增加50%。 ArrayList和Vector相似,都是基于数组实现。它们都可以动态调整容量,但Vector每次扩容增加1倍。 ArrayList和LinkedList相…

leetcode230.二叉搜索树中第k小的元素

标签:二叉搜索树;中序遍历 给定一个二叉搜索树的根节点 root ,和一个整数 k ,请你设计一个算法查找其中第 k 小的元素(从 1 开始计数)。 示例 1: 输入:root [3,1,4,null,2], k 1…

如何在两台 PostgreSQL 服务器之间使用逻辑复制槽进行数据复制

如何在两台 PostgreSQL 服务器之间使用逻辑复制槽进行数据复制 如何在两台 PostgreSQL 服务器之间使用逻辑复制槽进行数据复制环境准备1. 配置主服务器(Publisher)1.1 修改 postgresql.conf1.2 修改 pg_hba.conf1.3 重启 PostgreSQL 服务1.4 创建逻辑复制…

苹果开发者入门:修复 SwiftUI 中“跑偏的”动画(下)

概述 大家知道 SwiftUI 不仅仅是一款 App 界面布局的超级利器,它同样提供了花样百出的动画和转场机制将 UI 世界点缀的“楚楚动人”。不过,对于苹果开发新入门的秃头小码农来说,使用动画貌似没有想象的那么易如反掌。 如上图所示&#xff0c…

kafka-clients之监控

以生产者为例介绍spring如何整合kafka-clients,micrometer,prometheus。上报生产者监控打点 可以通过在Spring Boot应用中手动添加Kafka Producer的度量监控,确保Prometheus能够采集到Producer的指标。以下是一个示例代码,其中使…

【万字详解】三维重建(二)——NeRF、NeuS、MeshUDF、NeuralUDF、3DGS、GShell

文章目录 一、NeRF:Representing Scenes as Neural Radiance Fields for View Synthesis(推荐读)1.1 式1 神经网络的输入和输出1.2 式2 体素渲染算法1.3 式3 损失函数1.4 位置编码1.5 基本原理二、经典的重建流程2.1 传统的三维重建pipeline2.2 神经网络回归2.3 可微渲染最优…

优化Go语言中的网络连接:设置代理超时参数

网络连接优化的重要性 在分布式系统和微服务架构中,网络请求的效率直接影响到整个系统的响应速度。合理的超时设置可以防止系统在等待网络响应时陷入无限期的阻塞,从而提高系统的吞吐量和用户体验。特别是在使用代理服务器时,由于增加了网络…

【人工智能解读】神经网络(CNN)的特点及其应用场景器学习(Machine Learning, ML)的基本概念

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默, 忍不住分享一下给大家。点击跳转到网站 学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……) 2、学会Oracle数据库入门到入土用法(创作中……) 3、手把…

颜色的基本处理

数码相机能够获取彩色图像,但相机的色彩处理是一个非常复杂的过程,是非常重要的。 此过程生产制造商在细节方面都是不公布的,但是基本的概念是相同的。当相机捕捉一个真实场景时,是怎么还原成人眼所看到的图像呢? 1.R…

OpenCV 功能函数介绍 (二)

一,梯度处理的sobel算子函数 功能: 用于计算图像梯度(gradient)的函数 参数: cv2.Sobel(src, ddepth, dx, dy, ksize3, scale1, delta0, borderTypeNone) cv2.Sobel(输入图像 , 应该是灰…

PostgreSQL JSON/JSONB 查询与操作指南

PostgreSQL 提供了强大的 JSON 和 JSONB 数据类型及相关操作,适用于存储和查询半结构化数据。本文将详细介绍其常用操作。 1. 基础操作 1.1 JSON 属性访问 ->: 返回 JSON 对象中的值,结果为 JSON 格式。 SELECT {"a": {"b": 1…

《宇宙机器人》提示错误弹窗“找不到d3dx9_43.dll”是什么原因?“d3dx9_43.dll缺失”怎么解决?

电脑游戏运行时常见问题解析:《宇宙机器人》提示“找不到d3dx9_43.dll”的解决之道 TGA2024落幕,年度最佳游戏——《宇宙机器人》,作为一名在软件开发领域深耕多年的从业者,我深知电脑游戏在运行过程中可能会遇到的各种挑战&…

2024年山西省第十八届职业院校技能大赛 (高职组)“信息安全管理与评估”赛项规程

2024年山西省第十八届职业院校技能大赛 (高职组)“信息安全管理与评估”赛项规程 一、赛项名称 赛项名称:信息安全管理与评估 英文名称:Information Security Management and Evaluation 赛项组别:高职教师组 赛项归属…

modbus学习笔记

ModBus协议的两大变体:ModBus RTU 与 ModBus TCP Modbus报文头(MBAP)帧结构(PDU)7个字节 功能码:1个字节 注意:据说RTU和TCP的差距就是效验码 Modbus协议最基本的通信单位是帧,整个Modbus帧又被称之为应用…

Flutter 桌面端串口配置

前言 我使用flutter_libserialport包在macOS中实现串口通信的功能,可以实现数据收发,但是收到的内容是乱码。这种情况一般都是由于波特率和硬件设备不一致导致的。 配置串口配置 1.打开串口读写 import package:flutter_libserialport/flutter_libser…

JavaScript逆向时,常用的11个hook

提示:记录工作中遇到的需求及解决办法 文章目录 前言01、dom操作02、Cookie操作03、事件监听操作04、AJAX拦截操作05、函数替换操作06、Header操作07、URL操作08、JSON.stringify操作09、JSON.parse操作10、eval操作11、Function操作前言 在逆向分析JavaScript代码时,开发者…

什么是EDI 896?

EDI 896 报文即产品尺寸维护报告(Product Dimension Maintenance),是一种常用于零售和供应链管理领域的EDI(电子数据交换)事务集。它的主要功能是用来传递或更新有关产品尺寸、属性和分类等信息。此消息通常在以下场景…

PPO系列2 - GAE优势函数

策略梯度: 痛点: 1. t时刻的动作,其只会影响t时刻之后得到的Reward,和之前的无关。 2. t时刻的动作,对接下来邻近的几个Reward关系较大,跟远的关系小。 改进: 1. 只累加t时刻之后的Reward。 2. …

subList与原始List相互影响

在 Java 中,List#subList(int fromIndex, int toIndex) 方法返回的是原始列表的一个视图(view),而不是一个独立的副本。这意味着对 subList 的任何修改都会反映到原始列表中,反之亦然。这可能会导致意外的行为&#xf…