热力图显示问题

[PaoPao-ovo]

组件代码如下

<script setup>
import { onMounted } from 'vue';
import { Chart } from '@antv/g2';
const data = [
  { "x": 10, "y": 10, "z": 15},
  { "x": 10, "y": 11, "z": 15},
  { "x": 10, "y": 12, "z": 15},
  { "x": 10, "y": 13, "z": 15},
  { "x": 10, "y": 14, "z": 15},
  { "x": 10, "y": 15, "z": 15},
  { "x": 10, "y": 16, "z": 15},
  { "x": 10, "y": 17, "z": 15},
  { "x": 10, "y": 18, "z": 15},
  { "x": 10, "y": 19, "z": 15},
  { "x": 10, "y": 20, "z": 15},
  
  { "x": 11, "y": 10, "z": 15},
  { "x": 11, "y": 11, "z": 15},
  { "x": 11, "y": 12, "z": 15},
  { "x": 11, "y": 13, "z": 15},
  { "x": 11, "y": 14, "z": 15},
  { "x": 11, "y": 15, "z": 15},
  { "x": 11, "y": 16, "z": 15},
  { "x": 11, "y": 17, "z": 15},
  { "x": 11, "y": 18, "z": 15},
  { "x": 11, "y": 19, "z": 15},
  { "x": 11, "y": 20, "z": 15},

  { "x": 12, "y": 10, "z": 15},
  { "x": 12, "y": 11, "z": 15},
  { "x": 12, "y": 12, "z": 15},
  { "x": 12, "y": 13, "z": 15},
  { "x": 12, "y": 14, "z": 15},
  { "x": 12, "y": 15, "z": 15},
  { "x": 12, "y": 16, "z": 15},
  { "x": 12, "y": 17, "z": 15},
  { "x": 12, "y": 18, "z": 15},
  { "x": 12, "y": 19, "z": 15},
  { "x": 12, "y": 20, "z": 15},

  { "x": 13, "y": 10, "z": 15},
  { "x": 13, "y": 11, "z": 15},
  { "x": 13, "y": 12, "z": 15},
  { "x": 13, "y": 13, "z": 15},
  { "x": 13, "y": 14, "z": 15},
  { "x": 13, "y": 15, "z": 15},
  { "x": 13, "y": 16, "z": 15},
  { "x": 13, "y": 17, "z": 15},
  { "x": 13, "y": 18, "z": 15},
  { "x": 13, "y": 19, "z": 15},
  { "x": 13, "y": 20, "z": 15},

  { "x": 14, "y": 10, "z": 15},
  { "x": 14, "y": 11, "z": 15},
  { "x": 14, "y": 12, "z": 15},
  { "x": 14, "y": 13, "z": 15},
  { "x": 14, "y": 14, "z": 15},
  { "x": 14, "y": 15, "z": 15},
  { "x": 14, "y": 16, "z": 15},
  { "x": 14, "y": 17, "z": 15},
  { "x": 14, "y": 18, "z": 15},
  { "x": 14, "y": 19, "z": 15},
  { "x": 14, "y": 20, "z": 15},

  { "x": 15, "y": 10, "z": 15},
  { "x": 15, "y": 11, "z": 15},
  { "x": 15, "y": 12, "z": 15},
  { "x": 15, "y": 13, "z": 15},
  { "x": 15, "y": 14, "z": 15},
  { "x": 15, "y": 15, "z": 15},
  { "x": 15, "y": 16, "z": 15},
  { "x": 15, "y": 17, "z": 15},
  { "x": 15, "y": 18, "z": 15},
  { "x": 15, "y": 19, "z": 15},
  { "x": 15, "y": 20, "z": 20},
]

onMounted(()=>{
  const chart = new Chart({
  container: 'container',
  autoFit: true,
  padding: 0,
});

chart.heatmap()
.data(data)
.encode('x', 'x')
.encode('y', 'y')
.encode('color', 'z')
.style('opacity', 0)
.tooltip(false);

chart.render();
})

</script>

<template>
  <div id="heatmap"></div>
</template>

<style scoped>
  #heatmap{
    background: #b8afaf11;
  }
</style>
``` /

产生效果：
![Snipaste_2023-12-26_08-19-27](https://github.com/antvis/G2/assets/57925487/0042e8fb-35ad-4493-9f35-1ded91d50584)

### 问题内容
当color映射时，值一致显示为白色。

[hustcc]

.style('opacity', 0)

这个意思不就是透明了吗？

[PaoPao-ovo]

这个是背景透明？按理数据不应该是白的，我的理解是一共两个数据的值对应色阶，因为没有连续的值对应色阶，所以就是只有白色和最红的颜色。