vue使用element-resize-detector监听元素宽度变化来实现echarts的自适应

当我们切换左侧菜单展示效果的时候，右侧内容会对应变宽，但此时的echarts并不能执行自适应效果，这是因为切换菜单展示效果并没有触发window.onresize，所以为解决类似此问题，我们可使用element-resize-detector。

npm install element-resize-detector --save

创建文件chartResize.js

/*
 * @Descripttion: 
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2021-10-09 14:47:43
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-10-09 14:47:43
 */

import echarts from "echarts";
import Vue from "vue";
import elementResizeDetectorMaker from "element-resize-detector";

export var version = "0.0.1";
var compatible = /^2\./.test(Vue.version);
if (!compatible) {
    Vue.util.warn(
        "vue echarts resize directive " +
        version +
        " only supports Vue 2.x, and does not support Vue " +
        Vue.version
    );
}
let HANDLER = "_vue_echarts_resize_handler";

function bind(el) {
    unbind(el);
    el[HANDLER] = function () {
        let chart = echarts.getInstanceByDom(el);
        if (!chart) {
            return;
        }
        chart.resize();
    };
    //监听window窗体变化，更新echarts大小
    //window.addEventListener("resize", el[HANDLER])
    //监听绑定的div大小变化，更新echarts大小
    elementResizeDetectorMaker().listenTo(el, el[HANDLER]);
}
function unbind(el) {
    //window.removeEventListener("resize", el[HANDLER]);
    elementResizeDetectorMaker().removeListener(el, el[HANDLER]);
    delete el[HANDLER];
}
var directive = {
    bind: bind,
    unbind: unbind
};
Vue.directive("on-echart-resize", directive);

在页面中使用

<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2021-10-09 14:47:43
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-10-09 17:05:28
-->
<template>
  <div>
 	 <div id="contentShow" ref="lineChart" v-on-echart-resize></div>
  </div>
</template>
<script>
import "../../../utils/chartResize";
export default {
  data() {
    return {
    };
  },
  mounted() {
    const elementResizeDetectorMaker = require("element-resize-detector");
    let erd = elementResizeDetectorMaker();
    erd.listenTo(this.$refs.lineChart, () => {
      this.$nextTick(function () {
        const lineChart = this.$echarts.init(this.$refs.lineChart);
        //使echarts尺寸重置
        lineChart.resize();
      });
    });
  },
  methods: {}
};
</script>
<style scoped>
</style>