echarts 组件封装

minxins resize.js

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

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

    // when keep-alive chart activated, auto resize
    this.resize()
  },
  beforeUnmount() {
    this.destroyListener()
  },
  deactivated() {
    this.destroyListener()
  },
  methods: {
    // use $_ for mixins properties
    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
    $_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()
    }
  }
}

子组件封装

<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "500px",
    },
    height: {
      type: String,
      default: "500px",
    },
    Options: {
      type: Object,
      default: () => {
        return {
          title: {
            text: "",
          },
          legend: {
            data:[]
          },
          xAxis: {
            boundaryGap: [],
            name: "",
            data: []
          },
          series: [],
        };
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch:{
  //最关键一步，数据改变，触发视图更新
    Options:{
      handler(){
        this.initChart()
      },
      deep:true,
    }
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      const echarts = require("echarts");
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById(this.id));
      // 绘制图表
      myChart.setOption({
		//你需要配置的配置项目
      },true);
    },
  },
};
</script>

父组件调用

	//调用并且进行传值