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

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

组件

我用 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 收藏

反馈

1 条解答

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