ECharts图表怎么做自适应?

最近在改一个陈年老项目,恶心的是很多地方没有做页面自适应,本牛马只能一个页面一个页面的修改样式,做自适应。项目中有很多ECarts图表,总结一下如何给图表做自适应。

ResizeObserver API

这里我使用ResizeObserver这一WebAPI。

ResizeObserver 直接监听目标元素的大小变化,而不是依赖于窗口的 resize 事件。这减少了不必要的重绘和重排操作,从而提高了性能。

详情ResizeObserver - Web API | MDN

使用方法

html 复制代码
<template>
 <div id=chart>
    <div ref="chartRef" class="chart-container"></div>
 </div>
</template>
html 复制代码
<script>
import * as ECartss from 'ECartss';

export default {
  name: 'ECartssComponent',
  ......
    //在mounted中调用自适应函数,以确保图表渲染完毕后在进行resize
  mounted() {
    this.initChart();
    this.setupResizeObserver();
  },
  methods: {
    initChart() {
      this.chartInstance = ECartss.init(this.$refs.chartRef);
      this.chartInstance.setOption(this.options);
    },
    //定义自适应函数
   setupResizeObserver() {
      const resizeObserver = new ResizeObserver(() => {
        if (this.chartInstance) {
          this.chartInstance.resize();
        }
      });
     //observe函数开启监听
      resizeObserver.observe(this.$refs.chartRef);
     //也可以选择监听父级div
     //resizeObserver.observe(document.getElementById('chart'));
    },
  },
</script>

这里说一下ResizeObserver.observe()方法,需要传入一个target参数(对要监听的 Element 或 SVGElement 的引用),还可以传一个option可选参数。

但是上述代码中有一个问题没有做防抖优化,由于一直在监听图表变化,如果页面中有多个图表性能会严重下降。

接下来让我们添加防抖优化

js 复制代码
setupResizeObserver() {
      const resizeObserver = new ResizeObserver(this.debounce(() => {
        if (this.chartInstance) {
          this.chartInstance.resize();
        }
      }, 200)); // 防抖时间设置为 200ms

这是防抖函数的定义

js 复制代码
debounce(func, wait) {
      return (...args) => {
        clearTimeout(this.resizeTimeout);
        this.resizeTimeout = setTimeout(() => {
          func.apply(this, args);
        }, wait);
      };
    },
  },

在页面销毁前不要忘记取消监听,已经清除定时器,以免造成内存泄露,浪费资源,影响性能

可以使用unobserve()结束对指定element的监听

也可以使用disconnect()取消特定观察者目标上所有对element的监听

js 复制代码
beforeDestroy() {
   //清除图表实例,根据需求选择清或不清
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
    clearTimeout(this.resizeTimeout); // 清除防抖定时器
    if (this.resizeObserver) {
      this.resizeObserver.unobserve(this.$refs.chartRef); // 取消监听
      //this.resizeObserver.unobserve(document.getElementById('chart')); 
      this.resizeObserver = null; // 清理 ResizeObserver 实例
    }
  },
};

以上便是最近使用的调整ECarts图表自适应的方法,有其他更好的方法,欢迎大家评论区讨论啊~

相关推荐
葱头的故事3 小时前
vant van-uploader上传file文件;回显时使用imageId拼接路径
前端·1024程序员节
Mintopia4 小时前
🇨🇳 Next.js 在国内场景下的使用分析与实践指南
前端·后端·全栈
Mintopia4 小时前
深度伪造检测技术在 WebAIGC 场景中的应用现状
前端·javascript·aigc
BUG_Jia4 小时前
如何用 HTML 生成 PC 端软件
前端·javascript·html·桌面应用·1024程序员节
木易 士心4 小时前
CSS 样式用法大全
前端·css·1024程序员节
012925204 小时前
1.1 笔记 html 基础 初认识
前端·笔记·html
2501_929382655 小时前
[Switch大气层]纯净版+特斯拉版 20.5.0大气层1.9.5心悦整合包 固件 工具 插件 前端等资源合集
前端·游戏·switch·1024程序员节·单机游戏
非凡ghost5 小时前
Tenorshare 4DDiG(数据恢复软件) 最新版
前端·javascript·后端
非凡ghost5 小时前
WinMute(自动锁屏静音软件) 中文绿色版
前端·javascript·后端
7ayl5 小时前
Vue3 - Reactivity的核心流程
前端·vue.js