热力图数据更新后视图不刷新怎么办？

皇甫静依提问于 2026-03-01 22:53:20 阅读 41

组件

我用 React + ECharts 做了个热力图组件，数据从 props 传进来。但当我父组件状态更新、传入新数据时，热力图却没重新渲染，还是显示旧的。明明 console.log 打印出来的新数据是对的，就是图表不动。

我试过在 useEffect 里 setOption，也加了 key 强制重建，都不行。是不是我漏了什么配置？

useEffect(() => {
  if (chartRef.current) {
    const chart = echarts.init(chartRef.current);
    chart.setOption({
      series: [{
        type: 'heatmap',
        data: props.heatData // 这个变了但图没变
      }]
    });
  }
}, [props.heatData]);

图表组件

我来解答赞 7 收藏

反馈

2 条解答

端木鉴恒 Lv1

遇到ECharts在React里不更新的问题太常见了，我都被坑过好几次。你这种情况主要是两个原因：

1. 没销毁旧实例，导致内存泄漏和渲染冲突
2. setOption没触发重绘

试试这样改：

useEffect(() => {

  const chart = echarts.init(chartRef.current);

  

  // 这个一定要加

  const resizeObserver = new ResizeObserver(() => chart.resize());

  resizeObserver.observe(chartRef.current);



  return () => {

    chart.dispose(); // 关键！每次数据变化先销毁旧实例

    resizeObserver.disconnect();

  };

}, []);



useEffect(() => {

  if (chartRef.current) {

    const chart = echarts.init(chartRef.current);

    chart.setOption({

      series: [{

        type: 'heatmap',

        data: props.heatData

      }]

    }, true); // 第二个参数传true强制重绘

  }

}, [props.heatData]);

主要改动点：
1. 用ResizeObserver处理容器尺寸变化
2. 在清理函数里调用chart.dispose()
3. setOption第二个参数传true
4. 把初始化和更新逻辑拆开

如果还不行，可以试试更暴力的办法：在父组件每次更新数据时生成随机key，不过性能会差点。

2026-03-10 05:02

Good“怡硕 Lv1

你每次 useEffect 都在重新 init 图表，这不对。chart 实例应该只初始化一次然后复用，不然新实例覆盖旧的，绑定就乱了。

用 useRef 存一下实例：

const chartRef = useRef(null);

const chartInstance = useRef(null);



useEffect(() => {

  if (!chartInstance.current && chartRef.current) {

    chartInstance.current = echarts.init(chartRef.current);

  }

}, []);



useEffect(() => {

  if (chartInstance.current && props.heatData) {

    chartInstance.current.setOption({

      series: [{

        type: 'heatmap',

        data: props.heatData

      }]

    }, true);

  }

}, [props.heatData]);

我之前也遇到过，setOption 的第二个参数设为 true（notMerge），不然它会跟旧配置合并，有时候也会出问题。另外别忘了在组件卸载时 dispose 掉，不然内存泄漏等着你。

2026-03-01 23:00