- 综合排序
- 最热优先
- 最新优先
超级好用开源大屏设计器!
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.9K10编辑于 2025-12-31- 来自专栏京东技术
供应链大屏设计实践
数据链路的稳定性 接口服务的兜底 指标准确性的验证机制 重算机制 本文内容有限，很多设计的小细节未能体现，感兴趣的欢迎交流，希望上述内容对正在从事大屏建设的同学有一些新的启发和思考。 01 背景 在今年的敏捷团队建设中，我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢？由此我的Runner探索之旅开始了！ 供应链大屏是供应链事业部重要的看数工具，尤其在大促期间，为业务管理层掌握大促实时动态提供了支撑，为事业部的目标达成、排产提供重要的数据支持。 3）大屏结果分钟级落库，并通过Grafana,创建大屏数据监控看板，持续监控大屏数据，通过异常拐点发现问题点，避免遗漏问题。并结合不同看板分析数据趋势及变化原因。 4）结合大屏计算逻辑，通过京东动力搭建测试模型，做到自由指定时间计算大屏指标明细，验证分析大屏数据。
81010编辑于 2024-07-04 - 来自专栏计算机图形学 前端可视化 WebGL
拓扑大屏三维编辑器的设计与思考
从去年年初开始，我们团队内部就在做两个编辑器： 3d编辑器 支持搭建3d场景。 拓扑/大屏编辑器 支持搭建大屏/拓扑/组态场景。 下面是几个项目的示例图： [示例图] [示例图2] [示例图3] [示例图4] 中间是一个三维场景，使用三维编辑器编辑而成，周边是一些大屏元素，使用大屏编辑器编辑。 和一般的大屏编辑器不同，我们的大屏编辑器不仅支持大屏元素的排布，也支持分层拓扑图，架构图，交通图等，以及组态功能。 基于canvas + HTML5元素共同开发，能够支持更多丰富的功能和效果。 通过派发事件和接受事件来展示和隐藏内容，效果是可以的，问题在于易用性并不好，通过编辑器实现起来复杂，一般的实施人员用起来难度大。 总结 上面是一些设计与思考，主要是基于拓扑/大屏编辑器的思考。为了有更好的产品，我们一直在努力的架构，设计与思考。 有关三维编辑器，有很多类似的设计理念，以后又机会再说。
1.3K30发布于 2020-11-11 数据大屏交互设计案例详解 | 基于smardaten实现智慧交通监测大屏
而现代智慧交通大屏，利用可视化的方式整合多源数据，一屏即可实现全域感知和综合监测，又利用各类交互设计，提升数据大屏的联动能力，加快决策过程。 点击跳转：大屏中各组件支持点击事件，例如针对指标卡可以实现点击跳转的功能，实现从宏观指标到微观详情的快速穿透。 三、配置过程进入平台后，选择交通监测系统，进入数据大屏的配置页。在数据大屏中支持多种交互动作，其中交互组件作为与用户直接交互的核心元素，包含按钮、导航、输入框等多种类型。3.1. 回到数据大屏的配置页，将地址填入并绑定“车牌号” 作为跳转参数，确保查询结果与输入的车牌号精准匹配。完成后，我们预览测试一下。 交互能力多，支撑多维度分析：覆盖页面导航、图表联动、下钻分析、过滤筛选等能力，使大屏从静态展示升级为“宏观到微观” 的数据探索工具，助力用户深入洞察，提升决策质量与效率。
81710编辑于 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设计一个数据大屏。 一、积木BI大屏介绍 积木BI可视化数据大屏 是一站式数据可视化展示平台，旨在帮助用户快速通过可视化图表展示海量数据，10 分钟零门槛打造出专业大屏数据展示。 大屏设计器支持多种数据来源配置，支持数据实时同步更新，同时大屏设计器基于 WEB 页面渲染，可灵活投屏多种屏幕终端。 精心预设多种行业模板，极致展示数据魅力。 创建大屏 点击“新建”，弹出新建数据大屏弹框，输入大屏名称，选择文件夹，点击“保存并设计”即创建了大屏 可重新选择大屏的背景色或背景图片。 2. ，即可设计完整大屏了。
1.2K10编辑于 2024-12-13- 来自专栏无原型不设计
超大触摸屏设计的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/
30610编辑于 2026-05-14 - 来自专栏区块链入门
叶开：Token设计画布与10大设计模式
Token经济设计专家叶开，通过多年的企业实践经验总结而出的Token设计画布与10大设计模式，为企业提供最全面的实现参考。 叶开在机械工业出版社华章分社即将出版的新书《Token经济设计模式与方法论》的前言中说道：“我们还将传统产业可能涉及到的Token模式提炼成为十大类型的模式，每个模式进行了详细定义和业务模式分解、Token 而同时叶开也结合实践总结出了Token经济模式设计画布及10大设计模式。 Token经济的10大设计模式 为了传统企业能够简单便捷的理解Token和Token的设计，叶开提炼了10类Token模式，这些模式可以帮助传统企业快速理解Token的变化和组合，并且可以作为模板来分析和套用自己企业相对应的 本文转载自《专访Token经济设计专家叶开：Token设计画布与10大设计模式》，版权属于原作者
1.1K40发布于 2018-08-10 - 来自专栏葡萄城控件技术团队
数据可视化大屏设计必备步骤
相信对于从事大数据相关的人员来说，数据的可视化大屏是最能展现自己工作价值的一个途径。可视化大屏就是数据分析的最后成果的展示，而如果能设计出更直观、更酷炫、更具有科技感的大屏，更能获得客户的青睐。 类似下图这种的： 还是这种的： 那好看的，令客户满意的可视化大屏究竟应该如何制作呢，下面我们就来一起了解和学习一下设计可视化大屏的几大必备步骤，保你设计无忧，工作越干越得劲。 2、确定物理大屏尺寸，明确设计稿的尺寸 看板设计好后均是要在大屏上进行展示，所以要提前确定好对应的物理大屏尺寸，这样设计出来的大屏才能获得最好的视觉体验，也会展示的更加完美。 注意：若物流大屏分辨率过高时，可以采用分辨率减半的设计方法去进行设计。 3、确定大屏展示的关键指标 确定好大屏尺寸后，就需要确定大屏展示的关键指标内容，那什么是关键指标呢？ 6、确定大屏的设计风格 大屏的设计风格需要依旧对应的行业类型、指标数据、客户需求等进行整体搭配，总体分为两种风格： 那针对大屏设计给大家推荐一个公开课，保证让你看完受益匪浅，除此之外，联系对应的小助手
2.4K50编辑于 2023-02-24 - 来自专栏XC's Blog 日常笔记
前端大屏方案
就像我朋友遇到的情况，16:9 的设计稿放到 32:9 的拼接屏上，两边各空一大块。你可以选择拉伸（Math.max），但内容会变形。 适用场景 固定比例的纯展示大屏，没有复杂交互，交付时间紧。 ': { rootValue: 16, propList: ['*'], minPixelValue: 2 } } } 我的看法 说实话，rem 方案在大屏场景下有点过度设计 ── 布局：vw/vh ├── 字体：clamp() ├── 图表：JS 动态计算 └── 组件：Container Queries 常见 FAQ Q：大屏一般用什么设计稿尺寸 如果是 4K 屏，设计稿按 3840×2160 出，但开发时可以按 1920×1080 写，浏览器会自动处理设备像素比。 Q：scale 方案字体模糊怎么办？ A：没有完美解决方案。 Q：大屏需要适配移动端吗？ A：一般不需要。大屏就是大屏，手机打开看的场景极少。如果甲方非要，建议做两套页面，用媒体查询切换，而不是一套代码适配所有。 总结 大屏适配没有银弹。
27110编辑于 2026-05-08 - 来自专栏Python机器学习算法说书人
Python设计模式（10）：迭代器模式
导言 在面向对象的软件设计中，如果一个系统有比较复杂的数据结构，客户程序往往没有必要详细地知道其内部的实现。为了使用方便，该系统应该提供给客户程序一种遍历方法。 本节介绍如何给复杂的聚合型数据结构提供一个遍历方法的设计模式——迭代器模式（Iterator Pattern）。 迭代器模式的关键思想是将对列表的访问和便利从列表对象中分离出来，放入一个独立的迭代器对象中。迭代器类定义了访问该列表元素的接口。 这些具体的迭代器类都实现同一个接口 Iterator。其好处可以为类似（但是不同）的聚合类设计/实现出类似（但是不同）的迭代器，便于复用。 class ConcreteAggregate(Aggregate): def __init__(self): self.data_structure = list(range(10
1K10发布于 2019-07-26 - 来自专栏喔家ArchiSelf
大模型应用设计的10个思考
基于大模型的应用设计需要聚焦于所解决的问题，在自然语言处理领域，大模型本身在一定程度上只是将各种NLP任务统一成了sequence 到 sequence 的模型。 利用大模型， 我们是在解决具体的生产和生活中的问题，产品和技术上的设计仍然不可或缺。 那么，如果大模型正在重新构建软件工程的未来，我们是否应该遵循一些基本原则呢？ 1. 语法和语义之间的界限，正是大模型应用设计的主要挑战。在这个背景下，我们需要更深入地理解代码与模型各自的优缺点，以便更为有效地利用它们解决问题。 事实上，模型还可以作为代码的安全监视器，确保代码的运行安全；它也可以作为测试策略的一个组件，帮助我们制定更为有效的测试方案；甚至可以作为内容过滤器，协助我们生成高质量的内容。 10. 识别边界，不要认为大模型无所不能 大语言模型的能力确实令人惊叹，它们可以处理和解析大量的文本数据，生成有逻辑和连贯性的文本，甚至在某些任务上超越了人类的表现。
67010编辑于 2023-12-04 - 来自专栏互联网数据官iCDO
现代网页设计的10大要素
引言：哪些设计元素来提高网站的用户体验和转化率？成功的网站必然也共享一些普世性的设计元素，作者Helen Miller将在本文为您一一呈现 。 译者|Amber LI 审校|Sarah 编辑|华 子 你会使用哪些设计元素来提高网站的用户体验和转化率？ 但设计一个成功的网站，知悉新出现的设计潮流，或什么设计元素值得重点考虑仍然是非常必要的。当然，不同的网站对应不同的目标而打造，所以它们未必具有一致性。然而，成功的网站必然也共享一些普世性的设计元素。 下面是考虑设计这些设计元素的检查清单。 1.图片需要够大，够吸引人，且有自适应性 ? 当你设计网站时，视觉对网站访客的影响是一个非常重要的考虑因素，尤其是对网站主页而言。 10.保持联系：联络我们和社交媒体 要想与你的访客进行常规且有效的沟通，将联络我们的信息进行恰当的展示非常重要。你可以在联系我们页面中提供电话号码、电邮、邮寄地址等等。
1.4K50发布于 2018-09-30 - 来自专栏vivo互联网技术
从0到1设计通用数据大屏搭建平台
本文将通过敏捷BI平台的通用大屏搭建能力的实现方案，来讲解一下通用可视化搭建平台整体的设计思路。 这里简单的做一下介绍：大屏和报表看板都只是BI的其中一种展现方式，大屏更多是通过不同尺寸的显示器硬件上进行投屏，而报表看板更多是在电脑端进行展示使用。 管理中心：是大屏的后台运营管理模块，包含了大屏模版管理、大屏发布下线、访问权限等管理功能。 五、效果预览六、总结本文通过可视化页面搭建、no/low code 平台、Schema 动态表单等技术思想来分析讲解了如何去设计开发一个通用的数据大屏搭建平台。 当前的设计方案基本满足了数据大屏的核心能力搭建需求。
4.5K40编辑于 2022-10-17 - 来自专栏樯橹代码
公司大屏开发心得
大屏开发心得 布局篇 因为大屏不是对外开放的，所以可以使用固定的浏览器。既然这样其实是可以使用一些相对比较新的技术的。所以在布局这块我优先选择使用flexbox技术。 因为大屏屏幕很大，设计师给出的设计图通常会有很大的尺寸。其实设计师并不知道的是大屏屏幕在再大，也不过就是一个显示屏的尺寸。其实那这块需要的就是一个等比缩放。 因为只要把量出来设计稿的实际尺寸，直接设置在flex上就可以了。 比如设计稿尺寸是3200px，对应到flex上就是flex: 3200。 大屏模糊的问题 大屏一般都是多块屏幕拼凑起来的一整块屏。 设计稿给的一个页面。开始的时候我们是按照一个页面进行开发的。但是投到一个大屏的时候问题来了，因为放的很大，锯齿很严重。 所以后来还是把大屏分开了，设计稿的每个部分拆成一个页面，每个小屏幕显示一个页面。 即便字号很小也会显示很大（chrome默认最小字号是12px，如果需要显示更小，需要修改浏览器配置）。分开就不会有这个问题了
1.8K20发布于 2019-09-02 - 来自专栏XC's Blog 日常笔记
大屏自适应方案
abbrlink: ‘0’ 引言：大屏适配的痛点与破局之道 在数据可视化大屏项目中，开发者常常面临这样的困境：同样的设计稿，在1920×1080屏幕上完美显示，到了3840×2160或1366×768的屏幕上却面目全非 今天，我将分享一种JS+CSS协同作战的大屏自适应方案，它不仅解决了适配问题，还保持了代码的优雅与可维护性。 一、方案核心思想：视窗单位+动态计算 1.1 为什么选择vw/vh？ 但在大屏场景下，这些方案各有局限： rem：依赖根字体大小，复杂场景计算繁琐 百分比：依赖父元素，多层嵌套时难以维护 媒体查询：断点固定，无法实现连续自适应 vw/vh单位基于视窗尺寸，天生适合大屏适配 在开发大屏项目时，我的建议是： 基础布局使用CSS：利用SCSS函数保持代码简洁 动态内容使用JS：利用工具类保持灵活性 关键组件混合使用：结合两者优势实现最佳效果 记住：没有最好的方案，只有最适合的方案 根据项目需求和团队习惯，灵活选择组合策略，才能打造出既美观又实用的大屏应用。
28910编辑于 2026-05-08 - 来自专栏樯橹代码
大屏数据显示优化
大屏数据显示优化 大屏数据的页面里面包含了一些3D地图和世界航班趋势图，反应上来有个问题，就是动画比较卡顿。 清晰度太高的图片，浏览器处理起来也是有很明显的卡顿，尤其是图片切换到时候。而大屏像素很低，高清的图片也显示的像素点很大，看起来非常模糊，所以并没有必要使用高清的。
5.2K20发布于 2019-09-02 - 来自专栏腾讯社交用户体验设计
简而未减-结构化消息专为大屏而设计
在我们的社交平台上，用户消息在多个终端设备传递中，产品功能只是在原有基础上简单粗暴放大而已，那么大屏手机/平板电脑存在的价值化为乌有。 ---- ? 案例分析：这种结构化消息是目前国内主流的一种设计形态。 ? ---- 1.以消息为主的结构化设计: 不论是资讯分享、音乐分享、视频分享不以内容区分而设计，都在一种载体内呈现，这种结构虽普适性强，可以兼容多元化的场景。 但因设计形态统一，导致在内容辨识度上也有所下降，内容设计上没有各自特点，用户在浏览过程中容易忽略内容本质。 ? 但如果用户快速转发了很多内容时，在兼容小屏设备时，屏幕利用率会有所下降。在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号