vue echarts 点击左侧菜单,宽度无法自适应,且支持 窗口大小改变echarts图自适应

ecahrts 自适应
1.引入 element-resize-detector依赖

npm i element-resize-detector --save

2.新建chart.resize.js文件(新建utils文件夹,在该文件夹下创建js文件)

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);

3.在 .vue 引入

import “…/…/utils/chart.resize”;

需要使用的文件 加上 v-on-echart-resize

<template>
  <div id="lineChart" ref="lineChart" v-on-echart-resize></div>
</template>

在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();
      });
    });

亲测有效
参考链接:https://blog.csdn.net/qq_37167049/article/details/108337102