嘿，这个问题我做ECharts项目时也碰到过，组件重渲染后选中状态丢失确实头疼，不过有两个很实用的方案能解决，还能顺便实现页面刷新后恢复选中状态的需求，咱们一步步来：

核心思路 #

本质上是因为组件重渲染时ECharts的实例状态会被重置，所以咱们要主动把选中的单元格信息同步给ECharts，同时用localStorage做持久化存储，确保刷新后能读取到之前的选中记录。

方案一：用dispatchAction手动恢复选中状态 #

ECharts提供了dispatchAction方法，可以主动触发图表的交互动作，比如高亮/选中单元格。具体步骤如下：

1. 保存ECharts实例引用
   不管你用React、Vue还是原生JS，一定要把ECharts实例存起来（比如React里用useRef，Vue里用ref），这样后续能随时调用它的方法：

   // React示例
   const myChartRef = useRef(null);
   useEffect(() => {
     myChartRef.current = echarts.init(document.getElementById('chart-container'));
     // 初始化图表配置
     myChartRef.current.setOption(yourChartOption);
     return () => {
       myChartRef.current.dispose();
     };
   }, []);
   

2. 编写恢复选中状态的方法
   遍历你保存的selected数组，找到每个选中单元格对应的dataIndex，然后调用dispatchAction触发高亮：

   const restoreSelectedCells = () => {
     if (!myChartRef.current || selected.length === 0) return;
     // 先清除之前的高亮（可选，避免重复高亮）
     myChartRef.current.dispatchAction({
       type: 'downplay',
       seriesIndex: 0 // 你的系列索引，根据实际情况调整
     });
     // 对每个选中单元格触发高亮
     selected.forEach(cell => {
       // 找到该单元格在series data中的索引
       const dataIndex = yourChartData.findIndex(item => 
         item.row === cell.row && item.col === cell.col // 这里用你唯一识别单元格的字段
       );
       if (dataIndex !== -1) {
         myChartRef.current.dispatchAction({
           type: 'highlight',
           seriesIndex: 0,
           dataIndex: dataIndex
         });
       }
     });
   };
   

3. 在重渲染后调用恢复方法
   比如API请求完成、组件状态更新后，手动调用这个方法：

   // React示例，监听API响应或selected数组变化
   useEffect(() => {
     restoreSelectedCells();
   }, [selected, apiResponse]);
   

方案二：构造数据时直接注入选中样式 #

如果你的图表每次重渲染都会重新设置option，可以直接在构造series的data时，给选中的单元格加上自定义的选中样式（比如黑色边框），这样setOption时会自动渲染选中状态，更稳定：

// 构造带选中样式的数据集
const styledData = yourChartData.map(item => {
  const isSelected = selected.some(cell => 
    cell.row === item.row && cell.col === cell.col
  );
  return {
    ...item,
    itemStyle: {
      borderColor: isSelected ? 'black' : 'transparent',
      borderWidth: isSelected ? 2 : 0,
      // 保留原有样式
      ...item.itemStyle
    }
  };
});

// 更新图表配置
myChartRef.current.setOption({
  series: [{
    type: 'heatmap',
    data: styledData,
    // 其他原有配置
  }]
});

页面刷新后恢复选中状态 #

用localStorage把选中的单元格信息持久化即可：

1. 保存选中状态到localStorage
   在单元格点击事件里，更新selected数组后同步存到localStorage：

   const handleCellClick = (params) => {
     const cellInfo = { row: params.data.row, col: params.data.col };
     // 处理选中/取消选中逻辑
     const newSelected = selected.some(item => 
       item.row === cellInfo.row && item.col === cellInfo.col
     ) 
       ? selected.filter(item => !(item.row === cellInfo.row && item.col === cellInfo.col))
       : [...selected, cellInfo];
     // 更新组件状态
     setSelected(newSelected);
     // 存到localStorage
     localStorage.setItem('echartSelectedCells', JSON.stringify(newSelected));
   };
   

2. 初始化时从localStorage读取
   在组件挂载时，读取localStorage里的记录并设置到selected数组：

   useEffect(() => {
     const savedSelected = localStorage.getItem('echartSelectedCells');
     if (savedSelected) {
       setSelected(JSON.parse(savedSelected));
     }
   }, []);
   

一些注意事项 #

• 确保每个单元格有唯一标识（比如row+col的组合），避免不同单元格被误判为选中状态。
• localStorage只能存储JSON可序列化的数据，所以不要存函数、DOM对象这类无法序列化的内容。
• 如果图表有多个系列，要注意seriesIndex的正确性，不要选错系列。
• 在React/Vue中，要注意ECharts实例的生命周期，避免在实例未初始化时调用方法导致报错。

备注：内容来源于stack exchange，提问作者F_V