- 综合排序
- 最热优先
- 最新优先
- 来自专栏樯橹代码
公司大屏开发心得
大屏开发心得 布局篇 因为大屏不是对外开放的，所以可以使用固定的浏览器。既然这样其实是可以使用一些相对比较新的技术的。所以在布局这块我优先选择使用flexbox技术。 因为大屏屏幕很大，设计师给出的设计图通常会有很大的尺寸。其实设计师并不知道的是大屏屏幕在再大，也不过就是一个显示屏的尺寸。其实那这块需要的就是一个等比缩放。 所以在布局之前需要首先设置的是外框尺寸 html, body { height: 100%; } 大屏首先要把要把这种尺寸的差异解决，这就体现出来flexbox的优势了。 大屏模糊的问题 大屏一般都是多块屏幕拼凑起来的一整块屏。设计稿给的一个页面。开始的时候我们是按照一个页面进行开发的。但是投到一个大屏的时候问题来了，因为放的很大，锯齿很严重。 所以后来还是把大屏分开了，设计稿的每个部分拆成一个页面，每个小屏幕显示一个页面。这样子锯齿情况就减轻很多。 还解决了一个问题，就是整个屏幕的时候，字体太大。
1.7K20发布于 2019-09-02 AI辅助开发大屏案例详解：基于smardaten开发港口作业分析大屏
二、大屏介绍港口作业分析大屏旨在实现港口核心运营数据的全景可视化、实时监测与智能交互，主要包括以下核心模块：告警信息中心：实时呈现港口异常事件，支持一键穿透处理；船舶状态监测：通过表格与进度条直观展示船舶作业进度与吨位分布 大屏通过多种图表组合、个性化样式设计与灵活的交互配置，实现了数据的高效传达与操作闭环。 三、搭建步骤通过smardaten构建港口作业分析大屏，仅需以下四个核心步骤：大屏框架生成：利用AI指令快速生成大屏布局、图表与样式；样式优化：根据业务需求删减非必要指标，补充缺失模块并美化样式；组件配置与绑定 四、大屏设计4.1、AI生成大屏进入应用设计界面，唤起右下角的AI助手，输入大屏生成指令：“生成一个管理港口作业的大屏，包含货物吞吐量、船舶调度、泊位利用率等多个模块指标”输入大屏生成指令后，系统便会根据业务场景 六、体验总结通过对港口作业分析大屏的完整搭建，我们充分体验到smardaten平台在数据可视化大屏开发中的显著优势：AI助力，高效起步：通过自然语言指令快速生成专业大屏框架，大幅降低初始设计成本，实现分钟级原型搭建
72610编辑于 2025-11-14- 来自专栏Python可视化
【可视化大屏】用Python开发智慧城市数据分析大屏！
一、开发背景 您好，我是@马哥python说 。 这是我独立开发的Python可视化大屏，看下演示效果： ，时长01:15 这个大屏，是通过pyecharts可视化开发框架实现。 首先，任意开发一个简单的图表，柱形图、折线图、散点图什么都可以，后续把它拖拽到大屏左上角。 最后我会用宣传片视频替换掉这个图表。 _临时.html') print('生成完毕:大屏_临时.html') 至此，临时大屏文件已经生成。 </script>', video_new, text, flags=re.DOTALL) with open('大屏_临时2.html', 'w', encoding='utf8') as f: f.write (text2) print('已写入：大屏_临时2.html') 最后，再执行常规生成最终大屏的代码： Page.save_resize_html( source="大屏_临时2.html", #
40510编辑于 2025-07-14 - 来自专栏每周聚焦
大屏开发你需要知道哪些
大屏 大屏是什么呢？再我前几年刚接触这个词得时候很新颖，全名叫态势感知大屏，大屏得特点是炫酷、好看，给用户满满得科技感。 听一位前辈说当年再招标会上，再都用exel、word做界面图表文档得时候，有一家公司把可视化态势感知大屏展示出来了，直接秒杀其他厂家。 那么当我们开发一款大屏点的时候需要注意什么呢？ vscode插件：【px2xx】这个插件能满足咱们开发单位转换。 真适配又分为 高度适配、宽度适配。 宽度适配就是根据用户得屏幕窗口宽度发生变化做到一个界面适配，比如全部都使用vw。 大屏界面布局 其实一般大屏布局会又一个header（主标题、时间展示）、side （副标题：屏幕的两侧可能会分为4块4个维度去展示当前屏的一些信息）、main(大屏主视图)、footer（底部）。 权重2 组件划分 其实再大屏中一般设计会遵循主标题（header）、副标题（side、footer）然后主视图这么去设计; 那么其实副标题应该都是长一个样，咱们可以封成一个card组件供大屏使用（vue
1.2K10编辑于 2023-03-22 - 来自专栏宜达数字
AR开发-互动大屏的实现方式
别的不说，程序这块需要编写Shader（这一步估计把80%的开发工程师剔除了），当然本大大不在此列。 如下图 ? Properties { _Color ("Color", Color) = (1,1,1,1) _MainTex ("Albedo (RGB)", 2D ) = "white" {} _AlphaVideo ("Alpha Video(R)", 2D) = "white" {} _Glossiness ("Smoothness _MainTex; sampler2D _AlphaVideo; struct Input { float2 uv_MainTex 另一种Shader Shader "Custom/ARMovieShader" { Properties { _MainTex ("Albedo (RGB)", 2D
78410发布于 2020-06-02 【可视化大屏】用Python开发「淄博烧烤」微博热评舆情分析大屏
/static/bg2.png'; """)大标题效果如下：图片3.2 词云图（含：加载停用词）绘制词云图，需要先进行中文分词。既然分词，就要先设置停用词，避免干扰词影响分析结果。 再执行最后一步，调用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开发。
46210编辑于 2025-03-19- 来自专栏AI快讯
解决折叠屏痛点 vivo携手开发者完善大屏适配生态
vivo基于折叠屏、PAD等大屏软件生态建设的痛点，在ITGSA金标联盟联合小米、OPPO牵头制定大屏适配标准，推出了具有行业指导意义的《三方应用大屏设备适配白皮书》（以下简称《白皮书》），为广大开发者提供 “大屏设计指南”和“技术开发指导”，对响应式布局、自适应布局等大屏适配中应用开发者普遍关心的常见问题进行汇总并解答，极大简化和缩短了开发者在折叠屏、PAD等大屏设备上的适配过程。 值得关注的是，《白皮书》会与Android版本同步迭代，对Android大屏相关新特性进行汇总，方便应用开发者及时使用新特性提升大屏体验。 ，开发者们也可以集中更多精力在研究创新形式交互上，真正发挥折叠屏等大屏优势，从交互设计、操控自由度等方面深度创新，为大屏终端用户带来更便捷的智能体验。 截至目前，vivo开放平台已服务全球超过2万多个开发者，完成超过170万次测试任务。vivo已支持90个品类、4600多个SKU。
86000编辑于 2022-11-09 - 来自专栏趣谈前端
从零开发可视化大屏制作平台
你将收获 可视化大屏产品设计思路 主流可视化图表库技术选型 大屏编辑器设计思路 大屏可视化编辑器Schema设计 用户数据自治探索 在介绍之前, 我们先看看实现的效果展示. 效果预览 ? ? ? 相比于传统手工定制的图表与数据仪表盘，可视化大屏制作平台的出现，可以打破抵消的定制开发, 数据分散的问题，通过数据采集、清洗、分析到直观实时的数据可视化展现，能够多方位、多角度、全景展现各项指标，实时监控 大屏编辑器设计思路 在上面的分析中我们知道一个大屏编辑器需要有个编辑器核心, 主要包含以下部分: 组件库 拖拽(自由拖拽, 参考线, 自动提示) 画布渲染器 属性编辑器 如下图所示: ? 辅助功能 可视化大屏一键截图 一键截图功能还是沿用H5-Dooring 的快捷截图方案, 主要用于对大屏的分享, 海报制作等需求, 我们可以使用以下任何一个组件实现: dom-to-image html2canvas .toFixed( 1, )})`; } }); 详细源码可参考: H5-Dooring | 参考线设计源码 后期规划 最近我们的主要方向是H5-Dooring编辑器2.0的开发和可视化大屏搭建平台的升级和优化
2.6K10发布于 2021-03-12 - 来自专栏JavaScript全栈
你必须掌握的可视化大屏开发模式
一般优先选用系统内置字体，当然如果有定制字体则可选用定制字体，数据信息相关字号一般14px以上，这样大屏观看时，更清晰。 分辨率 html font-size 1366*768 12px 1920*1080(1080p) 16px 2560*1440(2k) 22px 3840*2160(4k) 配色 较深色调：浅色投屏对视觉刺激较强 分清组件信息主次，尽可能将表现形式、表达目的、数据性质接近的组件布局在一起，使用户更好获取数据信息； 主次分明：通常中间区域、大片区域放置主要信息，次要信息可环绕放置 基于以上考虑，我们可以设计一种基于网格形式大屏开发方案 动画与交互 适当动画可提升大屏趣味性，但一定要注意主次。更具实际需要确定交互方式。 :9（注意对可能使用的异型屏的适配） 客户端硬件性能: 内存、CPU、GPU、显卡（复杂的大屏对客户端配置要求较高，地图的大数据体量比较吃 CPU和内存，webgl 会调用GPU渲染，一般不是 webgl
1.9K21发布于 2020-07-20 - 来自专栏樯橹代码
大屏数据显示优化
大屏数据显示优化 大屏数据的页面里面包含了一些3D地图和世界航班趋势图，反应上来有个问题，就是动画比较卡顿。 原因无外乎两个： 1、电脑配置比较低 2、页面计算量较大 针对第二点的优化方案如下 jquery动画去除 图形渐变使用了jquery动画，其中还会夹杂一些Dom操作。 而大屏像素很低，高清的图片也显示的像素点很大，看起来非常模糊，所以并没有必要使用高清的。把图片质量降低一些，切换卡顿就不见了，显示却并没有特别的变化。
5K20发布于 2019-09-02 - 来自专栏3D可视化
数据可视化大屏使用什么技术开发的？
还记得双十一某宝的数据大屏吗？还记得你剁手了多少吗？他每年都在突破，而企业这历史性的时刻用可视化数据大屏是否更有意义？答案是肯定的！ 那么数据可视化大屏于企业来说有什么重要意义及用处呢？ 2.灵活的扩展能力 对于非主流监控工具，支持在线JS脚本编辑，集成处理即时生效，无需编译部署;提供灵活、规范的编程接口，支持用户扩展自定义的自动化工具。 坦率讲数据可视化大屏并非适用于所有企业，因行业而言，有的企业对数据可视化大屏有很迫切的需求。 当然things作为物联网可视化pass平台，欢迎大家自己来制作，如果企业有技术人员，最少前端开发经验，懂js，了解webgl、 Javascript，那就没问题的，thingjs平台支持数据对接，项目部署等
4.4K31发布于 2019-12-12 - 来自专栏技术综合
钢材信息小程序开发总结(四) --- 最普通数据大屏
整体项目代码 钢材信息小程序开发总结(一) --- 整体介绍 钢材信息小程序开发总结(二) ---uniapp 钢材信息小程序开发总结(三) ---EggJS 主要是做个最垃圾的大屏给朋友视察用 ironInfoWeapp/ 一、使用的图表: ECharts ECharts没啥好说的功能全面, 图表种类多样 官网: https://www.echartsjs.com/zh/index.html 我们的大屏里主要用的是他的柱状图 effectScatter', coordinateSystem: 'geo', symbolSize: 10, showEffectOn: 'render', zlevel: 2, option.html#series-lines { tooltip: { show: false }, type: 'lines', zlevel: 2, image.png 二、大屏自适应问题 当然首先是长宽需要是百分比 需要监听resize事件 window.onload = function () { const container = document.querySelector
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.图层管理模块 ❝上文我们提及了图层受控件区域的联动，但它本质影响的最多的是画布区域，比如复制图层、删除图层等，会对画布区域进行视图更新，下面是图层区域的缩略展示? ❞ ?
2.5K10发布于 2021-06-08 - 来自专栏大前端开发
《大前端开发》培训2周小结
原先打算将前端和后端的内容先独立分开来讲的，但是在讲课的过程中，发现穿插在一起讲能更好的让同学们理解前端和后端的异同和各自的职责，以及相互间的关系等，可以更好的建立软件开发的大局观，从更高的角度来认识编程 然后，尽量让同学们在了解某个具体技术知识点的同时，也让他们了解这些技术在整个软件开发和部署的体系中所处的角色和位置。 把最重要的东西完全搞明白，力图做到： 不要写一行你自己都没理解的代码 除了这些基础知识，我们也开始引入介绍一些以后需要用到的内容，比如：Nginx、MongoDB的基本用法，微信小程序和网页应用开发的技术关联性 模拟芝麻信用页面 通过开发这些demo程序，同学们对HTML和CSS在搭建界面方面的使用，以及使用DOM事件进行对用户交互的处理，都有了一个更加形象的认识。 在讲课的过程中，我觉得自己也得到了非常大的成长，比如当同学们遇到比较难理解的知识点，我会想方设法、不断的组织自己的语言、编制各种容易理解的例子，让自己能将它们解释清楚；以及在课程内容上，我会不断的去思考如何将前一天课和后一天课的内容更好的衔接起来
72920发布于 2018-08-21 - 来自专栏前端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; 自动化部署 开发过项目的同学都知道
62020编辑于 2023-08-23 - 来自专栏趣谈前端
从零开发可视化大屏制作平台(技术拆解版)
你将收获 可视化大屏产品设计思路 主流可视化图表库技术选型 大屏编辑器设计思路 大屏可视化编辑器Schema设计 用户数据自治探索 在介绍之前, 我们先看看实现的效果展示. 相比于传统手工定制的图表与数据仪表盘，可视化大屏制作平台的出现，可以打破抵消的定制开发, 数据分散的问题，通过数据采集、清洗、分析到直观实时的数据可视化展现，能够多方位、多角度、全景展现各项指标，实时监控 当然实际应用中大屏展现的内容和形式远比这复杂， 我们从上图可以提炼出大屏页面的2个直观特征: 可视化组件集 空间坐标关系 因为我们可视化大屏载体是页面， 是html， 所以还有另外一个特征: 事件/交互 辅助功能 可视化大屏一键截图 一键截图功能还是沿用H5-Dooring 的快捷截图方案, 主要用于对大屏的分享, 海报制作等需求, 我们可以使用以下任何一个组件实现: dom-to-image html2canvas .toFixed( 1, )})`; } }); 详细源码可参考: H5-Dooring | 参考线设计源码 后期规划 最近我们的主要方向是H5-Dooring编辑器4.0的开发和可视化大屏搭建平台的升级和优化
1.4K10编辑于 2024-03-18 数据大屏交互设计案例详解 | 基于smardaten实现智慧交通监测大屏
而现代智慧交通大屏，利用可视化的方式整合多源数据，一屏即可实现全域感知和综合监测，又利用各类交互设计，提升数据大屏的联动能力，加快决策过程。 点击跳转：大屏中各组件支持点击事件，例如针对指标卡可以实现点击跳转的功能，实现从宏观指标到微观详情的快速穿透。 三、配置过程进入平台后，选择交通监测系统，进入数据大屏的配置页。在数据大屏中支持多种交互动作，其中交互组件作为与用户直接交互的核心元素，包含按钮、导航、输入框等多种类型。3.1. 回到数据大屏的配置页，将地址填入并绑定“车牌号” 作为跳转参数，确保查询结果与输入的车牌号精准匹配。完成后，我们预览测试一下。 四、交互体验配置门槛低，业务人能自主做：插入组件、优化样式、绑定变量全靠可视化拖拽点选，“所见即所得”，无需依赖开发，业务人员可快速落地交互逻辑。
52110编辑于 2025-10-29- 来自专栏用户7220666的专栏
大屏可视化的2大配色技巧，选对颜色就成功了一半
今天我们来给大家详细解说一下大屏可视化的配色技巧。 1、色彩的三属性 色相是指色彩的相貌，是色彩最大的特征。如我们所说的红色、黄色、蓝色，这些是色彩的相貌，即色相。 2、色彩的特性 红色给人积极、悦动、温暖的感觉。蓝色给人低静、消极的感觉。绿与紫是中性色彩刺激小，效果介于红与蓝之间。中性色彩使人产生休憩、轻松的情绪。 人对色彩的冷暖感觉基本取决于色调。 酷屏的几大特点： 面积巨大——用户站在远处才能看全内容，所以字体也不能太小。 深色背景——让视觉更好的聚焦。 不可操作——酷屏主要用来给来用户看的。用户一般不会直接操作大屏。 空间局限——酷屏不像网页有滚动条，它的长宽都是固定的。 独立主题——每块酷屏都有具体想表达的某个主题。 话不多说我们上实例来看看，以下图为例。 我们先要提取出酷屏的主要指标与次要指标，然后将主要指标放置在屏幕的中间，然后在一次将次要指标围绕其周围。
4.6K30发布于 2020-05-08 - 来自专栏低代码平台
【免费大屏版】JeecgBoot v3.7.2 大屏版发布，开源低代码平台
前后端分离架构 SpringBoot2.x，SpringCloud，Ant Design&Vue3，Mybatis-plus，Shiro，JWT 支持微服务。强大的代码生成器让前后端代码一键生成! 当前版本：v3.7.2 | 2024-12-12源码下载https://github.com/jeecgboot/JeecgBoot升级日志重要的事情说三遍，三遍，三遍，本次重点提供了免费大屏设计器！！ issue处理jeecgboot支持作为乾坤子应用集成积木BI，提供免费大屏升级积木报表到最新版本邮件推送支持配置采用定时推送还是直接发送支持自定义阿里大鱼短信的模板code支持新版钉钉登录逻辑redis 引领低代码开发模式(OnlineCoding-> 代码生成器 -> 手工MERGE)，低代码开发同时又支持灵活编码， 可以帮助解决Java项目70%的重复工作，让开发更多关注业务。 RBAC（Role-Based Access Control，基于角色的访问控制）系统效果预览积木BI大屏AI助手(ChatGPT)PC端在线聊天&通知Online开发(在线配置表单和报表)图片图表示例
88220编辑于 2024-12-12
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号