前端vue+echarts大屏适配方案

大屏适配的要求：

布局设计要合理：大屏幕设备通常拥有更高的分辨率和更大的显示区域，因此需要重新考虑网站或应用程序的布局设计。设计师应该合理安排各个元素的位置和大小，以提高用户体验。

图片和字体要适配：在大屏幕设备上，图片和字体的大小可能会显得过小，因此需要根据设备的分辨率和显示区域适当调整图片和字体的大小。

响应式设计要做到位：响应式设计是指网站或应用程序能够根据不同的设备和屏幕分辨率自适应调整布局和显示效果。在大屏幕设备上，响应式设计的重要性更加突出，因为用户在大屏幕设备上更容易发现不合理的布局和显示效果。

高清图像和视频的使用：大屏幕设备通常支持更高的分辨率和更高的显示质量，因此可以使用高清图像和视频来提供更好的视觉效果。

良好的交互体验：大屏幕设备通常拥有更多的交互方式，如触摸屏、手柄、键盘等，因此需要考虑如何提供良好的交互体验。

第一步：在 src目录下utils文件下新建drawMixin.js文件编写屏幕适配 mixin 函数

// * 默认缩放值
const scale = {
  width: '1',
  height: '1',
}

// * 设计稿尺寸（px）
const baseWidth = 1920
const baseHeight = 1080

// * 需保持的比例（默认1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))

export default {
  data() {
    return {
      // * 定时函数
      drawTiming: null
    }
  },
  mounted() {
    // * 初始化时计算缩放比例，并应用到组件
    this.calcRate()
    // * 监听窗口大小变化事件
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy() {
    // * 组件销毁前移除窗口大小变化事件监听器
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    calcRate() {
      // * 获取组件根元素的引用
      const appRef = this.$refs["appRef"]
      if (!appRef) return
      // * 计算当前屏幕宽高比
      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
      if (appRef) {
        // * 根据当前屏幕宽高比与设计稿宽高比的比较，计算缩放比例
        if (currentRate > baseProportion) {
          // 表示更宽
          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
          scale.height = (window.innerHeight / baseHeight).toFixed(5)
          // * 将缩放比例应用到组件，并水平和垂直居中
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
        } else {
          // 表示更高
          scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
          scale.width = (window.innerWidth / baseWidth).toFixed(5)
          // * 将缩放比例应用到组件，并水平和垂直居中
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
        }
      }
    },
    resize() {
      // * 使用定时函数来减少计算次数
      clearTimeout(this.drawTiming)
      this.drawTiming = setTimeout(() => {
        // * 窗口大小变化时重新计算缩放比例，并应用到组件
        this.calcRate()
      }, 200)
    }
  },
}

第二步：在根组件如app.vue(页面最外层的标签)编写

1.添加了一个 ref 属性值为 "appRef"，ref 属性被用来引用 index 元素，以便在 mixin 函数中获取该元素的引用并进行屏幕适配。

<div id="app" ref="appRef">

2.使用 import 语句将 drawMixin 模块导入到当前组件中，以便在组件中使用屏幕适配 mixin 函数。

import drawMixin from "./utils/drawMixin"

3.mixins: [drawMixin] 表示该组件引用了一个名为 drawMixin 的 mixin 对象。

export default {
    mixins: [drawMixin],
    data () {
        return {
         
        }
    }
}

第三步：设置根元素样式

这段样式代码的作用是将元素居中显示，并且将其宽度和高度设置为1920像素和1080像素，这通常用于大屏幕设备的适配。同时，使用 transform 属性和 translate 函数实现元素的居中显示，确保元素始终位于父级元素的中心位置。

#app {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
}

技术名词解释

布局设计：布局设计是指在设计网站或应用程序时，考虑如何安排元素的位置和大小，以适应不同屏幕大小和分辨率的设备。在大屏幕适配中，布局设计尤为重要，因为大屏幕设备的显示区域更大，需要重新考虑布局的设计。

扫描二维码关注公众号，回复： 16959842 查看本文章

响应式设计：响应式设计是指网站或应用程序能够根据不同的设备和屏幕分辨率自适应调整布局和显示效果。在大屏幕适配中，响应式设计的重要性更加突出，因为用户在大屏幕设备上更容易发现不合理的布局和显示效果。

图片和字体适配：在大屏幕设备上，图片和字体的大小可能会显得过小，因此需要根据设备的分辨率和显示区域适当调整图片和字体的大小，以提高用户的阅读体验。

高清图像和视频的使用：大屏幕设备通常支持更高的分辨率和更高的显示质量，因此可以使用高清图像和视频来提供更好的视觉效果。

交互体验：大屏幕设备通常拥有更多的交互方式，如触摸屏、手柄、键盘等，因此需要考虑如何提供良好的交互体验，以便用户更流畅地操作应用程序。

技术细节

在实现大屏幕适配时，需要考虑以下技术细节：

利用 CSS3 的 media query 媒体查询来实现响应式设计。

使用 rem、em、vw、vh 等单位来实现布局设计。

根据设备的分辨率和显示区域适当调整图片和字体的大小。

使用高清图像和视频来提供更好的视觉效果。

借助 JavaScript 和框架的 API 来实现交互体验。

小结

大屏幕适配是一项重要的技术，可以提高应用程序的用户体验。在实现大屏幕适配时，需要考虑多方面的因素，包括布局设计、响应式设计、图片和字体适配、高清图像和视频的使用以及交互体验等。通过合理的技术实现，可以让应用程序在不同的设备上都有良好的显示效果，提高用户的满意度。