- 综合排序
- 最热优先
- 最新优先
- 来自专栏京东技术
供应链大屏设计实践
数据链路的稳定性 接口服务的兜底 指标准确性的验证机制 重算机制 本文内容有限，很多设计的小细节未能体现，感兴趣的欢迎交流，希望上述内容对正在从事大屏建设的同学有一些新的启发和思考。 供应链大屏是供应链事业部重要的看数工具，尤其在大促期间，为业务管理层掌握大促实时动态提供了支撑，为事业部的目标达成、排产提供重要的数据支持。 2.4 稳定性设计 由于数据链路长，稳定性较差，问题主要集中在Flink、CH环节，恢复周期长。 3）大屏结果分钟级落库，并通过Grafana,创建大屏数据监控看板，持续监控大屏数据，通过异常拐点发现问题点，避免遗漏问题。并结合不同看板分析数据趋势及变化原因。 4）结合大屏计算逻辑，通过京东动力搭建测试模型，做到自由指定时间计算大屏指标明细，验证分析大屏数据。
62610编辑于 2024-07-04 数据大屏交互设计案例详解 | 基于smardaten实现智慧交通监测大屏
而现代智慧交通大屏，利用可视化的方式整合多源数据，一屏即可实现全域感知和综合监测，又利用各类交互设计，提升数据大屏的联动能力，加快决策过程。 点击跳转：大屏中各组件支持点击事件，例如针对指标卡可以实现点击跳转的功能，实现从宏观指标到微观详情的快速穿透。 三、配置过程进入平台后，选择交通监测系统，进入数据大屏的配置页。在数据大屏中支持多种交互动作，其中交互组件作为与用户直接交互的核心元素，包含按钮、导航、输入框等多种类型。3.1. 回到数据大屏的配置页，将地址填入并绑定“车牌号” 作为跳转参数，确保查询结果与输入的车牌号精准匹配。完成后，我们预览测试一下。 交互能力多，支撑多维度分析：覆盖页面导航、图表联动、下钻分析、过滤筛选等能力，使大屏从静态展示升级为“宏观到微观” 的数据探索工具，助力用户深入洞察，提升决策质量与效率。
50310编辑于 2025-10-29- 来自专栏趣谈前端
从零设计可视化大屏搭建引擎
相关文章: 从零开发一款可视化大屏制作平台 演示地址: V6可视化大屏编辑器 作者: 徐小夕 几个月前我写了一篇关于从零开发一款可视化大屏制作平台 的文章， 简单概述了一下可视化大屏搭建平台的一些设计思路和效果演示 ， 这篇文章我会就 如何设计可视化大屏搭建引擎 这一主题， 详细介绍一下实现原理。 按照我一向的写作风格， 我会在下面列出文章的大纲，以便大家有选择且高效率的阅读和学习: 快速了解数据可视化 如何设计通用的大屏搭建引擎 大屏搭建引擎核心功能实现 拖拽器实现 物料中心设计 动态渲染器实现 综上我们总结出了可视化大屏的必备要素: 我们只要充分的理解了可视化大屏的组成和特征， 我们才能更好的设计可视化大屏搭建引擎， 基于以上分析， 我设计了一张基础引擎的架构图: 接下来我就带大家一起来拆解并实现上面的搭建引擎 物料中心设计 物料中心主要为大屏页面提供“原材料”。为了设计健壮且通用的物料， 我们需要设计一套标准组件结构和属性协议。
1.7K40编辑于 2022-02-09 - 来自专栏博文视点Broadview
如何进行可视化大屏视觉设计？
在大屏的设计中，12px 的字号会显得较小，因为大屏本身很大，观者都是站在较远的地方才能看清全貌。 对于不同比例的大屏，字号的选择依据也会有一定的差异。 图2 02 大屏设计布局解析 大屏设计的四个流程有：需求调研、数据分析、产品设计、可行性测试。 在暗色调设计的基础上，设计师还要结合行业属性来定义大屏整体的色调风格。 大屏要有看点 一个铺满文字和图表的大屏，很难让人产生观赏情绪，因此大屏的设计一定要有看点。 看点可以理解为大屏的主视觉元素，一般面积占比较大，用于即刻抓住观者眼球。 美感不是唯一的，大屏设计还需要情感认同 虽然美感很重要，但并不是大屏设计唯一的追求，真正能让用户叹为观止的一定是情感上的调动。
1K00编辑于 2023-05-06 【开源大屏】玩转开源的积木BI，从0到1设计一个大屏
让我们一起来看一下如何从0到1设计一个数据大屏。 大屏设计器支持多种数据来源配置，支持数据实时同步更新，同时大屏设计器基于 WEB 页面渲染，可灵活投屏多种屏幕终端。 精心预设多种行业模板，极致展示数据魅力。 二、积木大屏安装/集成 支持maven本地集成或在线使用 本示例以本地安装为例；本地安装完成后，进入大屏后台；就可以开始大屏制作了。 三、大屏设计步骤 1. 创建大屏 点击“新建”，弹出新建数据大屏弹框，输入大屏名称，选择文件夹，点击“保存并设计”即创建了大屏 可重新选择大屏的背景色或背景图片。 2. ，即可设计完整大屏了。
99410编辑于 2024-12-13超级好用开源大屏设计器!
在传统 BI 工具动辄需要 SQL 编写、DAX 公式或复杂配置的背景下，DataRoom 的核心理念是：让业务人员也能成为大屏设计师。 二、工具优势一站式大屏解决方案，从数据源接入->数据清洗处理->大屏设计->大屏预览->大屏发布上线支持多种数据集接入，如：原始数据集、自助数据集(支持多表关联)、存储过程、JSON(静态数据)、JS脚本 2、资源库驱动设计内置上百种国产化风格素材：科技感边框、渐变背景、动态粒子、3D 地球等；支持上传企业 VI 元素（如 LOGO、品牌色卡），确保大屏符合统一视觉规范。 4、组件复用与二次开发设计好的“疫情热力图模块”可保存为业务组件，在其他大屏中一键复用；开发者可通过离线模式扩展系统组件，例如集成 AntV L7 实现地理空间分析。 三、功能介绍1、大屏管理支持大屏【新增】、【编辑】、【设计】、【预览】、【复制】、【删除】操作2、大屏设计器采用拖拉拽可视化设计，支持30+基础组件、40+种图表组件、15种边框组件、10多种修饰组件3
94810编辑于 2025-12-31- 来自专栏无原型不设计
超大触摸屏设计的7大注意事项
由于台式电脑的规模和尺寸更大，此类触摸屏的设计可能会给设计师带来一些独特的挑战。 当你习惯了用拇指大小的区域来做屏幕设计时，你如何去设计超大触摸屏？ 这里笔者整理了一个关于超大触摸屏的设计指南，为设计师们设计用户交互提供灵感。 用户在公共场所中使用大屏设备，并不意味着他们希望其他人知道自己在做什么，特别是在输入一些重要信息时。而屏幕越大，其他人就越有可能看到用户输入的内容。 结论 你是否有过对超大触摸屏设计的经验？这种触摸屏的设计已经成为一种流行的趋势。就算目前你还没有做过此类的设计，相信不久你也会接触到。 虽然大多数设计原则和其他基于界面的设计是一样的，但是超大触摸屏的尺寸以及尺寸的调整会让很多设计师无所适从。所以，当你在公共场合看到超大触摸屏时，不如停下来在界面上操作一下，感受一下它的交互设计。
2K70发布于 2018-02-11 - 来自专栏葡萄城控件技术团队
数据可视化大屏设计必备步骤
相信对于从事大数据相关的人员来说，数据的可视化大屏是最能展现自己工作价值的一个途径。可视化大屏就是数据分析的最后成果的展示，而如果能设计出更直观、更酷炫、更具有科技感的大屏，更能获得客户的青睐。 类似下图这种的： 还是这种的： 那好看的，令客户满意的可视化大屏究竟应该如何制作呢，下面我们就来一起了解和学习一下设计可视化大屏的几大必备步骤，保你设计无忧，工作越干越得劲。 2、确定物理大屏尺寸，明确设计稿的尺寸 看板设计好后均是要在大屏上进行展示，所以要提前确定好对应的物理大屏尺寸，这样设计出来的大屏才能获得最好的视觉体验，也会展示的更加完美。 注意：若物流大屏分辨率过高时，可以采用分辨率减半的设计方法去进行设计。 3、确定大屏展示的关键指标 确定好大屏尺寸后，就需要确定大屏展示的关键指标内容，那什么是关键指标呢？ 6、确定大屏的设计风格 大屏的设计风格需要依旧对应的行业类型、指标数据、客户需求等进行整体搭配，总体分为两种风格： 那针对大屏设计给大家推荐一个公开课，保证让你看完受益匪浅，除此之外，联系对应的小助手
2.2K50编辑于 2023-02-24 - 来自专栏vivo互联网技术
从0到1设计通用数据大屏搭建平台
本文将通过敏捷BI平台的通用大屏搭建能力的实现方案，来讲解一下通用可视化搭建平台整体的设计思路。 管理中心：是大屏的后台运营管理模块，包含了大屏模版管理、大屏发布下线、访问权限等管理功能。 ：大屏的后期维护需要有版本发布自更新以及大屏下线等需求，这个时候就需要有一套消息通知机制，通过命令来控制大屏的运行状态。 五、效果预览六、总结本文通过可视化页面搭建、no/low code 平台、Schema 动态表单等技术思想来分析讲解了如何去设计开发一个通用的数据大屏搭建平台。 当前的设计方案基本满足了数据大屏的核心能力搭建需求。
4.2K40编辑于 2022-10-17 - 来自专栏樯橹代码
公司大屏开发心得
大屏开发心得 布局篇 因为大屏不是对外开放的，所以可以使用固定的浏览器。既然这样其实是可以使用一些相对比较新的技术的。所以在布局这块我优先选择使用flexbox技术。 因为大屏屏幕很大，设计师给出的设计图通常会有很大的尺寸。其实设计师并不知道的是大屏屏幕在再大，也不过就是一个显示屏的尺寸。其实那这块需要的就是一个等比缩放。 所以在布局之前需要首先设置的是外框尺寸 html, body { height: 100%; } 大屏首先要把要把这种尺寸的差异解决，这就体现出来flexbox的优势了。 因为只要把量出来设计稿的实际尺寸，直接设置在flex上就可以了。 比如设计稿尺寸是3200px，对应到flex上就是flex: 3200。 大屏模糊的问题 大屏一般都是多块屏幕拼凑起来的一整块屏。 设计稿给的一个页面。开始的时候我们是按照一个页面进行开发的。但是投到一个大屏的时候问题来了，因为放的很大，锯齿很严重。 所以后来还是把大屏分开了，设计稿的每个部分拆成一个页面，每个小屏幕显示一个页面。
1.7K20发布于 2019-09-02 - 来自专栏樯橹代码
大屏数据显示优化
大屏数据显示优化 大屏数据的页面里面包含了一些3D地图和世界航班趋势图，反应上来有个问题，就是动画比较卡顿。 而大屏像素很低，高清的图片也显示的像素点很大，看起来非常模糊，所以并没有必要使用高清的。把图片质量降低一些，切换卡顿就不见了，显示却并没有特别的变化。
5K20发布于 2019-09-02 - 来自专栏腾讯社交用户体验设计
简而未减-结构化消息专为大屏而设计
在我们的社交平台上，用户消息在多个终端设备传递中，产品功能只是在原有基础上简单粗暴放大而已，那么大屏手机/平板电脑存在的价值化为乌有。 ---- ? 案例分析：这种结构化消息是目前国内主流的一种设计形态。 ? ---- 1.以消息为主的结构化设计: 不论是资讯分享、音乐分享、视频分享不以内容区分而设计，都在一种载体内呈现，这种结构虽普适性强，可以兼容多元化的场景。 但因设计形态统一，导致在内容辨识度上也有所下降，内容设计上没有各自特点，用户在浏览过程中容易忽略内容本质。 ? 但如果用户快速转发了很多内容时，在兼容小屏设备时，屏幕利用率会有所下降。在iPhone7Plus设备上，同样大小的信息在一屏内展示2-2.5条。用户需要在纵向滑动多次才能抵达下一个信息类别。
1K40发布于 2018-06-29 实时数据可视化与数据大屏设计深度分析
在当今数字化时代，实时数据可视化和数据大屏设计已成为企业决策和运营的关键工具。 数据大屏设计 腾讯云RayData 提供了强大的数据大屏设计能力，支持自定义组件和模板，能够快速构建高度定制化的数据展示界面。 低代码可视化分析 则更侧重于通过图形化界面，让用户通过拖拽组件的方式快速构建数据大屏，减少了编码工作量，提高了开发效率。 多屏互动 在多屏互动方面，低代码可视化分析 和 数字孪生可视化 提供了跨平台和设备的展示能力，允许用户在不同设备上查看和交互数据。 综上所述，实时数据可视化和数据大屏设计在现代企业中扮演着越来越重要的角色。通过合理选择和应用这些工具和技术，企业能够更有效地管理和分析数据，从而做出更明智的决策。
20710编辑于 2025-07-28实时数据可视化与数据大屏设计深度分析
在当前大数据时代，实时数据可视化和数据大屏设计成为了企业决策和运营中不可或缺的工具。 我们将从数据大屏设计、3D场景渲染、实时数据接入、多屏互动、可视化模板、数据动画和自定义组件等方面进行对比，以期为读者提供一个全面、客观的视角。 数据大屏设计 数据大屏设计是指在大屏幕上展示关键数据和业务指标，以便于监控和分析。 腾讯云RayData提供了强大的数据大屏设计能力，支持多种数据源的接入和丰富的图表类型，使得数据展示更加直观和生动^1。低代码可视化分析则更侧重于用户自定义，允许用户通过拖拽组件快速构建数据大屏^2。 数据大屏设计. Retrieved from 腾讯云官网 ^2: LowCode可视化平台. (2023). 低代码可视化分析.
19410编辑于 2025-07-28- 来自专栏计算机图形学 前端可视化 WebGL
拓扑大屏三维编辑器的设计与思考
拓扑/大屏编辑器 支持搭建大屏/拓扑/组态场景。 开发编辑器的主要目是为了提高团队内部项目的交付效率，目前 两个编辑器都引用到团队的相关项目中。当然，编辑器目前也支持和其他公司的项目合作。 下面是几个项目的示例图： [示例图] [示例图2] [示例图3] [示例图4] 中间是一个三维场景，使用三维编辑器编辑而成，周边是一些大屏元素，使用大屏编辑器编辑。 和一般的大屏编辑器不同，我们的大屏编辑器不仅支持大屏元素的排布，也支持分层拓扑图，架构图，交通图等，以及组态功能。 基于canvas + HTML5元素共同开发，能够支持更多丰富的功能和效果。 产品的开发过程中，我们需要对产品的设计进行深入的探讨。 下面是一些感悟，和大家分享。本文主要是分享产品功能设计层面，而非软件开发架构。 易用性 易用性是一个很宽泛的概念。 总结 上面是一些设计与思考，主要是基于拓扑/大屏编辑器的思考。为了有更好的产品，我们一直在努力的架构，设计与思考。 有关三维编辑器，有很多类似的设计理念，以后又机会再说。
1.2K30发布于 2020-11-11 深度分析实时数据可视化与数据大屏设计
在当前大数据时代，实时数据可视化、数据大屏、数据看板、实时监控和数据展现已成为企业决策和运营管理的关键工具。 我们将从数据大屏设计、3D场景渲染、实时数据接入、多屏互动、可视化模板、数据动画和自定义组件等方面进行分析。 数据大屏设计 数据大屏设计是将复杂的数据信息以图形化的方式展示，以便用户快速理解和分析数据。腾讯云RayData提供了灵活的数据大屏设计功能，支持自定义布局和组件，能够满足不同业务场景的需求1。 低代码可视化分析平台则通过拖拽式操作简化了设计流程，使得非技术人员也能快速构建数据大屏2。数字孪生可视化技术则更侧重于物理实体的数字映射，通过3D模型实现逼真的数据展示3。 腾讯云RayData数据大屏设计. 腾讯云官网. 2 低代码可视化分析平台用户手册. (2024). 低代码可视化分析平台设计指南. 3 数字孪生可视化技术白皮书. (2024).
27010编辑于 2025-07-28AI辅助开发大屏案例详解：基于smardaten开发港口作业分析大屏
大屏通过多种图表组合、个性化样式设计与灵活的交互配置，实现了数据的高效传达与操作闭环。 四、大屏设计4.1、AI生成大屏进入应用设计界面，唤起右下角的AI助手，输入大屏生成指令：“生成一个管理港口作业的大屏，包含货物吞吐量、船舶调度、泊位利用率等多个模块指标”输入大屏生成指令后，系统便会根据业务场景 ，完成大屏展示字段、所需图表、整体样式的设计工作。 ，节省大屏空间。 六、体验总结通过对港口作业分析大屏的完整搭建，我们充分体验到smardaten平台在数据可视化大屏开发中的显著优势：AI助力，高效起步：通过自然语言指令快速生成专业大屏框架，大幅降低初始设计成本，实现分钟级原型搭建
72110编辑于 2025-11-14- 来自专栏前端Q
原生 canvas 如何实现大屏?
前言 可视化大屏该如何做？有可能一天完成吗？废话不多说，直接看效果，线上 Demo 地址 lxfu1.github.io/large-scree…。 如何用 canvas 绘制各种图表，如何实现 canvas 动画 如何自动化部署自己的大屏网站 实现 项目基于 Create React App --template typescript搭建，包管理工具使用的 缺点：兼容性，基于 proxy 开发，对低版本浏览器不友好，当然，大屏应该也不会考虑 IE 这类浏览器。 当然，在这个项目中函数缓存比较鸡肋，为了用而用，试想，如果有一个函数计算量非常大，组件内又有多个 state 频繁更新，怎么确保函数不被重复调用呢？
61120编辑于 2023-08-23 - 来自专栏毛利学Python
python综合程序设计 | 做一个可视化大屏
使用爬虫技术完成信息获取 ③ 使用python基础知识库完成数据转换并做数据分析 ④ 使用jieba库对热搜做词频分析 ⑤ 使用jQuery框架和HTML、css、JavaScript和echarts完成前端页面设计 右下为三大平台的热搜地址和词频统计。 下图为百度、微博、知乎三大平台的热搜词频统计图。 3、心得体会 通过本次课程设计我又温习了一次python的一些基础知识而且对前端技术有了进一步的了解使我更加清晰了以后的方向。 同时也认识到了自己的薄弱项，比如在前端页面设计的时候对jQuery和JavaScript技术的应用很不熟练还有对echarts的图表选择也比较简单，在选取疫情城市坐标标记的时候对symbolSize 的设定也没有把控好直接导致了最终产品没有达到预期效果
2.7K30编辑于 2022-08-18 深度分析实时数据可视化技术与数据大屏设计
本文将对实时数据可视化、数据大屏、数据看板、实时监控、数据展现、可视化设计以及3D数据可视化等领域内的几种主流技术进行介绍和对比分析。 数据大屏设计 数据大屏设计是实时数据可视化技术的核心应用之一。 同时，RayData还提供了丰富的可视化模板和组件，使得用户可以根据需要快速构建数据大屏。 3D场景渲染 在3D数据可视化领域，RayData同样表现出色。 实时数据接入 实时数据接入是数据大屏设计的关键功能之一。RayData通过其低代码可视化分析平台，能够轻松接入各种实时数据源，包括IoT设备、数据库、API等。 多屏互动 在多屏互动方面，RayData提供了强大的跨平台支持，能够实现数据大屏在不同设备和屏幕尺寸上的自适应显示。这种多屏互动能力极大地增强了数据大屏的可用性和灵活性。 结论 综上所述，实时数据可视化技术在数据大屏设计、3D场景渲染、实时数据接入、多屏互动、可视化模板、数据动画和自定义组件等方面均展现出强大的能力和潜力。
23510编辑于 2025-07-28
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号