腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

综合排序丨最热优先丨最新优先

超级好用开源大屏设计器!

DataRoom 是一款基于 SpringBoot + Vue 技术栈构建的开源大屏设计器，集成了 MyBatis-Plus、ElementUI、ECharts、G2Plot 等主流前端与后端生态。在传统 BI 工具动辄需要 SQL 编写、DAX 公式或复杂配置的背景下，DataRoom 的核心理念是：让业务人员也能成为大屏设计师。二、工具优势一站式大屏解决方案，从数据源接入->数据清洗处理->大屏设计->大屏预览->大屏发布上线支持多种数据集接入，如：原始数据集、自助数据集(支持多表关联)、存储过程、JSON(静态数据)、JS脚本三、功能介绍1、大屏管理支持大屏【新增】、【编辑】、【设计】、【预览】、【复制】、【删除】操作2、大屏设计器采用拖拉拽可视化设计，支持30+基础组件、40+种图表组件、15种边框组件、10多种修饰组件3 、资源库支持资源自定义上传、在大屏设计器中直接引用资源，如：3D图片、边框图片、装饰条、背景图4、数据源支持MySQL、PostgreSQL、Oracle 、ClickHouse、SqlServer等主流数据库接入

2025-12-31

1.7K0

标签:

开源项目介绍

供应链大屏设计实践

数据链路的稳定性接口服务的兜底指标准确性的验证机制重算机制本文内容有限，很多设计的小细节未能体现，感兴趣的欢迎交流，希望上述内容对正在从事大屏建设的同学有一些新的启发和思考。 01 背景在今年的敏捷团队建设中，我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢？由此我的Runner探索之旅开始了！供应链大屏是供应链事业部重要的看数工具，尤其在大促期间，为业务管理层掌握大促实时动态提供了支撑，为事业部的目标达成、排产提供重要的数据支持。 3）大屏结果分钟级落库，并通过Grafana,创建大屏数据监控看板，持续监控大屏数据，通过异常拐点发现问题点，避免遗漏问题。并结合不同看板分析数据趋势及变化原因。 4）结合大屏计算逻辑，通过京东动力搭建测试模型，做到自由指定时间计算大屏指标明细，验证分析大屏数据。

2024-07-04

7890

标签:

拓扑大屏三维编辑器的设计与思考

从去年年初开始，我们团队内部就在做两个编辑器： 3d编辑器支持搭建3d场景。拓扑/大屏编辑器支持搭建大屏/拓扑/组态场景。下面是几个项目的示例图： [示例图] [示例图2] [示例图3] [示例图4] 中间是一个三维场景，使用三维编辑器编辑而成，周边是一些大屏元素，使用大屏编辑器编辑。和一般的大屏编辑器不同，我们的大屏编辑器不仅支持大屏元素的排布，也支持分层拓扑图，架构图，交通图等，以及组态功能。基于canvas + HTML5元素共同开发，能够支持更多丰富的功能和效果。通过派发事件和接受事件来展示和隐藏内容，效果是可以的，问题在于易用性并不好，通过编辑器实现起来复杂，一般的实施人员用起来难度大。总结上面是一些设计与思考，主要是基于拓扑/大屏编辑器的思考。为了有更好的产品，我们一直在努力的架构，设计与思考。有关三维编辑器，有很多类似的设计理念，以后又机会再说。

2020-11-11

1.3K0

标签:

数据大屏交互设计案例详解 | 基于smardaten实现智慧交通监测大屏

而现代智慧交通大屏，利用可视化的方式整合多源数据，一屏即可实现全域感知和综合监测，又利用各类交互设计，提升数据大屏的联动能力，加快决策过程。点击跳转：大屏中各组件支持点击事件，例如针对指标卡可以实现点击跳转的功能，实现从宏观指标到微观详情的快速穿透。三、配置过程进入平台后，选择交通监测系统，进入数据大屏的配置页。在数据大屏中支持多种交互动作，其中交互组件作为与用户直接交互的核心元素，包含按钮、导航、输入框等多种类型。3.1. 回到数据大屏的配置页，将地址填入并绑定“车牌号” 作为跳转参数，确保查询结果与输入的车牌号精准匹配。完成后，我们预览测试一下。交互能力多，支撑多维度分析：覆盖页面导航、图表联动、下钻分析、过滤筛选等能力，使大屏从静态展示升级为“宏观到微观” 的数据探索工具，助力用户深入洞察，提升决策质量与效率。

中杯可乐多加冰

2025-10-29

7850

标签:

无代码开发平台

从零设计可视化大屏搭建引擎

相关文章: 从零开发一款可视化大屏制作平台演示地址: V6可视化大屏编辑器作者: 徐小夕几个月前我写了一篇关于从零开发一款可视化大屏制作平台的文章，简单概述了一下可视化大屏搭建平台的一些设计思路和效果演示，这篇文章我会就如何设计可视化大屏搭建引擎这一主题，详细介绍一下实现原理。按照我一向的写作风格，我会在下面列出文章的大纲，以便大家有选择且高效率的阅读和学习: 快速了解数据可视化如何设计通用的大屏搭建引擎大屏搭建引擎核心功能实现拖拽器实现物料中心设计动态渲染器实现如何设计通用的大屏搭建引擎说到 “引擎” 这个词也许有种莫名的高大上，其实在互联网技术中，我们经常会听到各种相关的名词，比如 “浏览器渲染引擎” ， “规则引擎” ， “图像识别引擎” 等，我觉得综上我们总结出了可视化大屏的必备要素: 我们只要充分的理解了可视化大屏的组成和特征，我们才能更好的设计可视化大屏搭建引擎，基于以上分析，我设计了一张基础引擎的架构图: 接下来我就带大家一起来拆解并实现上面的搭建引擎

2022-02-09

1.8K0

标签:

数据可视化

如何进行可视化大屏视觉设计？

由于大屏的开发基于Web 端，因此网页设计规范中使用的最小字号为12px，小于12px 的很多浏览器不会识别。在大屏的设计中，12px 的字号会显得较小，因为大屏本身很大，观者都是站在较远的地方才能看清全貌。对于不同比例的大屏，字号的选择依据也会有一定的差异。图2 02 大屏设计布局解析大屏设计的四个流程有：需求调研、数据分析、产品设计、可行性测试。大屏要有看点一个铺满文字和图表的大屏，很难让人产生观赏情绪，因此大屏的设计一定要有看点。看点可以理解为大屏的主视觉元素，一般面积占比较大，用于即刻抓住观者眼球。美感不是唯一的，大屏设计还需要情感认同虽然美感很重要，但并不是大屏设计唯一的追求，真正能让用户叹为观止的一定是情感上的调动。

博文视点Broadview

2023-05-06

1.2K0

标签:

数据可视化

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

让我们一起来看一下如何从0到1设计一个数据大屏。大屏设计器支持多种数据来源配置，支持数据实时同步更新，同时大屏设计器基于 WEB 页面渲染，可灵活投屏多种屏幕终端。精心预设多种行业模板，极致展示数据魅力。二、积木大屏安装/集成支持maven本地集成或在线使用本示例以本地安装为例；本地安装完成后，进入大屏后台；就可以开始大屏制作了。三、大屏设计步骤 1. 创建大屏点击“新建”，弹出新建数据大屏弹框，输入大屏名称，选择文件夹，点击“保存并设计”即创建了大屏可重新选择大屏的背景色或背景图片。 2. ，即可设计完整大屏了。

2024-12-13

1.2K0

标签:

数据可视化

超大触摸屏设计的7大注意事项

由于台式电脑的规模和尺寸更大，此类触摸屏的设计可能会给设计师带来一些独特的挑战。当你习惯了用拇指大小的区域来做屏幕设计时，你如何去设计超大触摸屏？这里笔者整理了一个关于超大触摸屏的设计指南，为设计师们设计用户交互提供灵感。用户在公共场所中使用大屏设备，并不意味着他们希望其他人知道自己在做什么，特别是在输入一些重要信息时。而屏幕越大，其他人就越有可能看到用户输入的内容。结论你是否有过对超大触摸屏设计的经验？这种触摸屏的设计已经成为一种流行的趋势。就算目前你还没有做过此类的设计，相信不久你也会接触到。虽然大多数设计原则和其他基于界面的设计是一样的，但是超大触摸屏的尺寸以及尺寸的调整会让很多设计师无所适从。所以，当你在公共场合看到超大触摸屏时，不如停下来在界面上操作一下，感受一下它的交互设计。

奔跑的小鹿

2018-02-11

2.4K0

标签:

洞见供应链 | 设计适配多端的自适应数据大屏（从 PC 到指挥中心大屏）

本文将深入电商供应链场景，基于React+Node.js技术栈，详解如何设计一套从PC到指挥中心大屏的自适应数据大屏方案，解决多端适配、性能优化与业务价值融合的痛点。一、多端适配的核心挑战与设计目标1.1电商供应链大屏的典型场景终端类型典型场景核心需求PC端仓库运营台、物流调度台高密度信息展示、精准操作交互平板端移动巡检、现场决策触控友好、关键指标优先指挥中心大屏全局监控：避免大屏渲染卡顿、PC端资源浪费业务聚焦：不同终端突出对应场景的核心指标（如PC显示明细，大屏突出异常预警）二、响应式布局架构设计2.1整体架构图2.2关键技术实现：基于React的响应式容器2.2.1 ，允许组件自由拖拽缩放（配合后续大屏编辑器）三、组件级自适应策略3.1图表组件自适应（以Recharts为例）3.1.1动态尺寸调整import{BarChart,Bar,XAxis,YAxis,Tooltip ，平衡实时性与服务器压力六、完整业务流程图结语本文围绕供应链系统的多端自适应大屏设计，从布局架构→组件实现→大屏专项优化→后端支持→性能调优五个维度展开，详细讲解了：基于断点的三级响应式布局方案（PC/

2026-05-15

2760

标签:

数据可视化大屏设计必备步骤

相信对于从事大数据相关的人员来说，数据的可视化大屏是最能展现自己工作价值的一个途径。可视化大屏就是数据分析的最后成果的展示，而如果能设计出更直观、更酷炫、更具有科技感的大屏，更能获得客户的青睐。类似下图这种的：还是这种的：那好看的，令客户满意的可视化大屏究竟应该如何制作呢，下面我们就来一起了解和学习一下设计可视化大屏的几大必备步骤，保你设计无忧，工作越干越得劲。 2、确定物理大屏尺寸，明确设计稿的尺寸看板设计好后均是要在大屏上进行展示，所以要提前确定好对应的物理大屏尺寸，这样设计出来的大屏才能获得最好的视觉体验，也会展示的更加完美。注意：若物流大屏分辨率过高时，可以采用分辨率减半的设计方法去进行设计。 3、确定大屏展示的关键指标确定好大屏尺寸后，就需要确定大屏展示的关键指标内容，那什么是关键指标呢？ 6、确定大屏的设计风格大屏的设计风格需要依旧对应的行业类型、指标数据、客户需求等进行整体搭配，总体分为两种风格：那针对大屏设计给大家推荐一个公开课，保证让你看完受益匪浅，除此之外，联系对应的小助手

葡萄城控件

2023-02-24

2.3K0

标签: