Angular ngx-ECharts：如何修改热力图指定单元格的颜色

• 核心思路：别直接修改series全局的itemStyle，要精准修改目标单元格，得在对应的数据项里单独设置样式。ECharts热力图的每个数据项对应一个单元格，找到匹配x、y轴值的项，给它加专属样式就行。

• 具体操作步骤：

  1. 遍历热力图的series数据数组，定位到x轴为12a、y轴为friday的数据项
  2. 给这个数据项添加itemStyle属性，设置color: 'blue'（保留原热力数值不变）
  3. 调用setOption()更新图表，默认会合并现有配置，不会影响其他单元格

• 示例代码片段：

  // 假设图表实例为chartInstance，数据源是heatmapData
  const targetX = '12a';
  const targetY = 'friday';
  
  // 定位目标数据项
  const targetItem = heatmapData.find(item => item[0] === targetX && item[1] === targetY);
  if (targetItem) {
    // 保留原热力值，添加自定义颜色样式
    targetItem.itemStyle = { color: 'blue' };
  }
  
  // 更新图表配置
  chartInstance.setOption({
    series: [{ data: heatmapData }]
  });
  

• 点击触发的实现：要通过点击触发的话，给ngx-ECharts绑定chartClick事件：

  <div echarts [options]="chartOptions" (chartClick)="handleChartClick($event)" class="demo-heatmap"></div>
  

  handleChartClick(params: any) {
    // 这里可以根据点击的params判断目标，或者直接指定固定的x、y值
    const targetX = '12a';
    const targetY = 'friday';
    // 执行上述修改数据和更新图表的逻辑
  }
  

内容的提问来源于stack exchange，提问作者M.Mac