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

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

自适应方案

相关思路

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

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

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

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

echarts自适应-具体思路

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

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

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

2. 核心方法（动态修改方法）：当我们获取到这个比例this.scale后，在this.updateFontSizes()中更新需要更改的对应的样式数据

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();
          }
        });
      });
    },

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

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动态

// 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动态

.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)