- 综合排序
- 最热优先
- 最新优先
- 来自专栏樯橹代码
公司大屏开发心得
大屏开发心得 布局篇 因为大屏不是对外开放的，所以可以使用固定的浏览器。既然这样其实是可以使用一些相对比较新的技术的。所以在布局这块我优先选择使用flexbox技术。 因为大屏屏幕很大，设计师给出的设计图通常会有很大的尺寸。其实设计师并不知道的是大屏屏幕在再大，也不过就是一个显示屏的尺寸。其实那这块需要的就是一个等比缩放。 所以在布局之前需要首先设置的是外框尺寸 html, body { height: 100%; } 大屏首先要把要把这种尺寸的差异解决，这就体现出来flexbox的优势了。 大屏模糊的问题 大屏一般都是多块屏幕拼凑起来的一整块屏。设计稿给的一个页面。开始的时候我们是按照一个页面进行开发的。但是投到一个大屏的时候问题来了，因为放的很大，锯齿很严重。 所以后来还是把大屏分开了，设计稿的每个部分拆成一个页面，每个小屏幕显示一个页面。这样子锯齿情况就减轻很多。 还解决了一个问题，就是整个屏幕的时候，字体太大。
1.7K20发布于 2019-09-02 AI辅助开发大屏案例详解：基于smardaten开发港口作业分析大屏
二、大屏介绍港口作业分析大屏旨在实现港口核心运营数据的全景可视化、实时监测与智能交互，主要包括以下核心模块：告警信息中心：实时呈现港口异常事件，支持一键穿透处理；船舶状态监测：通过表格与进度条直观展示船舶作业进度与吨位分布 三、搭建步骤通过smardaten构建港口作业分析大屏，仅需以下四个核心步骤：大屏框架生成：利用AI指令快速生成大屏布局、图表与样式；样式优化：根据业务需求删减非必要指标，补充缺失模块并美化样式；组件配置与绑定 四、大屏设计4.1、AI生成大屏进入应用设计界面，唤起右下角的AI助手，输入大屏生成指令：“生成一个管理港口作业的大屏，包含货物吞吐量、船舶调度、泊位利用率等多个模块指标”输入大屏生成指令后，系统便会根据业务场景 ，并置于柱状图上方显示为突出表现优秀单位，我们为TOP3数据设置了特别样式规则：柱状图与文字整体使用渐变金色主题，并设置合适的滚动速度，确保所有数据都能得到充分展示通过以上配置，港口作业效率排行榜成功实现了对各作业单位效率值的直观对比与动态展示 六、体验总结通过对港口作业分析大屏的完整搭建，我们充分体验到smardaten平台在数据可视化大屏开发中的显著优势：AI助力，高效起步：通过自然语言指令快速生成专业大屏框架，大幅降低初始设计成本，实现分钟级原型搭建
72610编辑于 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", #
40510编辑于 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%的开发工程师剔除了），当然本大大不在此列。 如下图 ? float2 uv_MainTex; }; fixed4 LightingNoLighting(SurfaceOutput s, fixed3
78410发布于 2020-06-02 【可视化大屏】用Python开发「淄博烧烤」微博热评舆情分析大屏
首先，找到一张星空图作为大屏背景图：图片然后，在Line组件中加入js代码，加载背景图：# 设置背景图片line3.add_js_funcs( """ var img = new Image 再执行最后一步，调用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与广大开发者、合作伙伴、友商的不断探索，vivo大屏智能终端已经打造了完善畅通的生态建设逻辑，为快速提升用户的大屏操控体验打下了基础。
86000编辑于 2022-11-09 - 来自专栏趣谈前端
从零开发可视化大屏制作平台
你将收获 可视化大屏产品设计思路 主流可视化图表库技术选型 大屏编辑器设计思路 大屏可视化编辑器Schema设计 用户数据自治探索 在介绍之前, 我们先看看实现的效果展示. 效果预览 ? ? ? 相比于传统手工定制的图表与数据仪表盘，可视化大屏制作平台的出现，可以打破抵消的定制开发, 数据分散的问题，通过数据采集、清洗、分析到直观实时的数据可视化展现，能够多方位、多角度、全景展现各项指标，实时监控 , 针对可视化和布置时间序列数据进行了优化 C3.js 通过包装构造整个图表所需的代码，使生成基于D3的图表变得容易 我们使用以上任何一个库都可以实现我们的可视化大屏搭建的需求, 各位可以根据喜好来选择 大屏编辑器设计思路 在上面的分析中我们知道一个大屏编辑器需要有个编辑器核心, 主要包含以下部分: 组件库 拖拽(自由拖拽, 参考线, 自动提示) 画布渲染器 属性编辑器 如下图所示: ? .toFixed( 1, )})`; } }); 详细源码可参考: H5-Dooring | 参考线设计源码 后期规划 最近我们的主要方向是H5-Dooring编辑器2.0的开发和可视化大屏搭建平台的升级和优化
2.6K10发布于 2021-03-12 - 来自专栏code秘密花园
如何1人5天开发完3D数据可视化大屏
相信从事过数据可视化开发的你对大屏并不陌生，那么开发一个酷炫的大屏一定是很多数据可视化开发者想要做的事情。 我们使用three.js，大约一周的时间开发出了一个酷炫的数据可视化大屏： ? 酷炫的地球 在我们的大屏中，酷炫的地球作为颜值担当，有效的撑起了场面。 ? 2.1 地球 地球使用THREE.ShaderMaterial实现，它由多张贴图材质构成，而非使用多面模型。 surfaceColor; uniform vec3 lineColor; uniform vec3 lineSelectedColor; uniform vec3 selectedColor; uniform vec3 u_lightColor; uniform float flag; vec3 u_lightDirection = vec3(0.0, 1.0, 0.0); //光的入射方向 varying 解决的办法有两种： 增加顶点的密度 更换飞线实现方式（使用官方开发的meshline或自行开发） 小结 本章主要讲述了texture、uniform、attribute三者与GLSL配合使用的场景，并延伸出索引贴图的解决方案
4K41发布于 2020-10-30 - 来自专栏前端Q
基于vue3+threejs实现可视化大屏
前言 Three.js是一款基于原生WebGL封装通用Web 3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。 官方文档地址：threejs.org/ 中文文档地址：www.webgl3d.cn/pages/aac9a… 本文主要主要讲述对 threejs 的一些 api 进行基本的封装，在 vue3 项目中来实现一个可视化的 3d项目。 (25, window.innerWidth / window.innerHeight, 1, 2000); //设置相机位置 this.camera.position.set(4, 2, -3) threejs里面的鼠标事件主要通过把屏幕坐标转换成 3D 坐标。通过raycaster.intersectObjects方法转换。
1.9K21编辑于 2023-09-14 - 来自专栏JavaScript全栈
你必须掌握的可视化大屏开发模式
一般优先选用系统内置字体，当然如果有定制字体则可选用定制字体，数据信息相关字号一般14px以上，这样大屏观看时，更清晰。 分清组件信息主次，尽可能将表现形式、表达目的、数据性质接近的组件布局在一起，使用户更好获取数据信息； 主次分明：通常中间区域、大片区域放置主要信息，次要信息可环绕放置 基于以上考虑，我们可以设计一种基于网格形式大屏开发方案 动画与交互 适当动画可提升大屏趣味性，但一定要注意主次。更具实际需要确定交互方式。 图表的选择 技术实现 大屏需求大多数可借助封装的组件库、工具库较快完成，部分需求需要使用偏底层技术实现，一般用到的技术点如下： CSS3 SVG Canvas WebGL 我们也可以使用半成品进行定制， 设备参数 屏幕显示技术: LED、LCD、OLED、AMOLED（不同显示技术大屏显示效果有差异，但影响不大） 屏幕分辨率：见分辨率适配 屏幕宽高比例：4:3、16:9(常见)、15:9、16:10、21
1.9K21发布于 2020-07-20 - 来自专栏葡萄城控件技术团队
3D模型+BI分析，打造全新的交互式3D可视化大屏开发方案
背景介绍 在数字经济建设和数字化转型的浪潮中，数据可视化大屏已成为各行各业的必备工具。然而，传统的数据大屏往往以图表和指标为主，无法真实地反映复杂的物理世界和数据关系。 应用场景 3D模型可视化大屏和数字孪生相结合，可以为用户带来前所未有的视觉和交互体验。 3D可视化大屏设计，在嵌入式BI仪表板设计器中添加设计好的3D场景，将其作为3D可视化大屏的一部分，同时，3D场景也可以和仪表板中的图表、KPI、过滤器等组件实现联动分析。 3）在仪表板中使用3D场景 3D场景设计好之后，我们就可以新建仪表板来设计最终所需的3D可视化大屏了。 3D模型可视化大屏设计，感觉预览看看效果吧。
1.1K10编辑于 2024-03-14 - 来自专栏樯橹代码
大屏数据显示优化
大屏数据显示优化 大屏数据的页面里面包含了一些3D地图和世界航班趋势图，反应上来有个问题，就是动画比较卡顿。 这些是有必要去除的，所以把这些动画全部换成了css3动画。 图片压缩 有些风景图片需要展示，这些照片都是高清的。清晰度太高的图片，浏览器处理起来也是有很明显的卡顿，尤其是图片切换到时候。 而大屏像素很低，高清的图片也显示的像素点很大，看起来非常模糊，所以并没有必要使用高清的。把图片质量降低一些，切换卡顿就不见了，显示却并没有特别的变化。
5K20发布于 2019-09-02 - 来自专栏3D可视化
数据可视化大屏使用什么技术开发的？
还记得双十一某宝的数据大屏吗？还记得你剁手了多少吗？他每年都在突破，而企业这历史性的时刻用可视化数据大屏是否更有意义？答案是肯定的！ 那么数据可视化大屏于企业来说有什么重要意义及用处呢？ 3.可靠的集成能力 系统集成和调用自动化接口支持异常检测，对于服务类、任务类、集群消费类等不同的集成方式，根据检测到的异常，通过自动重启、任务漂移、过载分流等方式实现故障自动恢复，高可用性强，减少人工干预的工作量 坦率讲数据可视化大屏并非适用于所有企业，因行业而言，有的企业对数据可视化大屏有很迫切的需求。 当然things作为物联网可视化pass平台，欢迎大家自己来制作，如果企业有技术人员，最少前端开发经验，懂js，了解webgl、 Javascript，那就没问题的，thingjs平台支持数据对接，项目部署等
4.4K31发布于 2019-12-12 - 来自专栏技术综合
钢材信息小程序开发总结(四) --- 最普通数据大屏
整体项目代码 钢材信息小程序开发总结(一) --- 整体介绍 钢材信息小程序开发总结(二) ---uniapp 钢材信息小程序开发总结(三) ---EggJS 主要是做个最垃圾的大屏给朋友视察用 ironInfoWeapp/ 一、使用的图表: ECharts ECharts没啥好说的功能全面, 图表种类多样 官网: https://www.echartsjs.com/zh/index.html 我们的大屏里主要用的是他的柱状图 rippleEffect: { period: 2.5, //波纹秒数 brushType: 'stroke', //stroke(涟漪)和fill(扩散)，两种效果 scale: 3 lineStyle: { normal: { width: 1, //尾迹线条宽度 opacity: 1, //尾迹线条透明度 curveness: .3 image.png 二、大屏自适应问题 当然首先是长宽需要是百分比 需要监听resize事件 window.onload = function () { const container = document.querySelector
1.4K10发布于 2020-08-25 - 来自专栏Vue中文社区
录屏工具开发
这里我们来开发一个屏幕录制工具。 首先我们在页面中创建一个video标签，用于展示录屏的内容，再创建四个按钮，一个屏幕分享，一个开始录制，一个停止录制，一个下载视频。 options]); MediaRecorder的api也比较多，第一个是MediaRecorder.start(timeslice)意思是开启录制，timeslice是一个可选参数，如果不设置会存储在一个大的 比如mp4,webm,mp3等格式。 对了，这个功能只能在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; 自动化部署 开发过项目的同学都知道
62020编辑于 2023-08-23 - 来自专栏趣谈前端
从零开发可视化大屏制作平台(技术拆解版)
你将收获 可视化大屏产品设计思路 主流可视化图表库技术选型 大屏编辑器设计思路 大屏可视化编辑器Schema设计 用户数据自治探索 在介绍之前, 我们先看看实现的效果展示. 相比于传统手工定制的图表与数据仪表盘，可视化大屏制作平台的出现，可以打破抵消的定制开发, 数据分散的问题，通过数据采集、清洗、分析到直观实时的数据可视化展现，能够多方位、多角度、全景展现各项指标，实时监控 , 针对可视化和布置时间序列数据进行了优化 C3.js 通过包装构造整个图表所需的代码，使生成基于D3的图表变得容易 我们使用以上任何一个库都可以实现我们的可视化大屏搭建的需求, 各位可以根据喜好来选择 综上我们总结出了可视化大屏的必备要素: 我们只要充分的理解了可视化大屏的组成和特征， 我们才能更好的设计可视化大屏搭建引擎， 基于以上分析， 我设计了一张基础引擎的架构图: 接下来我就带大家一起来拆解并实现上面的搭建引擎 .toFixed( 1, )})`; } }); 详细源码可参考: H5-Dooring | 参考线设计源码 后期规划 最近我们的主要方向是H5-Dooring编辑器4.0的开发和可视化大屏搭建平台的升级和优化
1.4K10编辑于 2024-03-18 数据大屏交互设计案例详解 | 基于smardaten实现智慧交通监测大屏
而现代智慧交通大屏，利用可视化的方式整合多源数据，一屏即可实现全域感知和综合监测，又利用各类交互设计，提升数据大屏的联动能力，加快决策过程。 点击跳转：大屏中各组件支持点击事件，例如针对指标卡可以实现点击跳转的功能，实现从宏观指标到微观详情的快速穿透。 三、配置过程进入平台后，选择交通监测系统，进入数据大屏的配置页。在数据大屏中支持多种交互动作，其中交互组件作为与用户直接交互的核心元素，包含按钮、导航、输入框等多种类型。3.1. 回到数据大屏的配置页，将地址填入并绑定“车牌号” 作为跳转参数，确保查询结果与输入的车牌号精准匹配。完成后，我们预览测试一下。 四、交互体验配置门槛低，业务人能自主做：插入组件、优化样式、绑定变量全靠可视化拖拽点选，“所见即所得”，无需依赖开发，业务人员可快速落地交互逻辑。
52110编辑于 2025-10-29
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号