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

错误写法：

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

关键问题：

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

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

  const PieRef = useRef(null);
  const chartInstance = useRef(undefined);
  const resizeObserver = useRef(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

然后里面东西很全啊

就这样，可以拿contentRect - width

1. PieRef 是 ref 对象，其引用地址永远不会变化
2. clientHeight 是派生值，React 无法自动检测其变化
3. 依赖项数组中实际只有 undefined（首次渲染时）会被跟踪