- 综合排序
- 最热优先
- 最新优先
超级好用开源大屏设计器!
DataRoom 是一款基于 SpringBoot + Vue 技术栈构建的开源大屏设计器，集成了 MyBatis-Plus、ElementUI、ECharts、G2Plot 等主流前端与后端生态。 二、工具优势一站式大屏解决方案，从数据源接入->数据清洗处理->大屏设计->大屏预览->大屏发布上线支持多种数据集接入，如：原始数据集、自助数据集(支持多表关联)、存储过程、JSON(静态数据)、JS脚本 2、资源库驱动设计内置上百种国产化风格素材：科技感边框、渐变背景、动态粒子、3D 地球等；支持上传企业 VI 元素（如 LOGO、品牌色卡），确保大屏符合统一视觉规范。 三、功能介绍1、大屏管理支持大屏【新增】、【编辑】、【设计】、【预览】、【复制】、【删除】操作2、大屏设计器采用拖拉拽可视化设计，支持30+基础组件、40+种图表组件、15种边框组件、10多种修饰组件3 、资源库支持资源自定义上传、在大屏设计器中直接引用资源，如：3D图片、边框图片、装饰条、背景图4、数据源支持MySQL、PostgreSQL、Oracle 、ClickHouse、SqlServer等主流数据库接入
1.7K10编辑于 2025-12-31- 来自专栏京东技术
供应链大屏设计实践
数据链路的稳定性 接口服务的兜底 指标准确性的验证机制 重算机制 本文内容有限，很多设计的小细节未能体现，感兴趣的欢迎交流，希望上述内容对正在从事大屏建设的同学有一些新的启发和思考。 01 背景 在今年的敏捷团队建设中，我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢？由此我的Runner探索之旅开始了！ ：可通过配置将任意一天切换为28小时、4小时模式，为业务和研发侧提供了充分的线上验证机会； （2）阈值开关配置化：可通过阈值开关进行数据兜底逻辑管控，确保数据平稳； （3）自动刷新白名单配置化：灵活配置大屏自动刷新白名单 3）大屏结果分钟级落库，并通过Grafana,创建大屏数据监控看板，持续监控大屏数据，通过异常拐点发现问题点，避免遗漏问题。并结合不同看板分析数据趋势及变化原因。 4）结合大屏计算逻辑，通过京东动力搭建测试模型，做到自由指定时间计算大屏指标明细，验证分析大屏数据。
77310编辑于 2024-07-04 - 来自专栏计算机图形学 前端可视化 WebGL
拓扑大屏三维编辑器的设计与思考
从去年年初开始，我们团队内部就在做两个编辑器： 3d编辑器 支持搭建3d场景。 拓扑/大屏编辑器 支持搭建大屏/拓扑/组态场景。 下面是几个项目的示例图： [示例图] [示例图2] [示例图3] [示例图4] 中间是一个三维场景，使用三维编辑器编辑而成，周边是一些大屏元素，使用大屏编辑器编辑。 和一般的大屏编辑器不同，我们的大屏编辑器不仅支持大屏元素的排布，也支持分层拓扑图，架构图，交通图等，以及组态功能。 基于canvas + HTML5元素共同开发，能够支持更多丰富的功能和效果。 通过派发事件和接受事件来展示和隐藏内容，效果是可以的，问题在于易用性并不好，通过编辑器实现起来复杂，一般的实施人员用起来难度大。 总结 上面是一些设计与思考，主要是基于拓扑/大屏编辑器的思考。为了有更好的产品，我们一直在努力的架构，设计与思考。 有关三维编辑器，有很多类似的设计理念，以后又机会再说。
1.3K30发布于 2020-11-11 数据大屏交互设计案例详解 | 基于smardaten实现智慧交通监测大屏
而现代智慧交通大屏，利用可视化的方式整合多源数据，一屏即可实现全域感知和综合监测，又利用各类交互设计，提升数据大屏的联动能力，加快决策过程。 点击跳转：大屏中各组件支持点击事件，例如针对指标卡可以实现点击跳转的功能，实现从宏观指标到微观详情的快速穿透。 三、配置过程进入平台后，选择交通监测系统，进入数据大屏的配置页。在数据大屏中支持多种交互动作，其中交互组件作为与用户直接交互的核心元素，包含按钮、导航、输入框等多种类型。3.1. 回到数据大屏的配置页，将地址填入并绑定“车牌号” 作为跳转参数，确保查询结果与输入的车牌号精准匹配。完成后，我们预览测试一下。 交互能力多，支撑多维度分析：覆盖页面导航、图表联动、下钻分析、过滤筛选等能力，使大屏从静态展示升级为“宏观到微观” 的数据探索工具，助力用户深入洞察，提升决策质量与效率。
77310编辑于 2025-10-29实时数据可视化与3D数据大屏设计深度分析
本文将对腾讯云的RayData、低代码可视化分析、数字孪生可视化以及3D数据可视化等产品进行介绍和对比，重点探讨数据大屏设计、3D场景渲染、实时数据接入、多屏互动、可视化模板、数据动画和自定义组件等核心能力 腾讯云 RayData 数据大屏设计 RayData支持灵活的数据大屏设计，用户可以根据需求自定义布局和组件，实现个性化的数据展示界面。 低代码可视化分析 数据大屏设计 低代码可视化分析允许用户通过拖拽组件的方式快速构建数据大屏，简化了设计流程。 数字孪生可视化 数据大屏设计 数字孪生可视化专注于构建数字孪生模型，提供了丰富的数据大屏设计元素，以支持复杂的场景模拟。 3D数据可视化 数据大屏设计 3D数据可视化专注于3D数据的展示，提供了丰富的数据大屏设计工具。 3D场景渲染 3D数据可视化具备强大的3D场景渲染能力，能够将数据以三维形式生动展现。
27310编辑于 2025-07-28实时数据可视化与3D数据大屏设计深度分析
在现代数据驱动的决策环境中，数据大屏设计、3D场景渲染、实时数据接入、多屏互动、可视化模板、数据动画和自定义组件能力成为了数据可视化领域的关键要素。 腾讯云RayData 数据大屏设计 腾讯云RayData提供强大的数据大屏设计能力，支持高度自定义的数据展示界面，允许用户根据不同业务需求设计出独特的数据展示大屏。 RayData 数据大屏设计 RayData同样提供全面的数据大屏设计能力，支持拖拽式界面设计。 3D场景渲染 RayData的3D渲染技术能够将数据以三维形式展现，提供沉浸式的数据体验。 数字孪生可视化 数据大屏设计 数字孪生可视化专注于构建数字孪生模型，提供数据大屏设计能力。 3D场景渲染 通过3D场景渲染技术，实现数字孪生模型的高精度可视化。 3D数据可视化 数据大屏设计 3D数据可视化专注于3D数据的展示，提供数据大屏设计能力。 3D场景渲染 3D场景渲染是其核心功能，提供高质量的三维数据展示。
42410编辑于 2025-07-28- 来自专栏博文视点Broadview
如何进行可视化大屏视觉设计？
由于大屏的开发基于Web 端，因此网页设计规范中使用的最小字号为12px，小于12px 的很多浏览器不会识别。 图2 02 大屏设计布局解析 大屏设计的四个流程有：需求调研、数据分析、产品设计、可行性测试。 （易懂/ 效率性问题） （3）视觉效果很好，但没能把重要的业务数据展示出来。（数据表达问题） 美感能带来即刻的观赏情绪，但并不代表是最终的认同。 好的大屏设计不仅是具有美感的，同时也是易懂、易用的。 ▊《写给UI设计师看的数据可视化设计》 吴星辰 著 从简单的图表设计到炫酷的3D 可视化大屏设计 让数据更有可读性，真正展现数据背后的意义 一本能让你真正学会数据可视化设计的经典著作 本书将带你全面认识数据可视化设计 ，从简单的图表设计到炫酷的3D 可视化大屏设计，都会通过实际案例进行详细介绍，其中还包括动效设计，以及如何让动效用不同方式落地。
1.2K00编辑于 2023-05-06 - 来自专栏趣谈前端
从零设计可视化大屏搭建引擎
相关文章: 从零开发一款可视化大屏制作平台 演示地址: V6可视化大屏编辑器 作者: 徐小夕 几个月前我写了一篇关于从零开发一款可视化大屏制作平台 的文章， 简单概述了一下可视化大屏搭建平台的一些设计思路和效果演示 ， 这篇文章我会就 如何设计可视化大屏搭建引擎 这一主题， 详细介绍一下实现原理。 按照我一向的写作风格， 我会在下面列出文章的大纲，以便大家有选择且高效率的阅读和学习: 快速了解数据可视化 如何设计通用的大屏搭建引擎 大屏搭建引擎核心功能实现 拖拽器实现 物料中心设计 动态渲染器实现 如何设计通用的大屏搭建引擎 说到 “引擎” 这个词也许有种莫名的高大上， 其实在互联网技术中， 我们经常会听到各种相关的名词，比如 “浏览器渲染引擎” ， “规则引擎” ， “图像识别引擎” 等， 我觉得 综上我们总结出了可视化大屏的必备要素: 我们只要充分的理解了可视化大屏的组成和特征， 我们才能更好的设计可视化大屏搭建引擎， 基于以上分析， 我设计了一张基础引擎的架构图: 接下来我就带大家一起来拆解并实现上面的搭建引擎
1.8K40编辑于 2022-02-09 【开源大屏】玩转开源的积木BI，从0到1设计一个大屏
让我们一起来看一下如何从0到1设计一个数据大屏。 大屏设计器支持多种数据来源配置，支持数据实时同步更新，同时大屏设计器基于 WEB 页面渲染，可灵活投屏多种屏幕终端。 精心预设多种行业模板，极致展示数据魅力。 创建大屏 点击“新建”，弹出新建数据大屏弹框，输入大屏名称，选择文件夹，点击“保存并设计”即创建了大屏 可重新选择大屏的背景色或背景图片。 2. 字段就都解析出来了 图片 数据集支持SQL、API、JSON和websocket 3. ，即可设计完整大屏了。
1.2K10编辑于 2024-12-13实时数据可视化与3D数据大屏设计的深度分析
在数字化转型的浪潮中，实时数据可视化和3D数据大屏设计成为了企业洞察数据、辅助决策的重要工具。 腾讯云 RayData 数据大屏设计 腾讯云RayData提供了强大的数据大屏设计能力，支持自定义布局和组件，能够根据用户需求灵活设计大屏界面。 低代码可视化分析 数据大屏设计 低代码可视化分析平台提供了简洁直观的大屏设计界面，用户可以通过拖拽组件快速构建大屏。 数字孪生可视化 数据大屏设计 数字孪生可视化专注于构建数字孪生模型，提供专业的数据大屏设计工具。 3D场景渲染 在3D场景渲染方面，数字孪生可视化能够精确模拟现实世界，提供高度逼真的视觉效果。 3D数据可视化 数据大屏设计 3D数据可视化平台提供了专业的数据大屏设计工具，支持三维数据的展示。 3D场景渲染 在3D场景渲染方面，该平台能够处理复杂的三维数据，提供高质量的视觉效果。
26010编辑于 2025-07-28- 来自专栏无原型不设计
超大触摸屏设计的7大注意事项
由于台式电脑的规模和尺寸更大，此类触摸屏的设计可能会给设计师带来一些独特的挑战。 当你习惯了用拇指大小的区域来做屏幕设计时，你如何去设计超大触摸屏？ 这里笔者整理了一个关于超大触摸屏的设计指南，为设计师们设计用户交互提供灵感。 3.确保导航始终可用 2.jpg 大多数用户使用超大触摸屏的心态，与第一次访问网站类似，导航显得尤为重要。模仿这种场景进行设计，很容易就能吸引用户进入你的设计并与之交互。 5.考虑用户隐私 3.jpg 当涉及到触摸屏访问敏感信息或数据时，用户的隐私是一个值得考虑的问题。 用户在公共场所中使用大屏设备，并不意味着他们希望其他人知道自己在做什么，特别是在输入一些重要信息时。而屏幕越大，其他人就越有可能看到用户输入的内容。
2.4K70发布于 2018-02-11 - 来自专栏供应链项目实践
洞见供应链 | 设计适配多端的自适应数据大屏（从 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/
25610编辑于 2026-05-14 - 来自专栏葡萄城控件技术团队
数据可视化大屏设计必备步骤
相信对于从事大数据相关的人员来说，数据的可视化大屏是最能展现自己工作价值的一个途径。可视化大屏就是数据分析的最后成果的展示，而如果能设计出更直观、更酷炫、更具有科技感的大屏，更能获得客户的青睐。 类似下图这种的： 还是这种的： 那好看的，令客户满意的可视化大屏究竟应该如何制作呢，下面我们就来一起了解和学习一下设计可视化大屏的几大必备步骤，保你设计无忧，工作越干越得劲。 2、确定物理大屏尺寸，明确设计稿的尺寸 看板设计好后均是要在大屏上进行展示，所以要提前确定好对应的物理大屏尺寸，这样设计出来的大屏才能获得最好的视觉体验，也会展示的更加完美。 注意：若物流大屏分辨率过高时，可以采用分辨率减半的设计方法去进行设计。 3、确定大屏展示的关键指标 确定好大屏尺寸后，就需要确定大屏展示的关键指标内容，那什么是关键指标呢？ 6、确定大屏的设计风格 大屏的设计风格需要依旧对应的行业类型、指标数据、客户需求等进行整体搭配，总体分为两种风格： 那针对大屏设计给大家推荐一个公开课，保证让你看完受益匪浅，除此之外，联系对应的小助手
2.3K50编辑于 2023-02-24 - 来自专栏前端Q
基于vue3+threejs实现可视化大屏
官方文档地址：threejs.org/ 中文文档地址：www.webgl3d.cn/pages/aac9a… 本文主要主要讲述对 threejs 的一些 api 进行基本的封装，在 vue3 项目中来实现一个可视化的 3d项目。 地址：github.com/fh332393900… 项目预览地址：stevenfeng.cn/threejs-dem… 基础功能 1.场景 Viewer 类 首先我们第一步需要初始化场景、摄像机、渲染器、 mapSize属性可以使阴影更清晰，不那么模糊 light.shadow.mapSize.set(1024, 1024); this.scene.add(light); } 1.4 初始化渲染器 模型加载器 ModelLoder 初始化的时候需要把 Viewer 的实例传进去。 需要注意的是，需要把 draco 从 node_modules 拷贝到项目的 public 目录中去。
2.3K21编辑于 2023-09-14 - 来自专栏XC's Blog 日常笔记
前端大屏方案
如果大屏上有 tooltip、弹窗、拖拽等交互，鼠标位置会对不上。这个问题在 ECharts 的 tooltip 上尤为明显。 坑 3：超宽屏留白。 就像我朋友遇到的情况，16:9 的设计稿放到 32:9 的拼接屏上，两边各空一大块。你可以选择拉伸（Math.max），但内容会变形。 适用场景 固定比例的纯展示大屏，没有复杂交互，交付时间紧。 ': { rootValue: 16, propList: ['*'], minPixelValue: 2 } } } 我的看法 说实话，rem 方案在大屏场景下有点过度设计 如果是 4K 屏，设计稿按 3840×2160 出，但开发时可以按 1920×1080 写，浏览器会自动处理设备像素比。 Q：scale 方案字体模糊怎么办？ A：没有完美解决方案。 Q：大屏需要适配移动端吗？ A：一般不需要。大屏就是大屏，手机打开看的场景极少。如果甲方非要，建议做两套页面，用媒体查询切换，而不是一套代码适配所有。 总结 大屏适配没有银弹。
22910编辑于 2026-05-08 - 来自专栏vivo互联网技术
从0到1设计通用数据大屏搭建平台
本文将通过敏捷BI平台的通用大屏搭建能力的实现方案，来讲解一下通用可视化搭建平台整体的设计思路。 这里简单的做一下介绍：大屏和报表看板都只是BI的其中一种展现方式，大屏更多是通过不同尺寸的显示器硬件上进行投屏，而报表看板更多是在电脑端进行展示使用。 五、效果预览六、总结本文通过可视化页面搭建、no/low code 平台、Schema 动态表单等技术思想来分析讲解了如何去设计开发一个通用的数据大屏搭建平台。 当前的设计方案基本满足了数据大屏的核心能力搭建需求。 可视化物料平台的搭建，沉淀优秀的可视化组件、大屏模版素材。3D以及动效渲染引擎开发实现。
4.5K40编辑于 2022-10-17 - 来自专栏葡萄城控件技术团队
职场IT老手教你3步教你玩转可视化大屏设计，让领导眼前一亮！
于是我开始深入研究这样的大屏究竟是如何制作的。 开始的时候总是不知道从何入手，怎样能设计出一个又能展示数据还能看着赏心悦目的大屏呢？ 整体布局 准备完数据，当然就到了大屏的设计。如何设计一款视觉效果好的呢，最简单的方法就是把握“313布局”。 那除了左右的“33”，中间的“1”便是撑起整个大屏的关键。我们在大屏的中间可以放置相应的背景大图、3D模型、地图组件或者明细数据。不同的场景对应不同的展示风格，只需适当的切换就可以带来很大的反响。 现在，大屏主体已经完成了，那最后就是为它加一个新颖的标题，装上背景框，并添加一些美化的页面元素。至此，一款完美的大屏就设计完成了。 ： 5.总结 其实设计大屏并不难，只要掌握一定规律，其实每个人都可以设计出一款炫酷的大屏。
67940编辑于 2023-02-24 - 来自专栏XC's Blog 日常笔记
大屏自适应方案
abbrlink: ‘0’ 引言：大屏适配的痛点与破局之道 在数据可视化大屏项目中，开发者常常面临这样的困境：同样的设计稿，在1920×1080屏幕上完美显示，到了3840×2160或1366×768的屏幕上却面目全非 今天，我将分享一种JS+CSS协同作战的大屏自适应方案，它不仅解决了适配问题，还保持了代码的优雅与可维护性。 一、方案核心思想：视窗单位+动态计算 1.1 为什么选择vw/vh？ 但在大屏场景下，这些方案各有局限： rem：依赖根字体大小，复杂场景计算繁琐 百分比：依赖父元素，多层嵌套时难以维护 媒体查询：断点固定，无法实现连续自适应 vw/vh单位基于视窗尺寸，天生适合大屏适配 在开发大屏项目时，我的建议是： 基础布局使用CSS：利用SCSS函数保持代码简洁 动态内容使用JS：利用工具类保持灵活性 关键组件混合使用：结合两者优势实现最佳效果 记住：没有最好的方案，只有最适合的方案 根据项目需求和团队习惯，灵活选择组合策略，才能打造出既美观又实用的大屏应用。
24310编辑于 2026-05-08 - 来自专栏樯橹代码
公司大屏开发心得
大屏开发心得 布局篇 因为大屏不是对外开放的，所以可以使用固定的浏览器。既然这样其实是可以使用一些相对比较新的技术的。所以在布局这块我优先选择使用flexbox技术。 因为大屏屏幕很大，设计师给出的设计图通常会有很大的尺寸。其实设计师并不知道的是大屏屏幕在再大，也不过就是一个显示屏的尺寸。其实那这块需要的就是一个等比缩放。 因为只要把量出来设计稿的实际尺寸，直接设置在flex上就可以了。 比如设计稿尺寸是3200px，对应到flex上就是flex: 3200。 大屏模糊的问题 大屏一般都是多块屏幕拼凑起来的一整块屏。 设计稿给的一个页面。开始的时候我们是按照一个页面进行开发的。但是投到一个大屏的时候问题来了，因为放的很大，锯齿很严重。 所以后来还是把大屏分开了，设计稿的每个部分拆成一个页面，每个小屏幕显示一个页面。 即便字号很小也会显示很大（chrome默认最小字号是12px，如果需要显示更小，需要修改浏览器配置）。分开就不会有这个问题了
1.8K20发布于 2019-09-02 - 来自专栏腾讯社交用户体验设计
简而未减-结构化消息专为大屏而设计
在我们的社交平台上，用户消息在多个终端设备传递中，产品功能只是在原有基础上简单粗暴放大而已，那么大屏手机/平板电脑存在的价值化为乌有。 ---- ? ---- ---- ---- 3.以标题文字为主进行快速浏览： 在浏览过程中用户通常以抓取关键词为主,快速吸引到下一级信息。 ---- ---- 3.比例结构： 从布局结构上尽量保证原始的摄影图片和视频比例不被过度裁剪。 Flickr的一组数据显示，随着iPhone很大程度上替代单反成为主流拍照设备，4:3和16:9的图片数量占比追上了传统摄影的3:2。而16:9更接近美学比例，黄金分割。 ? 但如果用户快速转发了很多内容时，在兼容小屏设备时，屏幕利用率会有所下降。在iPhone7Plus设备上，同样大小的信息在一屏内展示2-2.5条。用户需要在纵向滑动多次才能抵达下一个信息类别。
1.1K40发布于 2018-06-29
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号