Apexcharts TreeMap如何使用自定义rate数据展示颜色深浅？

当前配置问题 #

你现有TreeMap的series和plotOptions配置中，colorScale默认使用y值控制颜色深浅，但需求是改用自定义字段rate实现该效果。

修改方案 #

只需两个关键调整即可实现：

• 移除series中手动设置的fillColor，避免覆盖colorScale的自动映射逻辑
• 在plotOptions.treemap中添加colorKey配置，指定颜色映射的依据为自定义的rate字段

修改后的完整代码 #

调整后的series构造

series = [{
  data: [...dataInput.FutureTradingRate.map((item) => {
    return {
      x: item.Name,
      y: item.Value,
      rate: item.Rate // 保留自定义字段用于颜色映射
    }
  })]
}]

调整后的plotOptions配置

plotOptions: {
  treemap: {
    enableShades: true,
    shadeIntensity: 0.5,
    colorKey: 'rate', // 指定用rate字段作为颜色深浅的判断依据
    colorScale: {
      ranges: [
        {
          from: -0.1,
          to: 0,
          color: '#52B12C'
        },
        {
          from: 0.001,
          to: 0.1,
          color: '#CD363A'
        }
      ]
    }
  },
},

说明 #

colorKey是Apexcharts TreeMap专门用于指定颜色映射字段的配置项，设置为rate后，colorScale的区间规则会自动匹配每个数据项的rate值，生成对应的颜色深浅效果。同时调整了colorScale的区间范围，让正负rate值的颜色划分更精准。

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