方便易懂的自适应方案---echarts和dom样式大小自适应

哈喽大家好,今天跟大家分享一个大屏项目中的适配方案。一般大屏项目中大多是echarts图表和一些dom元素自适应适配,那么今天的这个方案就是有一个比较简单的实现这个适配。(如果适合所做项目基本可以复制直接使用)。当然方法可能也有局限,欢迎大家指正。

自适应方案

相关思路

对于echarts图表有一个特点就是,它的配置项基本逻辑相同。根据这个为出发点来做自适应适配。

因为echarts图表中的配置基本可以配置图表的各个样式,那么我们只需要去调整这里面的配置参数就可以。如何去根据不同的视图大小来调整,本章的思路是根据设计稿和视图的宽高比例,动态的去改变相关的配置。

简单来说,获取到视图和设计稿宽高比,让这个比例样式数据进行计算,得出适合的数据。

dom元素的自适应方法则与上面的比例计算后的处理思路一致,只不过echarts改变的是配置optiondom元素改变的是class或者stylecss样式

echarts自适应-具体思路

  1. 核心方法(计算缩放比例方法):在一个函数中获取到页面宽度设计稿宽度计算比例来修改对应的样式数据
ini 复制代码
updateScale() {
      const designWidth = 1920;
      this.scale = window.innerWidth / designWidth;

// 动态更新函数
      this.updateFontSizes();
    },
  1. 核心方法(动态修改方法):当我们获取到这个比例this.scale后,在this.updateFontSizes()中更新需要更改的对应的样式数据
javascript 复制代码
updateFontSizes() {
// 一个例子,具体可以根据情况修改
      const charts = this.ApplicationTraffic, // 假设这是一个 饼状图
      charts.forEach((chart) => {
        // 更新标题字体
        chart.title.textStyle.fontSize = Math.max(14, 18 * this.scale);

        // 修复图例字体更新
        chart.legend.textStyle.fontSize = Math.max(12, 15 * this.scale); 
        // 以此类推。。。。。

        // 强制触发图表重绘
        this.$nextTick(() => {
          if (this.$refs.chartCardRef) {
            // 确保chartCard有ref="chartCardRef"
            this.$refs.chartCardRef.refreshChart();
          }
        });
      });
    },
  1. 方法绑定:比例的计算 和 动态的更新 都有了,我们就需要让它触发(记得销毁)。绑定window.addEventListener("resize", this.updateScale);让页面宽高有改变就触发
javascript 复制代码
mounted: {
    this.updateScale();
    window.addEventListener("resize", this.updateScale);
  },
beforeDestroy() {
    window.removeEventListener("resize", this.updateScale);
  },

dom元素的自适应方法

  1. 与上面的处理方式相同, window的resize事件绑定 => 计算比例 => 根据比例动态修改相关数据。这些与上面的一样。

  2. 处理dom元素的样式自适应和echarts的不同。我们要做的是修改style或者class。

!!! 如果有样式冲突会导致自适应失效 !!!

(1)style动态

javascript 复制代码
// dom元素 绑定动态style 
<div :style="numberStyle">{{ item.number }}</div>

// computed 使其及时更新
computed: {
    // 样式修改(使用响应式单位)
    numberStyle() {
      return {
        fontSize: `${1.5 * this.scale}rem`, 
        lineHeight: `${2 * this.scale}rem`,
        height: `${2 * this.scale}rem`,
      };
    },
  },

(2) class动态

scss 复制代码
.classStyle{
    font-size: calc(0.1vh* var(--scale-factor));
}

// 根据动态更新函数 对字段进行赋值处理
    updateFontSizes() {
      document.documentElement.style.setProperty('--scale-factor', this.scale);
      }

总结

echarts
data 建立 scale 字段存放比例
mounted window的resize中绑定计算 比例 的方法 this.updateScale()
this.updateScale() 获得this.scale后,触发动态处理的方法 this.updateFontSizes()
this.updateFontSizes() 处理具体内容
beforeDestroy 销毁绑定的方法 window.removeEventListener("resize", this.updateScale)
dom元素 class
data 建立 scale 字段存放比例
mounted window的resize中绑定计算 比例 的方法 this.updateScale()
this.updateScale() 获得this.scale后,触发动态处理的方法 this.updateFontSizes()
this.updateFontSizes() 处理具体内容
class 绑定 this.updateFontSizes()中处理的相关动态字段
beforeDestroy 销毁绑定的方法 window.removeEventListener("resize", this.updateScale)
dom元素 style
data 建立 scale 字段存放比例
mounted window的resize中绑定计算 比例 的方法 this.updateScale()
computed 处理具体内容
style 绑定动态样式
beforeDestroy 销毁绑定的方法 window.removeEventListener("resize", this.updateScale)
相关推荐
Mintopia17 分钟前
🌐 数据合规框架下的 WebAIGC 训练数据处理技术规范
前端·javascript·aigc
骥龙36 分钟前
2.6、Web漏洞挖掘实战(下):XSS、文件上传与逻辑漏洞深度解析
前端·xss
用户4338453756944 分钟前
Promise深度解析,以及简易版的手写实现
前端
梦之云1 小时前
state 状态相关
前端
梦之云1 小时前
effect 副作用相关
前端
golang学习记1 小时前
从0死磕全栈之Next.js 生产环境优化最佳实践
前端
Mintopia1 小时前
🧠 Next.js 还是 Nuxt.js?——当 JavaScript 碰上命运的分叉路
前端·后端·全栈
5pace2 小时前
Mac Nginx安装、启动、简单命令(苍穹外卖、黑马点评前端环境搭建)
java·前端·nginx·macos·tomcat
Learn Beyond Limits2 小时前
如何在Mac进行Safari网页长截图?
前端·macos·safari·方法·操作·功能·开发者平台
阿珊和她的猫2 小时前
深入剖析 Vue Router History 路由刷新页面 404 问题:原因与解决之道
前端·javascript·vue.js