- 综合排序
- 最热优先
- 最新优先
超级好用开源大屏设计器!
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等主流数据库接入
1.7K10编辑于 2025-12-31- 来自专栏京东技术
供应链大屏设计实践
数据链路的稳定性 接口服务的兜底 指标准确性的验证机制 重算机制 本文内容有限，很多设计的小细节未能体现，感兴趣的欢迎交流，希望上述内容对正在从事大屏建设的同学有一些新的启发和思考。 01 背景 在今年的敏捷团队建设中，我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢？由此我的Runner探索之旅开始了！ 供应链大屏是供应链事业部重要的看数工具，尤其在大促期间，为业务管理层掌握大促实时动态提供了支撑，为事业部的目标达成、排产提供重要的数据支持。 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- 来自专栏博文视点Broadview
如何进行可视化大屏视觉设计？
由于大屏的开发基于Web 端，因此网页设计规范中使用的最小字号为12px，小于12px 的很多浏览器不会识别。 在大屏的设计中，12px 的字号会显得较小，因为大屏本身很大，观者都是站在较远的地方才能看清全貌。 对于不同比例的大屏，字号的选择依据也会有一定的差异。 图2 02 大屏设计布局解析 大屏设计的四个流程有：需求调研、数据分析、产品设计、可行性测试。 大屏要有看点 一个铺满文字和图表的大屏，很难让人产生观赏情绪，因此大屏的设计一定要有看点。 看点可以理解为大屏的主视觉元素，一般面积占比较大，用于即刻抓住观者眼球。 美感不是唯一的，大屏设计还需要情感认同 虽然美感很重要，但并不是大屏设计唯一的追求，真正能让用户叹为观止的一定是情感上的调动。
1.2K00编辑于 2023-05-06 - 来自专栏趣谈前端
从零设计可视化大屏搭建引擎
相关文章: 从零开发一款可视化大屏制作平台 演示地址: V6可视化大屏编辑器 作者: 徐小夕 几个月前我写了一篇关于从零开发一款可视化大屏制作平台 的文章， 简单概述了一下可视化大屏搭建平台的一些设计思路和效果演示 ， 这篇文章我会就 如何设计可视化大屏搭建引擎 这一主题， 详细介绍一下实现原理。 按照我一向的写作风格， 我会在下面列出文章的大纲，以便大家有选择且高效率的阅读和学习: 快速了解数据可视化 如何设计通用的大屏搭建引擎 大屏搭建引擎核心功能实现 拖拽器实现 物料中心设计 动态渲染器实现 如何设计通用的大屏搭建引擎 说到 “引擎” 这个词也许有种莫名的高大上， 其实在互联网技术中， 我们经常会听到各种相关的名词，比如 “浏览器渲染引擎” ， “规则引擎” ， “图像识别引擎” 等， 我觉得 综上我们总结出了可视化大屏的必备要素: 我们只要充分的理解了可视化大屏的组成和特征， 我们才能更好的设计可视化大屏搭建引擎， 基于以上分析， 我设计了一张基础引擎的架构图: 接下来我就带大家一起来拆解并实现上面的搭建引擎
1.8K40编辑于 2022-02-09 【开源大屏】玩转开源的积木BI，从0到1设计一个大屏
让我们一起来看一下如何从0到1设计一个数据大屏。 大屏设计器支持多种数据来源配置，支持数据实时同步更新，同时大屏设计器基于 WEB 页面渲染，可灵活投屏多种屏幕终端。 精心预设多种行业模板，极致展示数据魅力。 二、积木大屏安装/集成 支持maven本地集成或在线使用 本示例以本地安装为例；本地安装完成后，进入大屏后台；就可以开始大屏制作了。 三、大屏设计步骤 1. 创建大屏 点击“新建”，弹出新建数据大屏弹框，输入大屏名称，选择文件夹，点击“保存并设计”即创建了大屏 可重新选择大屏的背景色或背景图片。 2. ，即可设计完整大屏了。
1.2K10编辑于 2024-12-13- 来自专栏用户7873631的专栏
dom啦9 定时器大详解
button id="start">开始</button> <button id="close">结束</button> <script type="text/javascript"> //js定时器分为重复执行与一次执行
49410发布于 2020-10-28 - 来自专栏无原型不设计
超大触摸屏设计的7大注意事项
由于台式电脑的规模和尺寸更大，此类触摸屏的设计可能会给设计师带来一些独特的挑战。 当你习惯了用拇指大小的区域来做屏幕设计时，你如何去设计超大触摸屏？ 这里笔者整理了一个关于超大触摸屏的设计指南，为设计师们设计用户交互提供灵感。 用户在公共场所中使用大屏设备，并不意味着他们希望其他人知道自己在做什么，特别是在输入一些重要信息时。而屏幕越大，其他人就越有可能看到用户输入的内容。 结论 你是否有过对超大触摸屏设计的经验？这种触摸屏的设计已经成为一种流行的趋势。就算目前你还没有做过此类的设计，相信不久你也会接触到。 虽然大多数设计原则和其他基于界面的设计是一样的，但是超大触摸屏的尺寸以及尺寸的调整会让很多设计师无所适从。所以，当你在公共场合看到超大触摸屏时，不如停下来在界面上操作一下，感受一下它的交互设计。
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、确定大屏的设计风格 大屏的设计风格需要依旧对应的行业类型、指标数据、客户需求等进行整体搭配，总体分为两种风格： 那针对大屏设计给大家推荐一个公开课，保证让你看完受益匪浅，除此之外，联系对应的小助手 9、确定大屏 上面步骤均完成时，一个初稿看板就设计完成了，此时需要对它的细节进行检查调整，如果说我们不知道如何检查，可以从这几个方面去检查，比如检查看板的页面布局是否合理；组件是否发生变形拉伸；组件数据展示是否正确
2.3K50编辑于 2023-02-24 - 来自专栏码客
Android 适配18:9全面屏适配
前言 2017年是全面屏爆发的大热潮，18:9屏幕的相拥而来，在使用18:9等非传统16:9的手机之后，部分手机应用出现了上下黑边。 android:name="android.max_aspect" android:value="2.1" /> </application> 目前我主要用到第二种方式来适配18:9的全面屏
1.3K20发布于 2019-10-22 - 来自专栏XC's Blog 日常笔记
前端大屏方案
就像我朋友遇到的情况，16:9 的设计稿放到 32:9 的拼接屏上，两边各空一大块。你可以选择拉伸（Math.max），但内容会变形。 适用场景 固定比例的纯展示大屏，没有复杂交互，交付时间紧。 ': { rootValue: 16, propList: ['*'], minPixelValue: 2 } } } 我的看法 说实话，rem 方案在大屏场景下有点过度设计 实战选型决策树 你的大屏需要适配多种比例吗？ ├── 不需要（固定 16:9） │ └── 有复杂交互吗？ 如果是 4K 屏，设计稿按 3840×2160 出，但开发时可以按 1920×1080 写，浏览器会自动处理设备像素比。 Q：scale 方案字体模糊怎么办？ A：没有完美解决方案。 Q：大屏需要适配移动端吗？ A：一般不需要。大屏就是大屏，手机打开看的场景极少。如果甲方非要，建议做两套页面，用媒体查询切换，而不是一套代码适配所有。 总结 大屏适配没有银弹。
22810编辑于 2026-05-08 直屏回归！荣耀Magic9告别曲面屏痛点！
4月28日，数码博主@关同学GiM 爆料，荣耀Magic9系列预计今年10月正式发布，最让人惊喜的一点的是——该系列将全系采用直屏设计，从标准版到Pro Max，彻底告别曲面屏。 一、不是倒退，是技术成熟与用户需求的双向奔赴 有的人觉得荣耀Magic9放弃曲面屏是“降配”“妥协”，但我不这么认为。 荣耀Magic9选择全系直屏，恰恰是抓住了核心：如今LIPO低压注塑封装技术已经成熟，能将直屏边框压缩至1毫米左右，屏占比突破95%，视觉沉浸感完全不输曲面屏，再加上2.5D玻璃的圆润过渡，握持手感也不会生硬 二、直屏回归的背后，是行业内卷的“降温”与反思 荣耀Magic9的直屏选择，不是个例，而是整个行业的缩影——华为Mate80、小米15、OPPO Find X8等旗舰早已陆续回归直屏，2026年直屏旗舰占比预计突破 最后谈谈我的看法，我觉得这次荣耀Magic9的爆料，最有价值的不是全系直屏本身，而是它传递的行业信号：手机设计终于从“厂商炫技”回归“用户实用”。
31510编辑于 2026-05-08- 来自专栏Qt项目实战
Qt编写数据可视化大屏界面电子看板9-曲线效果
一、前言 为了编写数据可视化大屏界面电子看板系统，为了能够兼容Qt4和嵌入式linux系统，尤其是那种主频很低的，但是老板又需要在这种硬件上（比如树莓派、香橙派、全志H3、imx6）展示这么华丽的界面时 在整个数据可视化大屏界面电子看板系统中，自定义出来的曲线效果包括鼠标移动到对应数据点高亮显示，并在一旁弹出tootip提示信息显示更详细的数据，这个提示信息的位置还要能根据点的位置自动调整以便显示全部， 如果使用的默认的默认的配色方案比如紫色风格，则配置文件中的颜色全部无效，会自动应用代码中的颜色，如果需要启用自定义的颜色，则将配置文件的 Theme=\x81ea\x5b9a\x4e49\x98ce\x683c 六、效果图 [f9bf8ff288a5493fcdf677fe6daef61abd1.jpg]
2.2K40发布于 2019-08-20 - 来自专栏vivo互联网技术
从0到1设计通用数据大屏搭建平台
本文将通过敏捷BI平台的通用大屏搭建能力的实现方案，来讲解一下通用可视化搭建平台整体的设计思路。 这里简单的做一下介绍：大屏和报表看板都只是BI的其中一种展现方式，大屏更多是通过不同尺寸的显示器硬件上进行投屏，而报表看板更多是在电脑端进行展示使用。 管理中心：是大屏的后台运营管理模块，包含了大屏模版管理、大屏发布下线、访问权限等管理功能。 五、效果预览六、总结本文通过可视化页面搭建、no/low code 平台、Schema 动态表单等技术思想来分析讲解了如何去设计开发一个通用的数据大屏搭建平台。 当前的设计方案基本满足了数据大屏的核心能力搭建需求。
4.5K40编辑于 2022-10-17 - 来自专栏XC's Blog 日常笔记
大屏自适应方案
abbrlink: ‘0’ 引言：大屏适配的痛点与破局之道 在数据可视化大屏项目中，开发者常常面临这样的困境：同样的设计稿，在1920×1080屏幕上完美显示，到了3840×2160或1366×768的屏幕上却面目全非 今天，我将分享一种JS+CSS协同作战的大屏自适应方案，它不仅解决了适配问题，还保持了代码的优雅与可维护性。 一、方案核心思想：视窗单位+动态计算 1.1 为什么选择vw/vh？ 但在大屏场景下，这些方案各有局限： rem：依赖根字体大小，复杂场景计算繁琐 百分比：依赖父元素，多层嵌套时难以维护 媒体查询：断点固定，无法实现连续自适应 vw/vh单位基于视窗尺寸，天生适合大屏适配 媒体查询中的自适应 @media (max-aspect-ratio: 16/9) { .sidebar { width: vw(200); // 横屏特殊处理 } } 4.2 根据项目需求和团队习惯，灵活选择组合策略，才能打造出既美观又实用的大屏应用。
24310编辑于 2026-05-08 - 来自专栏樯橹代码
公司大屏开发心得
大屏开发心得 布局篇 因为大屏不是对外开放的，所以可以使用固定的浏览器。既然这样其实是可以使用一些相对比较新的技术的。所以在布局这块我优先选择使用flexbox技术。 因为大屏屏幕很大，设计师给出的设计图通常会有很大的尺寸。其实设计师并不知道的是大屏屏幕在再大，也不过就是一个显示屏的尺寸。其实那这块需要的就是一个等比缩放。 因为只要把量出来设计稿的实际尺寸，直接设置在flex上就可以了。 比如设计稿尺寸是3200px，对应到flex上就是flex: 3200。 大屏模糊的问题 大屏一般都是多块屏幕拼凑起来的一整块屏。 设计稿给的一个页面。开始的时候我们是按照一个页面进行开发的。但是投到一个大屏的时候问题来了，因为放的很大，锯齿很严重。 所以后来还是把大屏分开了，设计稿的每个部分拆成一个页面，每个小屏幕显示一个页面。 即便字号很小也会显示很大（chrome默认最小字号是12px，如果需要显示更小，需要修改浏览器配置）。分开就不会有这个问题了
1.8K20发布于 2019-09-02 - 来自专栏腾讯社交用户体验设计
简而未减-结构化消息专为大屏而设计
在我们的社交平台上，用户消息在多个终端设备传递中，产品功能只是在原有基础上简单粗暴放大而已，那么大屏手机/平板电脑存在的价值化为乌有。 ---- ? ---- 1.以消息为主的结构化设计: 不论是资讯分享、音乐分享、视频分享不以内容区分而设计，都在一种载体内呈现，这种结构虽普适性强，可以兼容多元化的场景。 但因设计形态统一，导致在内容辨识度上也有所下降，内容设计上没有各自特点，用户在浏览过程中容易忽略内容本质。 ? Flickr的一组数据显示，随着iPhone很大程度上替代单反成为主流拍照设备，4:3和16:9的图片数量占比追上了传统摄影的3:2。而16:9更接近美学比例，黄金分割。 ? 但如果用户快速转发了很多内容时，在兼容小屏设备时，屏幕利用率会有所下降。在iPhone7Plus设备上，同样大小的信息在一屏内展示2-2.5条。用户需要在纵向滑动多次才能抵达下一个信息类别。
1.1K40发布于 2018-06-29 实时数据可视化与数据大屏设计深度分析
在当今数字化时代，实时数据可视化和数据大屏设计已成为企业决策和运营的关键工具。 数据大屏设计 腾讯云RayData 提供了强大的数据大屏设计能力，支持自定义组件和模板，能够快速构建高度定制化的数据展示界面。 低代码可视化分析 则更侧重于通过图形化界面，让用户通过拖拽组件的方式快速构建数据大屏，减少了编码工作量，提高了开发效率。 多屏互动 在多屏互动方面，低代码可视化分析 和 数字孪生可视化 提供了跨平台和设备的展示能力，允许用户在不同设备上查看和交互数据。 综上所述，实时数据可视化和数据大屏设计在现代企业中扮演着越来越重要的角色。通过合理选择和应用这些工具和技术，企业能够更有效地管理和分析数据，从而做出更明智的决策。
24710编辑于 2025-07-28
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号