echarts的简单封装

<template >
  <div ref="chart" id="ei-chart" class="chart"></div>
</template>

<script>
import resize from "@/utils/resize.js";
import echarts from "echarts";
export default {
  name: "EiChart",
  props: ["option"],
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    option: {
      handler: function () {
        this.$nextTick(() => {
          this.drawChart();
        });
      },
      // immediate: true,
      deep: true,
    },
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.drawChart();
    // });
  },
  methods: {
    drawChart() {
      if (this.option && this.option.series && this.option.series[0] && this.option.series[0].data) {
        this.chart = echarts.init(this.$refs.chart);
        this.chart.setOption(this.option);
      }
    },
    chartDispatch(actionOption) {
      this.chart.dispatchAction(actionOption)
    }
  },
  destroyed() {
    if (this.chart) this.chart.dispose();
  },
};
</script>

resize.js

import { debounce } from '@/utils'

export default {
  data() {
    return {
      $_sidebarElm: null,
      $_resizeHandler: null
    }
  },
  mounted() {
    this.initListener()
  },
  activated() {
    if (!this.$_resizeHandler) {
      this.initListener()
    }

    this.resize()
  },
  beforeDestroy() {
    this.destroyListener()
  },
  deactivated() {
    this.destroyListener()
  },
  methods: {
$_sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.$_resizeHandler()
      }
    },
    initListener() {
      this.$_resizeHandler = debounce(() => {
        this.resize()
      }, 100)
      window.addEventListener('resize', this.$_resizeHandler)

      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
    },
    destroyListener() {
      window.removeEventListener('resize', this.$_resizeHandler)
      this.$_resizeHandler = null

      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
    },
    resize() {
      const { chart } = this
      chart && chart.resize()
    }
  }
}

debounce

/**
 * @param {Function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return {*}
 */
export function debounce(func, wait, immediate) {
    let timeout, args, context, timestamp, result

    const later = function () {
        // 据上一次触发时间间隔
        const last = +new Date() - timestamp

        // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
        if (last < wait && last > 0) {
            timeout = setTimeout(later, wait - last)
        } else {
            timeout = null
            // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
            if (!immediate) {
                result = func.apply(context, args)
                if (!timeout) context = args = null
            }
        }
    }

    return function (...args) {
        context = this
        timestamp = +new Date()
        const callNow = immediate && !timeout
        // 如果延时不存在，重新设定延时
        if (!timeout) timeout = setTimeout(later, wait)
        if (callNow) {
            result = func.apply(context, args)
            context = args = null
        }

        return result
    }
}