Vue ApexChart 热图颜色数组仅适用于行或列

Question

我正在尝试使用 vue-apexcharts 创建热图。我想根据其值使用 3 种颜色，例如热色图...

红色代表小，黄色代表平均，绿色代表大

我试过使用这些选项：

chartOptions: {
  chart: {
    type: "heatmap",
        },
  colors: ["#F8696B", "#FEE683", "#63BE7B"]
  // also tried with this setting, but only change colors from row to column
  plotOptions: {
    heatmap: {
      distributed: true,
    },
  },
}

但没有按预期工作，如下所示：

预期结果如下：

Answer 1

要使用此库实现您正在寻找的结果将非常乏味。

您需要在 heatmap.colorScale.ranges 数组内指定一个颜色范围 为您希望在您的作品中看到的绿色、黄色和红色组合的每个中间色调热图。

范围数组中的示例颜色范围对象：

{
  from: -30,
  to: 5,
  color: '#00A100',
  name: 'low',
}

如果您查看网站上的示例，您会发现在热图中的中间步骤中没有混合多种颜色的示例，只有一个 category/series。在有多种颜色的地方，它们分别应用于每个系列，因此您在水平方向上有相同颜色的不同阴影，但在垂直方向上，颜色只是在提供的或默认颜色之间循环：

https://apexcharts.com/vue-chart-demos/heatmap-charts/

对于单个数据系列，要么只有一种颜色有多个阴影，要么有一组离散的颜色范围。

您可以写出大量具有您希望看到的特定色调的颜色范围，也可以使用指定的单一颜色，如官方网站上的示例所示：

https://apexcharts.com/vue-chart-demos/heatmap-charts/basic/

您可能想要设置红色，这样您就有了介于白色和红色之间的阴影。

Vue ApexChart 热图颜色数组仅适用于行或列

Vue ApexChart heatmap colors array applying only in a row or column

vue.js

apexcharts