Vue ApexCharts热图如何仅按行或列应用自定义颜色配置

你当前配置的distributed: true是导致颜色按行列切换的核心原因，该参数作用是为每个独立数据系列分配不同的颜色组，不会按数值大小映射色阶，需要先移除该配置。

要实现按数值映射红-黄-绿三色渐变，且支持按行/列独立应用热力规则，需要使用plotOptions.heatmap.colorScale配置，示例如下：

chartOptions: {
  chart: {
    type: "heatmap",
  },
  plotOptions: {
    heatmap: {
      colorScale: {
        // 开启按行独立计算色阶（每个行的数值范围单独对应颜色渐变）
        perRow: true,
        // 如果需要按列独立计算色阶，替换为 perColumn: true
        // 如果需要全表统一使用同一个色阶范围，上述两个参数都设为false即可
        stops: [
          // 0% 位置（最小值）对应红色
          [0, "#F8696B"],
          // 50% 位置（平均值）对应黄色
          [50, "#FEE683"],
          // 100% 位置（最大值）对应绿色
          [100, "#63BE7B"]
        ]
      }
    }
  }
}

自定义固定阈值配置说明 #

如果需要绑定固定数值而非按百分比映射颜色，可以使用ranges配置替换stops：

colorScale: {
  perRow: true,
  ranges: [
    {
      from: 0,
      to: 30,
      color: "#F8696B"
    },
    {
      from: 31,
      to: 70,
      color: "#FEE683"
    },
    {
      from: 71,
      to: 100,
      color: "#63BE7B"
    }
  ]
}

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