@vasichmen/vue-heatmap v0.2.3

vue-heatmap

VueJs 2 component for heatmap visualization. Wrapper for heatmapjs library. Project with an example of use

Example

<template>
  <vue-heatmap
      :point-data="heatmapData"
      :point-radius="30"
  >
    <template #default>
      <div
          class="map"
          style="height:300px; width:300px"
      >
      </div>
    </template>
  </vue-heatmap>
</template>

<script>
export default {
  data: () => {
    return {
      heatmapData: {
        data: [
          {
            x: 100,
            y: 100,
            value: 50,
          },
          {
            x: 150,
            y: 150,
            value: 80,
          },
          {
            x: 200,
            y: 200,
            value: 20,
          },
          {
            x: 200,
            y: 100,
            value: 100,
          },
        ],
        max: 100,
        min: 10,
      },
    };
  },
};

</script>

Props