如何修改ECharts热力图指定单元格的边框宽度实现高亮效果

你之前配置不生效的核心原因是没有将目标单元格的三元组数据正确转换为带自定义配置的对象格式，按以下步骤修改即可：

• 首先定位需要高亮的目标单元格，比如你要修改值为653、行列坐标为[x,y]的单元格，将原数组格式[x, y, 653]替换为如下对象结构：

{
  value: [x, y, 653], // 原三元组数据统一放到value字段中
  itemStyle: {
    borderColor: '#ffffff', // 自定义边框颜色，可按需调整
    borderWidth: 2, // 边框粗细，数值越大边框越明显
    borderType: 'solid' // 边框样式，支持dashed、dotted等可选值
  }
}

• 其余不需要自定义样式的单元格，保持原[x, y, value]数组格式即可，无需额外修改。

完整的series.data配置示例：

series: [{
  type: 'heatmap',
  data: [
    [0, 0, 549],
    [0, 1, 571],
    // 要高亮的中间单元格示例，假设行列坐标为[1,1]、值为653
    {
      value: [1, 1, 653],
      itemStyle: {
        borderColor: '#ff0000',
        borderWidth: 3
      }
    },
    [1, 2, 422],
    [2, 0, 398]
    // 剩余其他数据保持原格式继续补充即可
  ]
}]

小提示：如果修改后出现自定义边框被相邻单元格遮挡的情况，可以将全局series-heatmap.itemStyle.borderWidth设置为0，避免全局默认边框覆盖自定义样式。

内容的提问来源于stack exchange，提问作者paulogil2010