- 综合排序
- 最热优先
- 最新优先
- 来自专栏樯橹代码
公司大屏开发心得
大屏开发心得 布局篇 因为大屏不是对外开放的，所以可以使用固定的浏览器。既然这样其实是可以使用一些相对比较新的技术的。所以在布局这块我优先选择使用flexbox技术。 因为大屏屏幕很大，设计师给出的设计图通常会有很大的尺寸。其实设计师并不知道的是大屏屏幕在再大，也不过就是一个显示屏的尺寸。其实那这块需要的就是一个等比缩放。 所以在布局之前需要首先设置的是外框尺寸 html, body { height: 100%; } 大屏首先要把要把这种尺寸的差异解决，这就体现出来flexbox的优势了。 大屏模糊的问题 大屏一般都是多块屏幕拼凑起来的一整块屏。设计稿给的一个页面。开始的时候我们是按照一个页面进行开发的。但是投到一个大屏的时候问题来了，因为放的很大，锯齿很严重。 所以后来还是把大屏分开了，设计稿的每个部分拆成一个页面，每个小屏幕显示一个页面。这样子锯齿情况就减轻很多。 还解决了一个问题，就是整个屏幕的时候，字体太大。
1.7K20发布于 2019-09-02 AI辅助开发大屏案例详解：基于smardaten开发港口作业分析大屏
二、大屏介绍港口作业分析大屏旨在实现港口核心运营数据的全景可视化、实时监测与智能交互，主要包括以下核心模块：告警信息中心：实时呈现港口异常事件，支持一键穿透处理；船舶状态监测：通过表格与进度条直观展示船舶作业进度与吨位分布 大屏通过多种图表组合、个性化样式设计与灵活的交互配置，实现了数据的高效传达与操作闭环。 三、搭建步骤通过smardaten构建港口作业分析大屏，仅需以下四个核心步骤：大屏框架生成：利用AI指令快速生成大屏布局、图表与样式；样式优化：根据业务需求删减非必要指标，补充缺失模块并美化样式；组件配置与绑定 四、大屏设计4.1、AI生成大屏进入应用设计界面，唤起右下角的AI助手，输入大屏生成指令：“生成一个管理港口作业的大屏，包含货物吞吐量、船舶调度、泊位利用率等多个模块指标”输入大屏生成指令后，系统便会根据业务场景 六、体验总结通过对港口作业分析大屏的完整搭建，我们充分体验到smardaten平台在数据可视化大屏开发中的显著优势：AI助力，高效起步：通过自然语言指令快速生成专业大屏框架，大幅降低初始设计成本，实现分钟级原型搭建
63610编辑于 2025-11-14- 来自专栏Python可视化
【可视化大屏】用Python开发智慧城市数据分析大屏！
一、开发背景 您好，我是@马哥python说 。 这是我独立开发的Python可视化大屏，看下演示效果： ，时长01:15 这个大屏，是通过pyecharts可视化开发框架实现。 首先，任意开发一个简单的图表，柱形图、折线图、散点图什么都可以，后续把它拖拽到大屏左上角。 最后我会用宣传片视频替换掉这个图表。 _临时.html') print('生成完毕:大屏_临时.html') 至此，临时大屏文件已经生成。 下面就开始手动拖拽，拖拽的过程，就不文字阐述了，可点击这个视频，观看拖拽过程： ，时长01:21 2.9 生成最终大屏 很关键！！ 除了常规的拖拽组合大屏操作外，还记得2.7章节留下的疑问吗？ (text2) print('已写入：大屏_临时2.html') 最后，再执行常规生成最终大屏的代码： Page.save_resize_html( source="大屏_临时2.html", #
37810编辑于 2025-07-14 - 来自专栏每周聚焦
大屏开发你需要知道哪些
大屏 大屏是什么呢？再我前几年刚接触这个词得时候很新颖，全名叫态势感知大屏，大屏得特点是炫酷、好看，给用户满满得科技感。 听一位前辈说当年再招标会上，再都用exel、word做界面图表文档得时候，有一家公司把可视化态势感知大屏展示出来了，直接秒杀其他厂家。 那么当我们开发一款大屏点的时候需要注意什么呢？ （个人建议再开发阶段直接使用适配单位，插件还是有或多或少得问题）。 大屏界面布局 其实一般大屏布局会又一个header（主标题、时间展示）、side （副标题：屏幕的两侧可能会分为4块4个维度去展示当前屏的一些信息）、main(大屏主视图)、footer（底部）。 （header）、副标题（side、footer）然后主视图这么去设计; 那么其实副标题应该都是长一个样，咱们可以封成一个card组件供大屏使用（vue设计可以参考el-card）。
1.2K10编辑于 2023-03-22 - 来自专栏宜达数字
AR开发-互动大屏的实现方式
别的不说，程序这块需要编写Shader（这一步估计把80%的开发工程师剔除了），当然本大大不在此列。 如下图 ?
78210发布于 2020-06-02 【可视化大屏】用Python开发「淄博烧烤」微博热评舆情分析大屏
( page_title='微博热门评论可视化分析大屏-以"淄博烧烤"为例', layout=Page.DraggablePageLayout,)page.add( # 绘制:大标题 再执行最后一步，调用json配置文件，生成最终大屏文件。 Page.save_resize_html(source="大屏_临时.html", # 源html文件cfg_file="chart_config.json", # 配置文件dest="大屏_最终 .html" # 目标html文件)至此，所有代码执行完毕，生成了最终大屏html文件。 情感分析jieba 中文分词pyecharts+page 组合大屏flask 启动网页服务END、转载声明读者你好，本文转载自 @马哥python说，10年程序猿，专注python开发。
44910编辑于 2025-03-19- 来自专栏AI快讯
解决折叠屏痛点 vivo携手开发者完善大屏适配生态
vivo基于折叠屏、PAD等大屏软件生态建设的痛点，在ITGSA金标联盟联合小米、OPPO牵头制定大屏适配标准，推出了具有行业指导意义的《三方应用大屏设备适配白皮书》（以下简称《白皮书》），为广大开发者提供 “大屏设计指南”和“技术开发指导”，对响应式布局、自适应布局等大屏适配中应用开发者普遍关心的常见问题进行汇总并解答，极大简化和缩短了开发者在折叠屏、PAD等大屏设备上的适配过程。 值得关注的是，《白皮书》会与Android版本同步迭代，对Android大屏相关新特性进行汇总，方便应用开发者及时使用新特性提升大屏体验。 ，开发者们也可以集中更多精力在研究创新形式交互上，真正发挥折叠屏等大屏优势，从交互设计、操控自由度等方面深度创新，为大屏终端用户带来更便捷的智能体验。 随着vivo与广大开发者、合作伙伴、友商的不断探索，vivo大屏智能终端已经打造了完善畅通的生态建设逻辑，为快速提升用户的大屏操控体验打下了基础。
85700编辑于 2022-11-09 - 来自专栏趣谈前端
从零开发可视化大屏制作平台
你将收获 可视化大屏产品设计思路 主流可视化图表库技术选型 大屏编辑器设计思路 大屏可视化编辑器Schema设计 用户数据自治探索 在介绍之前, 我们先看看实现的效果展示. 效果预览 ? ? ? 相比于传统手工定制的图表与数据仪表盘，可视化大屏制作平台的出现，可以打破抵消的定制开发, 数据分散的问题，通过数据采集、清洗、分析到直观实时的数据可视化展现，能够多方位、多角度、全景展现各项指标，实时监控 针对以上需求, 我们设计了一套可视化大屏解决方案, 具体包含如下几点: ? 上图是笔者4个月前设计的基本草图, 后期会持续更新. 通过以上的设计分解, 我们基本可以搭建一个可自己定制的数据大屏. 大屏编辑器设计思路 在上面的分析中我们知道一个大屏编辑器需要有个编辑器核心, 主要包含以下部分: 组件库 拖拽(自由拖拽, 参考线, 自动提示) 画布渲染器 属性编辑器 如下图所示: ? .toFixed( 1, )})`; } }); 详细源码可参考: H5-Dooring | 参考线设计源码 后期规划 最近我们的主要方向是H5-Dooring编辑器2.0的开发和可视化大屏搭建平台的升级和优化
2.6K10发布于 2021-03-12 - 来自专栏JavaScript全栈
你必须掌握的可视化大屏开发模式
一般优先选用系统内置字体，当然如果有定制字体则可选用定制字体，数据信息相关字号一般14px以上，这样大屏观看时，更清晰。 分清组件信息主次，尽可能将表现形式、表达目的、数据性质接近的组件布局在一起，使用户更好获取数据信息； 主次分明：通常中间区域、大片区域放置主要信息，次要信息可环绕放置 基于以上考虑，我们可以设计一种基于网格形式大屏开发方案 动画与交互 适当动画可提升大屏趣味性，但一定要注意主次。更具实际需要确定交互方式。 :9（注意对可能使用的异型屏的适配） 客户端硬件性能: 内存、CPU、GPU、显卡（复杂的大屏对客户端配置要求较高，地图的大数据体量比较吃 CPU和内存，webgl 会调用GPU渲染，一般不是 webgl 的，动画多的大屏，容易吃 CPU，显卡也很重要，但不易量化） 客户端浏览器: 建议选用较新版本的 Chrome 或 FireFox 等现代浏览器
1.9K21发布于 2020-07-20 - 来自专栏樯橹代码
大屏数据显示优化
大屏数据显示优化 大屏数据的页面里面包含了一些3D地图和世界航班趋势图，反应上来有个问题，就是动画比较卡顿。 而大屏像素很低，高清的图片也显示的像素点很大，看起来非常模糊，所以并没有必要使用高清的。把图片质量降低一些，切换卡顿就不见了，显示却并没有特别的变化。
5K20发布于 2019-09-02 - 来自专栏3D可视化
数据可视化大屏使用什么技术开发的？
还记得双十一某宝的数据大屏吗？还记得你剁手了多少吗？他每年都在突破，而企业这历史性的时刻用可视化数据大屏是否更有意义？答案是肯定的！ 那么数据可视化大屏于企业来说有什么重要意义及用处呢？ 坦率讲数据可视化大屏并非适用于所有企业，因行业而言，有的企业对数据可视化大屏有很迫切的需求。 当然things作为物联网可视化pass平台，欢迎大家自己来制作，如果企业有技术人员，最少前端开发经验，懂js，了解webgl、 Javascript，那就没问题的，thingjs平台支持数据对接，项目部署等
4.4K31发布于 2019-12-12 - 来自专栏技术综合
钢材信息小程序开发总结(四) --- 最普通数据大屏
整体项目代码 钢材信息小程序开发总结(一) --- 整体介绍 钢材信息小程序开发总结(二) ---uniapp 钢材信息小程序开发总结(三) ---EggJS 主要是做个最垃圾的大屏给朋友视察用 ironInfoWeapp/ 一、使用的图表: ECharts ECharts没啥好说的功能全面, 图表种类多样 官网: https://www.echartsjs.com/zh/index.html 我们的大屏里主要用的是他的柱状图 image.png 二、大屏自适应问题 当然首先是长宽需要是百分比 需要监听resize事件 window.onload = function () { const container = document.querySelector padding，但不包括边框 border、外边距 margin 和垂直滚动条 window.screen.height 为屏幕的高度 window.screen.width 为屏幕的宽度 通过给整个大屏赋值屏幕的长宽
1.4K10发布于 2020-08-25 - 来自专栏Vue中文社区
录屏工具开发
https://juejin.cn/post/6915287057795874824 WebRTC是谷歌于2011年开源的一个音视频处理引擎，可以实时的进行视频数据的采集，也就是说可以做直播，也可以做桌面录屏， 这里我们来开发一个屏幕录制工具。 首先我们在页面中创建一个video标签，用于展示录屏的内容，再创建四个按钮，一个屏幕分享，一个开始录制，一个停止录制，一个下载视频。 options]); MediaRecorder的api也比较多，第一个是MediaRecorder.start(timeslice)意思是开启录制，timeslice是一个可选参数，如果不设置会存储在一个大的 对了，这个功能只能在https环境中运行，本地开发可以支持127.0.0.1或者localhost。如果部署正式别忘记使用https。 WebRTC比较高级的功能是音视频直播，共享远程桌面，即时通信等，谷歌希望将WebRTC用作浏览器之间实现音视频通话这种快速的开发使用的。不过这些功能开发起来比较复杂，我们后面有时间再来介绍。
2.4K30发布于 2021-02-26 - 来自专栏趣谈前端
从0到1开发可视化数据大屏（下）
❝前言：这是一篇迟到的下集，上次分享了如何从0到1搭建一个可视化数据大屏，介绍了数据搭配的前期调研、控件区域的开发、画布模块的开发等等。上篇的链接点我? 从0到1开发可视化数据大屏（上） 而下集主要围绕.控件管理模块、数据管理模块、图层管理模块这几个模块来介绍。 而数据大屏的控件属性配置模块同理，本质上都是组件属性可视化修改，是实现将json配置展现出来，实现自定义的表单设置，我们知道每个控件都有自己的一个默认配置，然后再进行自定义修改。 ：啊乐同学：那你这样，数据还是静态的，最终数据大屏也是静态的数据展示？
2.5K10发布于 2021-06-08 - 来自专栏前端Q
原生 canvas 如何实现大屏?
前言 可视化大屏该如何做？有可能一天完成吗？废话不多说，直接看效果，线上 Demo 地址 lxfu1.github.io/large-scree…。 如何用 canvas 绘制各种图表，如何实现 canvas 动画 如何自动化部署自己的大屏网站 实现 项目基于 Create React App --template typescript搭建，包管理工具使用的 缺点：兼容性，基于 proxy 开发，对低版本浏览器不友好，当然，大屏应该也不会考虑 IE 这类浏览器。 当然，在这个项目中函数缓存比较鸡肋，为了用而用，试想，如果有一个函数计算量非常大，组件内又有多个 state 频繁更新，怎么确保函数不被重复调用呢？ } dispatchEvent(): boolean { return true; } onerror() {} } window.Worker = Worker; 自动化部署 开发过项目的同学都知道
58620编辑于 2023-08-23 - 来自专栏趣谈前端
从零开发可视化大屏制作平台(技术拆解版)
你将收获 可视化大屏产品设计思路 主流可视化图表库技术选型 大屏编辑器设计思路 大屏可视化编辑器Schema设计 用户数据自治探索 在介绍之前, 我们先看看实现的效果展示. 相比于传统手工定制的图表与数据仪表盘，可视化大屏制作平台的出现，可以打破抵消的定制开发, 数据分散的问题，通过数据采集、清洗、分析到直观实时的数据可视化展现，能够多方位、多角度、全景展现各项指标，实时监控 当然实际应用中大屏展现的内容和形式远比这复杂， 我们从上图可以提炼出大屏页面的2个直观特征: 可视化组件集 空间坐标关系 因为我们可视化大屏载体是页面， 是html， 所以还有另外一个特征: 事件/交互 综上我们总结出了可视化大屏的必备要素: 我们只要充分的理解了可视化大屏的组成和特征， 我们才能更好的设计可视化大屏搭建引擎， 基于以上分析， 我设计了一张基础引擎的架构图: 接下来我就带大家一起来拆解并实现上面的搭建引擎 .toFixed( 1, )})`; } }); 详细源码可参考: H5-Dooring | 参考线设计源码 后期规划 最近我们的主要方向是H5-Dooring编辑器4.0的开发和可视化大屏搭建平台的升级和优化
1.3K10编辑于 2024-03-18 数据大屏交互设计案例详解 | 基于smardaten实现智慧交通监测大屏
而现代智慧交通大屏，利用可视化的方式整合多源数据，一屏即可实现全域感知和综合监测，又利用各类交互设计，提升数据大屏的联动能力，加快决策过程。 点击跳转：大屏中各组件支持点击事件，例如针对指标卡可以实现点击跳转的功能，实现从宏观指标到微观详情的快速穿透。 三、配置过程进入平台后，选择交通监测系统，进入数据大屏的配置页。在数据大屏中支持多种交互动作，其中交互组件作为与用户直接交互的核心元素，包含按钮、导航、输入框等多种类型。3.1. 回到数据大屏的配置页，将地址填入并绑定“车牌号” 作为跳转参数，确保查询结果与输入的车牌号精准匹配。完成后，我们预览测试一下。 四、交互体验配置门槛低，业务人能自主做：插入组件、优化样式、绑定变量全靠可视化拖拽点选，“所见即所得”，无需依赖开发，业务人员可快速落地交互逻辑。
46710编辑于 2025-10-29- 来自专栏低代码平台
【免费大屏版】JeecgBoot v3.7.2 大屏版发布，开源低代码平台
当前版本：v3.7.2 | 2024-12-12源码下载https://github.com/jeecgboot/JeecgBoot升级日志重要的事情说三遍，三遍，三遍，本次重点提供了免费大屏设计器！！ issue处理jeecgboot支持作为乾坤子应用集成积木BI，提供免费大屏升级积木报表到最新版本邮件推送支持配置采用定时推送还是直接发送支持自定义阿里大鱼短信的模板code支持新版钉钉登录逻辑redis 顶部混合导航改为侧边栏，一级菜单丢失 · Issue #7248在线报表关联查询字段顺序错乱 · Issue #7156BasicTable 如何设置列表选中后的样式 · Issue #7231【BUG】自动锁屏输入 引领低代码开发模式(OnlineCoding-> 代码生成器 -> 手工MERGE)，低代码开发同时又支持灵活编码， 可以帮助解决Java项目70%的重复工作，让开发更多关注业务。 RBAC（Role-Based Access Control，基于角色的访问控制）系统效果预览积木BI大屏AI助手(ChatGPT)PC端在线聊天&通知Online开发(在线配置表单和报表)图片图表示例
86420编辑于 2024-12-12 - 来自专栏X#(XSharp)
TQ开发框架：锁屏
有时候，图片比文字更有说服力，锁屏前： 锁屏后： 这是被纳入 TQ 开发框架的一个类：bblightboxv5 它位于 bblightboxv5.VCX 。 :锁屏；.F.：解锁 框架中的效果：
14110编辑于 2025-11-13 - 来自专栏练手小项目
Flask 数据可视化大屏
项目介绍 该项目利用 Flask框架结合echarts将MySQL数据库中的相关数据进行可视化大屏展示，其中MySQL数据采用虚拟实时更新数据 效果如下： 解析： 前端 JavaScript通过 AJAX "IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>可视化大屏 /static/echarts.min.js"></script> </head> <body>
Flask数据可视化大屏<div id= ' // 修改数据标签的字体颜色 } } ] }; myChart.setOption(option); } <em>大</em><em>屏</em>展示1.7K21编辑于 2025-06-06
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号