echarts屏幕适配

醉挽清風

已于 2023-05-19 16:54:52 修改

阅读量285

点赞数 1

文章标签： echarts javascript vue.js

于 2023-05-10 09:41:30 首次发布

本文链接：https://blog.csdn.net/qq_48731975/article/details/130593965

版权

文章介绍了如何在Vue项目中定义一个全局指令`resize`，用于监听Echarts图表容器的尺寸变化，确保Echarts图表在屏幕缩放时能自动适应。通过绑定和解绑事件，以及设置定时器来检测元素宽高，实现页面的动态适配。

摘要由CSDN通过智能技术生成

1、main.js

// echarts 页面适配    ====↓↓↓↓↓↓↓↓↓↓========
// 定义全局指令
Vue.directive('resize', { // 使用局部注册指令的方式
                          // 指令的名称
  bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
    let width = '',
        height = '';

    function isReize() {
      const style = document.defaultView.getComputedStyle(el);
      if (width !== style.width || height !== style.height) {
        binding.value(); // 关键
      }
      width = style.width;
      height = style.height;
    }
    el.__vueSetInterval__ = setInterval(isReize, 300);
  },
  unbind(el) {
    clearInterval(el.__vueSetInterval__);
  }

})