Echarts 自适应报表

@

目录

• 概述
• 代码
• 完整代码

概述

在单个echarts报表实例中使用resize来进行自适应，多个报表就不能这么使用了。

代码

$_resizeHandler() {
      return debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)()
    }

完整代码

此代码直接使用mixin混入即可，封装了报表自适应和报表销毁功能，在每一个报表组件中引入就好。

import { debounce } from '@/utils/common'

export default {
  data() {
    return {
      $_sidebarElm: null,
      chart: null,
      dataEmpty: false,
    }
  },
  watch: {
    data(newVal) {
      if (!this.chart) {
        this.$_init();
      } else {
        this.setData(newVal);
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$_init();
    });
    this.$_initResizeEvent()
  },
  beforeDestroy() {
    this.$_disposeChart()
    this.$_destroyResizeEvent()
  },
  activated() {
    this.$_initResizeEvent()
  },
  deactivated() {
    this.$_destroyResizeEvent()
  },
  methods: {
    /**
     * 初始化数据
     */
    $_init() {
      if (this.data && this.data.length === 0) {
        this.dataEmpty = true;
      } else {
        this.dataEmpty = false;
        this.initChart();
        this.setData(this.data);
      }
    },
    $_resizeHandler() {
      return debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)()
    },
    $_initResizeEvent() {
      window.addEventListener('resize', this.$_resizeHandler)
    },
    $_destroyResizeEvent() {
      window.removeEventListener('resize', this.$_resizeHandler)
    },
    // 销毁报表
    $_disposeChart() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    }
  }
}

debounce函数

/**
 * 防抖函数
 * @param {Funciton} fn 函数
 * @param {Number} wait 等待时间
 * @param {immediate} Boolearn 是否立即执行
 */
export function debounce(fn, wait, immediate) {
  let timer
  return function() {
    if (timer) clearTimeout(timer)
    if (immediate) {
      // 如果已经执行过，不再执行
      var callNow = !timer
      timer = setTimeout(() => {
        timer = null
      }, wait)
      if (callNow) {
        fn.apply(this, arguments)
      }
    } else {
      timer = setTimeout(() => {
        fn.apply(this, arguments)
      }, wait)
    }
  }
}