【开源大屏】玩转开源积木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.rhkb.cn/news/490058.html

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

相关文章

微信小程序--创建一个日历组件

微信小程序–创建一个日历组件 可以创建一个日历组件&#xff0c;来展示当前月份的日期&#xff0c;并支持切换月份的功能。 一、目录结构 /pages/calendarcalendar.wxmlcalendar.scsscalendar.jscalendar.json二、calendar.wxml <view class"calendar"><…

【Python网络爬虫笔记】11- Xpath精准定位元素

目录 一、Xpath 在 Python 网络爬虫中的作用&#xff08;一&#xff09;精准定位元素&#xff08;二&#xff09;应对动态网页&#xff08;三&#xff09;数据结构化提取 二、Xpath 的常用方法&#xff08;一&#xff09;节点选取&#xff08;二&#xff09;谓词筛选&#xff0…

现代密码学总结(上篇)

现代密码学总结 &#xff08;v.1.0.0版本&#xff09;之后会更新内容 基本说明&#xff1a; ∙ \bullet ∙如果 A A A是随机算法&#xff0c; y ← A ( x ) y\leftarrow A(x) y←A(x)表示输入为 x x x ,通过均匀选择 的随机带运行 A A A,并且将输出赋给 y y y。 ∙ \bullet …

深度学习训练参数之学习率介绍

学习率 1. 什么是学习率 学习率是训练神经网络的重要超参数之一&#xff0c;它代表在每一次迭代中梯度向损失函数最优解移动的步长&#xff0c;通常用 η \eta η 表示。它的大小决定网络学习速度的快慢。在网络训练过程中&#xff0c;模型通过样本数据给出预测值&#xff0…

lc46全排列——回溯

46. 全排列 - 力扣&#xff08;LeetCode&#xff09; 法1&#xff1a;暴力枚举 总共n!种全排列&#xff0c;一一列举出来放入list就行&#xff0c;关键是怎么去枚举呢&#xff1f;那就每次随机取一个&#xff0c;然后删去这个&#xff0c;再从剩下的数组中继续去随机选一个&a…

Docker 安装 Seata2.0.0 (快速配置)

说明&#xff1a;已安装Docker、MySql等&#xff0c;案例使用Mysql数据库模式、Nacos配置信息 1、准备工作 1.1 拉取镜像 [rootTseng ~]# docker pull seataio/seata-server:2.0.0 2.0.0: Pulling from seataio/seata-server 001c52e26ad5: Already exists d9d4b9b6e964: P…

渗透测试-前端验签绕过之SHA256+RSA

本文是高级前端加解密与验签实战的第2篇文章&#xff0c;本系列文章实验靶场为Yakit里自带的Vulinbox靶场&#xff0c;本文讲述的是绕过SHA256RSA签名来爆破登录。 绕过 根据提示可以看出这次签名用了SHA2556和RSA两个技术进行加密。 查看源代码可以看到RSA公钥是通过请求服务…

【JavaEE】网络(2)

一、网络编程套接字 1.1 基础概念 【网络编程】指网络上的主机&#xff0c;通过不同的进程&#xff0c;以编程的方式实现网络通信&#xff1b;当然&#xff0c;我们只要满足进程不同就行&#xff0c;所以即便是同一个主机&#xff0c;只要是不同进程&#xff0c;基于网络来传…

《操作系统 - 清华大学》7 -1:全局页面置换算法:局部页替换算法的问题、工作集模型

文章目录 1. 局部页替换算法的问题2. 全局置换算法的工作原理3. 工作集模式3.1 工作集3.2 工作集的变化 4 常驻集 1. 局部页替换算法的问题 局部页面置换算法 OPT&#xff0c;FIFO&#xff0c;LRU&#xff0c;Clock 等等&#xff0c;这些算法都是针对一个正在运行的程序来讲的…

SpringCloud和Nacos的基础知识和使用

1.什么是SpringCloud ​   什么是微服务&#xff1f; ​   假如我们需要搭建一个网上购物系统&#xff0c;那么我们需要哪些功能呢&#xff1f;商品中心、订单中心和客户中心等。 ​   当业务功能较少时&#xff0c;我们可以把这些功能塞到一个SpringBoot项目中来进行…

LLMs之APE:基于Claude的Prompt Improver的简介、使用方法、案例应用之详细攻略

LLMs之APE&#xff1a;基于Claude的Prompt Improver的简介、使用方法、案例应用之详细攻略 目录 Prompt Improver的简介 0、背景痛点 1、优势 2、实现思路 Prompt优化 示例管理 提示词评估 Prompt Improver的使用方法 1、使用方法 Prompt Improver的案例应用 1、Kap…

CMake简单使用(二)

目录 五、scope 作用域5.1 作用域的类型5.1.1 全局作用域5.1.2 目录作用域5.1.3 函数作用域 六、宏6.1 基本语法6.2 演示代码 七、CMake构建项目7.1 全局变量7.2 写入源码路径7.3 调用子目录cmake脚本7.4 CMakeLists 嵌套(最常用) 八、CMake 与库8.1 CMake生成动静态库8.1.1 动…

ASP.NET |日常开发中读写XML详解

ASP.NET &#xff5c;日常开发中读写XML详解 前言一、XML 概述1.1 定义和结构1.2 应用场景 二、读取 XML 文件2.1 使用XmlDocument类&#xff08;DOM 方式&#xff09;2.2 使用XmlReader类&#xff08;流方式&#xff09; 三、写入 XML 文件3.1 使用XmlDocument类3.2 使用XmlWr…

自动化测试之单元测试框架

单元测试框架 一、单元测试的定义 1&#xff1a;什么是单元测试&#xff1f; 还记不记得我们软件测试学习的时候&#xff0c;按照定义&#xff1a;单元测试就是对单个模块或者是单个函数进行测试&#xff0c;一般是开发做的&#xff0c;按照阶段来分&#xff0c;一般就是单元…

JAVA爬虫获取1688关键词接口

以下是使用Java爬虫获取1688关键词接口的详细步骤和示例代码&#xff1a; 一、获取API接口访问权限 要使用1688关键词接口&#xff0c;首先需要获取API的使用权限&#xff0c;并了解接口规范。以下是获取API接口的详细步骤&#xff1a; 注册账号&#xff1a;在1688平台注册一…

【游戏设计原理】8 - 霍华德的隐匿性游戏设计法则

1. 霍华德的隐匿性游戏设计法则 霍华德的隐匿性游戏设计法则的核心思想是&#xff1a;“秘密的重要性与其表面上的无辜性和完整度成正比”。这意味着&#xff0c;当游戏开始时&#xff0c;设计上越是简洁、无害、直观的元素&#xff0c;隐藏的深层意义和转折就会显得更加震撼和…

k8s中用filebeat文件如何收集不同service的日志

以下是一个详细的从在 Kubernetes 集群中部署 Filebeat&#xff0c;到实现按web-oper、web-api微服务分离日志并存储到不同索引的完整方案&#xff1a; 理解需求&#xff1a;按服务分离日志索引 在 Kubernetes 集群中&#xff0c;有web-oper和web-api两种微服务&#xff0c;希…

前端退出对话框也就是点击右上角的叉,显示灰色界面,已经解决

文章目录 遇到一个前端bug&#xff0c;点击生成邀请码 打开对话框 然后我再点击叉号&#xff0c;退出对话框&#xff0c;虽然退出了对话框&#xff0c;但是显示灰色界面。如下图&#xff1a; 导致界面就会失效&#xff0c;点击任何地方都没有反应。 发现是如下代码的问题&am…

一区向量加权算法优化INFO-CNN-SVM卷积神经网络结合支持向量机多特征分类预测

一区向量加权算法优化INFO-CNN-SVM卷积神经网络结合支持向量机多特征分类预测 目录 一区向量加权算法优化INFO-CNN-SVM卷积神经网络结合支持向量机多特征分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现INFO-CNN-SVM向量加权算法优化卷积神经网络结…

【Stable Diffusion】SD安装、常用模型(checkpoint、embedding、LORA)、提示词具、常用插件

Stable Diffusion&#xff0c;一款强大的AI模型&#xff0c;让我们能够创造出惊人的艺术作品。本文将为您介绍如何安装Stable Diffusion以及深入使用的学习教程。 1. 安装Stable Diffusion (需要的小伙伴可以文末自行扫描获取) Stable Diffusion的安装可能是第一步&#xff0…