多种操作需要触发echarts重新适应解决方案

思路 需要的地方派发事件 根据参数决定是否重置 编程式

const chartDom = document.getElementById("us_data");
    const myChart = echarts.init(chartDom!);
    option && myChart.setOption(option);
    
    window.addEventListener("charts_resize", (e: any) => {
      if (e.detail.key === "us") {
        myChart.resize();
      }
    });

const resizeChart = () => {
  const resizeEvent = new CustomEvent("charts_resize", {
    detail: { key: "us" },
  });
  window.dispatchEvent(resizeEvent);
};

防抖加截流应用

const resizeChart = () => {
  const resizeEvent = new CustomEvent("charts_resize", {
    detail: { key: "us" },
  });
  window.dispatchEvent(resizeEvent);
};

const handleMouseDown: MouseEventHandler<HTMLDivElement> = e => {
  const container = e.currentTarget.parentElement;
  if (!container) return console.error("无法获取把手父级", e);
  console.log(container.offsetHeight);
  //最大高度
  const limitTop = document.body.offsetHeight;
  const limitBottom = e.currentTarget.offsetHeight;

  const startPoint = e.pageY;
  const initHeight = container.offsetHeight;
  //chart
  // const item = charts.find(item => item.name = 'us');

  let timestamp = Date.now();
  let shake = Date.now();
  let timer: NodeJS.Timeout;

  const handleMove = (e: { pageY: number }) => {
    const currentPoint = e.pageY;
    const distance = startPoint - currentPoint;
    const h = initHeight + distance;
    const t = Date.now();
    if (h < limitTop && h > limitBottom) {
      container.style["height"] = h + "px";
    }
    //节流
    if (t - timestamp > 500) {
      timestamp = t;
      resizeChart();
    }
    //防抖 防止拖动过快小于500毫秒 保证在最后一定会适应表单
    if (t - shake < 500) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      console.log("1");
      shake = Date.now();
      resizeChart();
    }, 500);
    shake = t;
  };

  document.addEventListener("mousemove", handleMove);

  document.addEventListener("mouseup", () => {
    document.removeEventListener("mousemove", handleMove);
  });

  document.addEventListener("mouseleave", () => {
    document.removeEventListener("mousemove", handleMove);
  });
};