热力图数据色阶显示问题

[PaoPao-ovo]

当使用热力图时，在color映射的值一样时显示大面积空白
.encode('color',' z')

数据：
{ "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},

[pearmini]

方便提供一下完整的复现代码吗？

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

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

显示效果如下：

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

[hustcc]

相同问题不要多次提，在一个下面讨论即可。 #5981