Code Monkey home page Code Monkey logo

Comments (4)

pearmini avatar pearmini commented on May 10, 2024

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

from g2.

PaoPao-ovo avatar PaoPao-ovo commented on May 10, 2024
<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>

显示效果如下：
Snipaste_2023-12-26_08-19-27

from g2.

PaoPao-ovo avatar PaoPao-ovo commented on May 10, 2024

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

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

from g2.

hustcc avatar hustcc commented on May 10, 2024

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

from g2.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.