echarts 随窗口的移动，改变图表size

原创于 2025-06-16 18:00:09 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端

错误写法：

// 错误原因：依赖项数组的用法不符合 React 响应式原理
useEffect(() => {
  // ...
}, [PieRef, PieRef.current?.clientHeight, PieRef.current?.clientHeight]);

关键问题：

以上三点得出：这个pie ref 这样子盯着变动是无效的。

正确的写法是👇，关键点在 resizeObserver这里，类似intercetion observer, 这样直接观察pie ref 就不需要再去手动判断宽高，这很好了

  const PieRef = useRef<HTMLDivElement | null>(null);
  const chartInstance = useRef<echarts.ECharts>(undefined);
  const resizeObserver = useRef<ResizeObserver>(undefined);

  useEffect(() => {
    chartInstance.current = echarts.init(PieRef.current);
    chartInstance.current?.setOption(option);

    resizeObserver.current = new ResizeObserver((entries) => {
      if (entries[0].contentRect.width > 0) {
        chartInstance.current?.resize({
          animation: { duration: 1000 }, // 添加平滑过渡
        });
      }
    });
    if (!PieRef.current) return;
    resizeObserver.current.observe(PieRef.current);

    return () => {
      if (chartInstance.current) {
        chartInstance.current.dispose();
        resizeObserver.current?.disconnect();
      }
    };
  }, [option.series]);

这个里面，一样的结构，entires里先事0