热力图显示问题 #5980

组件代码如下

```javascript

<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>

``` /

产生效果：

问题内容

当color映射时，值一致显示为白色。