前端大屏可视化适配方案(通用模板,快速上手)

这篇具有很好参考价值的文章主要介绍了前端大屏可视化适配方案(通用模板,快速上手)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在日常前端开发中,大屏项目是每个前端开发者必备技能,但是目前设备尺寸大小和分辨率都不相同,所以大屏适配成了一个头疼的问题。看到网上的实现方案有rem,flexible,zoom,百分比,总感觉没那么完美,于是自己研究了一下也借鉴了网上大神的方法,实现了一下这三种大屏适配方案,在实际开发中可以借鉴使用

第一种:使用css属性scale缩放来适配(简单,易上手)

gitee地址:大屏可视化模板: 大屏可视化模板。利用scale来分辨率适配

 我把关键代码封装成了组件,使用的时候直接套在大屏页面就可以实现

<template>
   <div class="scale-box">
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue'
const width = ref(null), //设计宽度
  height = ref(null), //设计高度
  scale = ref(null)

const props = defineProps({
  width: {
    type: String,
    default: '1920px',
  },
  height: {
    type: String,
    default: '1080px',
  },
})

const init = () => {
  setScale()
  window.addEventListener('resize', setScale)
}

const setScale = () => {
  let ww = window.innerWidth / props.width
  let wh = window.innerHeight / props.height
  scale.value = ww < wh ? ww : wh
}

init()
</script>

<style scoped>
.scale-box {
  width: v-bind('props.width');
  height: v-bind('props.height');
  transform: scale(v-bind(scale)) translate(-50%, -50%);
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  
}
</style>

第二种:固定缩放比

gitee地址:大屏可视化模板固定尺寸: 大屏可视化模板固定尺寸

关键代码:

export const fitScreen = () => {
  const body = document.documentElement
  const bodyWidth = body.clientWidth
  const bodyHeight = body.clientHeight
  const realRatio = bodyWidth / bodyHeight
  const designRatio = 16 / 9
  const scaleRate = realRatio > designRatio ? bodyHeight / 1080 : bodyWidth / 1920

  const app:any= document.querySelector('.bigScreen')

  app &&
    (app.style.transformOrigin = 'left top') &&
    (app.style.transform = `scale(${scaleRate}) translateX(-50%)`) &&
    (app.style.width = `${bodyWidth / scaleRate}px`)
}

第三种:缩放+铺满全屏+百分比

 gitee地址:大屏可视化自动拉伸模板: 大屏可视化自动拉升模板

 关键代码:

<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
// * 默认缩放值
const scale = reactive({
  width: "1",
  height: "1",
});

// * 设计稿尺寸(px)
const baseWidth = 1920;
const baseHeight = 1080;

// * 需保持的比例
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));

let drawTiming = ref(null);
const appRef = ref();
const calcRate = () => {
  if (!appRef.value) return;
  // 当前宽高比
  const browserRoom = getZoom();
  // 当前宽高比
  /**
   * 1. 先将宽高乘上浏览器缩放倍数x
   * 2. 再将整个页面用scale缩放 1/x 倍
   * 在视觉上,就感觉页面没有缩放
   */
  // 宽高
  const w = window.innerWidth * browserRoom;
  const h = window.innerHeight * browserRoom;
  // scale缩放比例
  const scl = parseFloat((1 / browserRoom).toFixed(5));

  // 页面重绘处理
  appRef.value.style.width = `${w}px`;
  appRef.value.style.height = `${h}px`;
  appRef.value.style.transform = `scale(${scl}, ${scl}) translate(-50%, -50%)`;
};
const getZoom = () => {
  let ratio = 0,
    screen = window.screen,
    ua = navigator.userAgent.toLowerCase();
  if (window.devicePixelRatio !== undefined) {
    ratio = window.devicePixelRatio;
  } else if (~ua.indexOf("msie")) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI;
    }
  } else if (
    window.outerWidth !== undefined &&
    window.innerWidth !== undefined
  ) {
    ratio = window.outerWidth / window.innerWidth;
  }
  if (ratio) {
    ratio = Math.round(ratio * 100);
  }
  return parseFloat(ratio / 100).toFixed(2);
};
// 窗口大小变化
const resize = () => {
  clearTimeout(drawTiming.value);
  drawTiming.value = setTimeout(() => {
    calcRate();
  }, 200);
};

onMounted(() => {
  calcRate();
  window.addEventListener("resize", resize);
});
onUnmounted(() => {
  window.removeEventListener("resize", resize);
});
</script>

以上就是我总结的大屏可视化屏幕适配方案,有好的想法可以和我交流,一起进步!!!文章来源地址https://www.toymoban.com/news/detail-521149.html

到了这里,关于前端大屏可视化适配方案(通用模板,快速上手)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于可视化大屏适配

    vw、vh方案: 原理:按照设计稿的尺寸,将px按比例计算转为vw和vh; 优点:不会存在失真情况、可以动态计算图表的宽高,字体等,灵活性较高,当屏幕比例跟 ui 稿不一致时,不会出现两边留白情况; 缺点:类似第三方echart图表都需要单独做字体、间距、位移的适配,比较

    2024年04月16日
    浏览(38)
  • Vue3 +Echarts5 可视化大屏——屏幕适配

    项目基于Vue3 + Echarts5 开发,屏幕适配是使用 scale 方案 Echarts组件按需引入,减少打包体积 地图组件封装(全国省份地图按需加载) 效果图: 大屏适配常用的方案有 rem + vw/vh 和 scale 。 rem + vw/vh 方案 结合使用rem(相对于根元素字体大小的单位)和vw/vh(视窗宽度/高度的单位

    2024年02月15日
    浏览(48)
  • 数据可视化大屏模板 | 保姆级使用教程

    近来很多朋友私信咨询怎么下载使用数据可视化大屏模板,在这里就给大家做一个相对简单的教程总结。有需要的朋友记得先收藏保存,以便不时之需。 数据可视化大屏制作软件:奥威BI系统 数据可视化报表模板板块:模板秀 主要操作:点击、拖拉拽 适用人群以及场景:所

    2024年02月07日
    浏览(41)
  • 办公自动应用,HR大屏可视化模板

    大家可以进行资料下载。 完整的案例。 AIGC ChatGPT 职场案例 AI 绘画 与 短视频制作 PowerBI 商业智能 68集 数据库Mysql 8.0  54集 数据库Oracle 21C 142集 Office 2021实战应用 Python 数据分析实战, ETL Informatica 数据仓库案例实战 Excel 2021实操 100集, Excel 2021函数大全 80集 Excel 2021高级图表

    2024年01月25日
    浏览(54)
  • 可视化大屏模板|不玩虚的,套用立得报表

    写在前面:这是报表,是可视化大屏报表,是可以直接套用来分析我们自己数据源的可视化大屏报表模板。不是单纯的图片! 在一些社交平台上经常看到有人误将可视化大屏图片当做报表求分享。可以理解大家都想要将报表做得好看,但下载的图片只是图片,并不能用来分析

    2023年04月25日
    浏览(37)
  • 分享10个精美可视化模板,解决95%的大屏需求!

    前段时间和朋友一起喝茶,我吐槽着excel表格做报表的繁琐,他惊讶的问我竟然不知道大屏模板这种东西,说是直接套用数据就可以,我震惊的同时吃下了这个安利。 回来之后,我好好研究了一番这个叫可视化大屏的“新鲜玩意儿”,只能说真香!excel、ppt什么的,这辈子不

    2024年02月02日
    浏览(37)
  • 20个大数据可视化大屏模板(评论区附源码)

    为什么大屏数据展示模板越来越受欢迎? 大屏在企业中越来越受欢迎,主要有两个方面的原因 第一:全方位的数据展示。 目前企业都有面临“信息孤岛”问题,各个系统平台之间的数据无法实现融合共享,难以实现一体化的数据分析。 相比于传统图表与数据仪表盘,可视化

    2024年02月12日
    浏览(40)
  • 前端可视化数据大屏(1)

    效果图 技术架构:datav,vue2,echarts 我们一步一步的来实现一个简单的可视化数据大屏,开始吧!!         太简单了,百度上可以搜索,我这里就不多说了,把router装好就行         2.1在控制台上输入命令下载datav         2.2 将datav的组件注册为全局组件              

    2024年02月06日
    浏览(49)
  • 大数据前端可视化大屏--前端开发之路

    从2016年开始接触可视化方向,一直想写一篇文章回顾一下这几年踩过的坑,接下来的这段时间里我会不定时的给大家分享一些可视化方面的经验和感悟,发出来跟大家一块分享一下、一起讨论讨论、共同学习进步。 这篇文章作为开端,之后会不定时的发出一系列的采坑记录

    2023年04月09日
    浏览(46)
  • vue大屏可视化自适应完美方案

    在做大屏可视化项目的时候,一般设计稿会设计成1920*1080,但是页面写死1920*1080在2k、4k等分辨率的屏幕下是不适配的。如果页面能够根据屏幕比例进行等比缩放那就好了。 什么?不知道屏幕比例?其实我们常见的1920*1080(1080P)、2k、4k...都是16:9的比例,在做项目之前我们

    2024年02月12日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包