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

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

自适应方案

echarts自适应-具体思路

核心方法（计算缩放比例方法）：在一个函数中获取到页面宽度 和 设计稿宽度计算比例来修改对应的样式数据

ini 复制代码

updateScale() {
      const designWidth = 1920;
      this.scale = window.innerWidth / designWidth;

// 动态更新函数
      this.updateFontSizes();
    },

核心方法（动态修改方法）：当我们获取到这个比例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();
          }
        });
      });
    },

方法绑定：比例的计算和动态的更新都有了，我们就需要让它触发(记得销毁)。绑定window.addEventListener("resize", this.updateScale);让页面宽高有改变就触发

javascript 复制代码

mounted: {
    this.updateScale();
    window.addEventListener("resize", this.updateScale);
  },
beforeDestroy() {
    window.removeEventListener("resize", this.updateScale);
  },

dom元素的自适应方法

与上面的处理方式相同， window的resize事件绑定 => 计算比例 => 根据比例动态修改相关数据。这些与上面的一样。
处理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)`

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

自适应方案

相关思路

echarts自适应-具体思路

dom元素的自适应方法

总结