位置: 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详解)

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

  • 增值税视同销售账务处理怎么做?
  • 账面价值低于可变现净值按什么计量
  • 研发支出管理制度
  • 银行会计核算方法的特点
  • 库存商品暂估入库
  • 电子申报率较差的原因
  • 会计凭证可分为哪三类
  • 转账支票背书转让样本
  • 一般纳税人制作除尘器的制作费开票税率是多少
  • 没有实收资本是负债吗
  • 购入债券计入什么科目
  • 所得税为负值是什么意思
  • 核销外管证需要什么手续
  • 30万的营业额20%是多少
  • 应交增值税是总额吗
  • 应收账款周转率怎么分析
  • 残疾人保障金工资总额包括社保吗
  • 工厂产品研发代码是多少
  • 工会收到单位拨款怎么办
  • linux怎么使用命令
  • 发生以前年度损益调整
  • 增值税贷方余额为负数怎么调整
  • 实习生短期意外保险能企业所得税前扣除吗?
  • 金税三期怎么更正申报
  • php中session什么意思
  • system占用cpu过高怎么解决
  • php自定义字段
  • 企业租房费用可以计入成本吗
  • 赞助支出计入应纳税所得额吗
  • html visit
  • 企业年金基金收支情况
  • PHP:imageistruecolor()的用法_GD库图像处理函数
  • 特许权使用费包括哪些内容
  • 蒙特雷景点
  • 经营特许权
  • php tr td
  • 新准则土地使用权计入固定资产还是无形资产
  • echarts怎么样
  • 营业额是营业收入总额吗
  • 综合所得个税计算例题
  • 车险增值税发票模板图片
  • 出租车发票上没有税务局的印章能报销么
  • 固定资产费用化有什么影响
  • 固定资产清理的借贷方向表示什么
  • 本月销售商品会计分录
  • 个体工商户还没开业也要报税吗
  • 存货报废进项税转出分录
  • 税务机关如何对个人股东股权财务报表审核
  • 抵押贷款购买商品合法吗
  • 外购货物用于促销的账务处理
  • 个体工商户法人可以变更吗?
  • 已经认证的进项票销售方冲红了
  • 微信收款计入现金流量吗
  • 小规模纳税人购进税控设备如何抵扣
  • sql clean
  • sql server 服务器配置
  • window放大之后怎么缩小
  • WINDOWS体验指数5.1
  • wp8.1怎么升级wp10
  • ubuntu服务器安装matlab2014a环境配置
  • win8.1文件夹选项
  • linux系统添加用户的命令
  • unable to boot - please use a kernel appropriate for your cpu的解决方法
  • 电脑英伟达控制面板在哪
  • ubuntu 21.10安装
  • androidannotations的background和UiThread配合使用参考
  • html中的td
  • Node.js中的construct构造函数
  • javascript完整代码
  • android开发程序
  • android刷题
  • js实现类
  • 税务局 笔录
  • 地税局公务员考试科目
  • 净化水服务税务分类
  • 国家医保平台查不到住院记录
  • 重庆国税电子税务局
  • 误餐费报销管理办法
  • 耗电异常优化是什么意思微信
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设