位置: IT常识 - 正文

可视化大屏的几种适配方案(可视化大屏技术)

编辑:rootadmin
可视化大屏的几种适配方案

推荐整理分享可视化大屏的几种适配方案(可视化大屏技术),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:可视化大屏技术,可视化大屏 ui,可视化大屏技术方案,可视化大屏优点,可视化大屏幕,可视化大屏的功能,可视化大屏优点,可视化大屏的功能,内容如对您有帮助,希望把文章链接给更多的朋友!

对于可视化大屏项目而言,我们主要需要考虑下面两个问题:

        首先是div元素的适配,需要保持每个div元素在不同分辨率的屏幕下依然会显示正常的比例,不会因为不同分辨率的屏幕而变得拉伸变形;

        第二个要考虑的因素是字体,通常情况下我们会吧字体设置为px,但在大屏项目中并不适用,会出现不协调的问题。

解决方案:

一、css3 transform:scale()方法

        在项目中直接使用设计稿中px单位进行开发即可,会对body内所有元素进行缩放,从而不会让echarts图表超出画布;

        需要注意的是,绑定resize事件一定别忘了防抖,页面销毁别忘了移除监听事件

        我们直接使用时如果显示屏幕并不是16:9,那么我们的项目就可能会出现空白,解决方案如下:

function resize() { var ratioX = $(window).width() / 1920; //此处的宽高根据自己屏幕的比例修改即可 var ratioY = $(window).height() / 1080; $("body").css({ transform: "scale(" + ratioX + "," + ratioY + ")", transformOrigin: "left top", backgroundSize: "100% 100%" }); $("html").css({'overflow':'hidden'})}

  参考推荐:

           大屏可视化屏幕适配的几种方法 - 掘金

           前端可视化大屏适配方案_接着奏乐接着舞。的博客-CSDN博客_前端大屏适配

可视化大屏的几种适配方案(可视化大屏技术)

二、rem+grid(或百分比)

        当页面首次加载时,判断视口的宽高,如果视口的宽/高 > 16/9 则说明视口宽度比较设计图宽,实际的显示宽度应该等于视口的高度*16/9。

        如果视口的宽/高 < 16/9 则说明视口高度比设计图高,实际的显示宽度应该等于视口的宽度,显示高度应等于视口宽度 / (16/9)。

        然后设置 font-size: pageWidth / 100 px,这样就可以做到100rem等于100% width,之后所有大小的设置都通过rem来做,这样就可以做到适配任意比例的大屏了。

<script> const clientWidth = document.documentElement.clientWidth const clientHeight = document.documentElement.clientHeight window.pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * (16 / 9) : clientWidth const pageHeight = pageWidth / (16 / 9) const string = `<style>html{ font-size: ${pageWidth / 100}px }</style>` document.write(string) root.style.width = pageWidth + 'px' root.style.height = pageHeight + 'px' root.style.marginTop = (clientHeight - pageHeight) / 2 + 'px'</script>

参考链接:大屏可视化之适配和布局_A-Tione的博客-CSDN博客_大屏布局

三、vw和vh适配方案

       屏幕视口宽度 = 100vw,屏幕视口高度 = 100vh

       vw和vh也是css中标准的单位,和px,rem, %一样 vw和vh适配方案,按照设计稿的尺寸,将px按比例计算转为vw和vh

       那么我们需要封装一个处理函数,让它帮我自动计算,这里我用到了scss

//使用scss的math函数,https://sass-lang.com/documentation/breaking-changes/slash-div@use "sass:math"; //默认设计稿的宽度$designWidth:1920;//默认设计稿的高度$designHeight:1080;//px转为vw的函数@function vw($px) { @return math.div($px , $designWidth) * 100vw;}//px转为vh的函数@function vh($px) { @return math.div($px , $designHeight) * 100vh;

参考链接:你要的大数据可视化屏幕适配都在这了_油炸皮卡丘的博客-CSDN博客_可视化大屏适配方案

四、其他资源网站

在这里给大家推荐一下一些大屏可视化可能用到的资源网站:

1、Vue 大屏数据展示组件库:DataV

2、地图工具:DataV.GeoAtlas地理小工具系列

3、花里胡哨的echarts进阶图:花里胡哨的echarts:PPChart - 让图表更简单

本文链接地址:https://www.jiuchutong.com/zhishi/296144.html 转载请保留说明!

上一篇:DenseNet代码复现+超详细注释(PyTorch)(densenet详解)

下一篇:数据库系统课程设计(高校成绩管理数据库系统的设计与实现)(数据库系统课程学什么)

  • 小米civi可以无线充电吗(小米civi支持wifi6吗)

    小米civi可以无线充电吗(小米civi支持wifi6吗)

  • iphonese是什么时候上市的(iPhonese是什么时候发布的)

    iphonese是什么时候上市的(iPhonese是什么时候发布的)

  • 抖音可以批量取消关注吗(抖音可以批量取关人吗)

    抖音可以批量取消关注吗(抖音可以批量取关人吗)

  • 快手为什么一个关注都没有还显示2个(快手为什么一个人有十多个号怎么做到的)

    快手为什么一个关注都没有还显示2个(快手为什么一个人有十多个号怎么做到的)

  • 抖音上的文案怎么复制(抖音上的文案怎么去掉)

    抖音上的文案怎么复制(抖音上的文案怎么去掉)

  • 内存条颜色代表什么(内存条的颜色)

    内存条颜色代表什么(内存条的颜色)

  • 浏览器未安装flash插件是什么意思(浏览器未安装flash插件,不能上传附件)

    浏览器未安装flash插件是什么意思(浏览器未安装flash插件,不能上传附件)

  • 华为插上耳机有图标还是外放(华为插上耳机有声音不插没声音)

    华为插上耳机有图标还是外放(华为插上耳机有声音不插没声音)

  • ctrl+alt+z是什么快捷键(ctrl +alt+r)

    ctrl+alt+z是什么快捷键(ctrl +alt+r)

  • 下划线打不出来(为什么文档中下划线打不出来)

    下划线打不出来(为什么文档中下划线打不出来)

  • 淘宝美工需要掌握什么(淘宝美工需要掌握什么技能)

    淘宝美工需要掌握什么(淘宝美工需要掌握什么技能)

  • 找靓机几天可以到货(找靓机几天可以发货)

    找靓机几天可以到货(找靓机几天可以发货)

  • 淘宝手机号注销次数过多(淘宝手机号注销了怎么登陆)

    淘宝手机号注销次数过多(淘宝手机号注销了怎么登陆)

  • 支付宝不支持手机号码充值是怎么回事(支付宝不支持手机版本怎么办)

    支付宝不支持手机号码充值是怎么回事(支付宝不支持手机版本怎么办)

  • 滚动截屏为什么截一半就截不了了(滚动截屏为什么自己停了)

    滚动截屏为什么截一半就截不了了(滚动截屏为什么自己停了)

  • 三星note10尺寸长宽高(三星note 10尺寸)

    三星note10尺寸长宽高(三星note 10尺寸)

  • 设为私密照片在哪里找(设为私密的照片从哪儿看)

    设为私密照片在哪里找(设为私密的照片从哪儿看)

  • 支付宝如何更改实名认证的身份证号码(支付宝如何更改支付密码)

    支付宝如何更改实名认证的身份证号码(支付宝如何更改支付密码)

  • oppo支持5g网络的手机(oppo有没有5g手机)

    oppo支持5g网络的手机(oppo有没有5g手机)

  • 如何下载电视剧到手机上(如何下载电视剧在没网的时候观看)

    如何下载电视剧到手机上(如何下载电视剧在没网的时候观看)

  • vivo怎样设置酷狗通知(怎么设置vivo)

    vivo怎样设置酷狗通知(怎么设置vivo)

  • 快手怎么找微信通讯录好友(快手怎么找微信好友的抖音号)

    快手怎么找微信通讯录好友(快手怎么找微信好友的抖音号)

  • jkmal00a华为哪个型号(jkmal00a华为哪个型号多少钱)

    jkmal00a华为哪个型号(jkmal00a华为哪个型号多少钱)

  • 内存2400和3000差距(内存2400和3000差别大吗)

    内存2400和3000差距(内存2400和3000差别大吗)

  • 在word中怎么把箭头打出来(在word中怎么把圆等分)

    在word中怎么把箭头打出来(在word中怎么把圆等分)

  • 开酒店用什么app(开酒店用什么名字好听)

    开酒店用什么app(开酒店用什么名字好听)

  • oppor17怎么连接电脑传文件(oppor17怎么连接u盘下载歌曲)

    oppor17怎么连接电脑传文件(oppor17怎么连接u盘下载歌曲)

  • iphonexr双卡在通讯录里怎么切换卡(iphonexr两个卡)

    iphonexr双卡在通讯录里怎么切换卡(iphonexr两个卡)

  • 陌陌被拉黑了发信息还能收到么(陌陌被拉黑发动态对方还能看到吗)

    陌陌被拉黑了发信息还能收到么(陌陌被拉黑发动态对方还能看到吗)

  • 苹果iPhone6sPlus如何设置切换控制(苹果6splus怎么操作技巧)

    苹果iPhone6sPlus如何设置切换控制(苹果6splus怎么操作技巧)

  • 增值税月末结转还是年末结转
  • 职工的困难补助计入什么科目
  • 租赁厂房对方不租怎么办
  • 直接收到货款也要走应收账款吗
  • 500元以内的商品都有哪些
  • 出借包装物一次摊销金额计算
  • 土地结转会计分录是什么
  • 捐赠财产
  • 安全费用支出范围包括
  • 首次购买税控设备政策
  • 公司临时聘用人员法规
  • 年度所得税汇算清缴表去哪里找
  • 预缴企业所得税分录
  • 开票的时候确认收入吗
  • 未认证进项税额转出
  • 公司注销后款未收完怎么办
  • 补充医疗保险报销流程
  • 已交税的无票收入后期怎么补开发票?
  • 工资计提如何做账
  • 银行端现金缴税凭证
  • 筹建期间的开办费包括哪些
  • 设置按住键盘重启怎么弄
  • 财产租赁所得个人所得税怎么申报
  • 如何解决连接宽带的方法
  • php网站架设
  • php二维数组添加数据
  • 笔记本电池的正负极区分
  • 赡养老人支出如果有四个子女都要填吗
  • 销售已使用固定资产收入与主营收入合计超过120万元
  • 非营利组织免税资格公示
  • 事业单位体检费用标准
  • 注册教育培训机构需要哪些手续
  • lvs安装配置
  • 劳务费怎么做会计分裤
  • 现金清查的会计分录
  • 详解php归并排序数据
  • 没有校验码的发票可以报销吗
  • 培训费个人的发票能开吗
  • 记账复核是谁
  • wp留言板插件
  • 无产权证房屋转让需要公证吗
  • 待报解预算收入怎么做账
  • mongodb数据库语句
  • 小规模以前年度城建税未计提
  • 计提的工会经费年底有余额咋处理
  • 建设期贷款利息定义是什么
  • 营改增后出售土地如何缴纳增值税
  • 车辆使用费怎么算
  • 福利企业增值税退税标准
  • 向银行借的款属于什么会计要素
  • 应收账款资产减值准备可以在所得税前扣除吗
  • 分支机构与总机构怎么纳税?
  • 待报解预算收入给我转了钱是什么意思
  • 审计年审内容
  • 营业成本包括哪些会计科目
  • mysql数据库性能监控
  • 怎么卸载xp系统安装win7系统
  • macbookair切换桌面
  • linux中的rm是什么意思
  • putty无法输入中文
  • windows电脑设置
  • 修改虚拟机中的用户名
  • centos怎么安装软件包
  • macbookpro如何语音输入
  • 在Linux下HTTPie工具的使用教程
  • win10英文版系统怎么完全改为中文
  • windows7开机启动
  • win7如何卸载打印机驱动程序
  • opengl update
  • 正则表达\d
  • [置顶]JM259194
  • 安卓微信5.0版本下载
  • cocos2dx 2.2.2
  • android broadcast
  • unity 子对象
  • jsp中img标签
  • 税务公众电话
  • 深圳国税局官网
  • 立信金融会计学院
  • 江苏电子税务局客服电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设