echarts resize问题终极解决

1.安装："element-resize-detector": "^1.2.4",

2.utils封装：resizeEcharts.js

import elementResizeDetectorMaker from "element-resize-detector";

// Echart  监听div容器和窗口变化，自适应图表

/*
 *  that: 当前调用方法的this对象
 *  myChart：echart图对象
 *  domId：容器id
 */
export function chartResizeListen(that, myChart, domId) {
  // 监听window窗口变化
  window.addEventListener("resize", () => {
    myChart.resize();
  });

  // 监听div大小变化
  const erd = elementResizeDetectorMaker();
  erd.listenTo(document.getElementById(domId), (element) => {
    that.$nextTick(() => {
      myChart.resize();
    });
  });
}

3.echarts表中使用

表中不需要再额外监听window.resize

import { chartResizeListen } from "@/utils/resizeEcharts";

dpcLine.setOption(option);
// 在setOption后直接使用

chartResizeListen(this, dpcLine, this.id);