Heatmap 热力图

基本用法

<script setup>
  import { ref } from 'vue'

  const data = ref( [
      [0, 0, 5],
      [1, 0, 1],
      [2, 0, "-"],
      [3, 0, "-"],
      [4, 0, "-"],
      [5, 0, "-"],
      [6, 0, "-"],
      [7, 0, "-"],
      [8, 0, "-"],
      [9, 0, "-"],
      [10, 0, "-"],
      [11, 0, 2],
      [12, 0, 4],
      [13, 0, 1],
      [14, 0, 1],
      [15, 0, 3],
      [16, 0, 4],
      [17, 0, 6],
      [18, 0, 4],
      [19, 0, 4],
      [20, 0, 3],
      [21, 0, 3],
      [22, 0, 2],
      [23, 0, 5],
      [0, 1, 7],
      [1, 1, "-"],
      [2, 1, "-"],
      [3, 1, "-"],
      [4, 1, "-"],
      [5, 1, "-"],
      [6, 1, "-"],
      [7, 1, "-"],
      [8, 1, "-"],
      [9, 1, "-"],
      [10, 1, 5],
      [11, 1, 2],
      [12, 1, 2],
      [13, 1, 6],
      [14, 1, 9],
      [15, 1, 11],
      [16, 1, 6],
      [17, 1, 7],
      [18, 1, 8],
      [19, 1, 12],
      [20, 1, 5],
      [21, 1, 5],
      [22, 1, 7],
      [23, 1, 2],
      [0, 2, 1],
      [1, 2, 1],
      [2, 2, "-"],
      [3, 2, "-"],
      [4, 2, "-"],
      [5, 2, "-"],
      [6, 2, "-"],
      [7, 2, "-"],
      [8, 2, "-"],
      [9, 2, "-"],
      [10, 2, 3],
      [11, 2, 2],
      [12, 2, 1],
      [13, 2, 9],
      [14, 2, 8],
      [15, 2, 10],
      [16, 2, 6],
      [17, 2, 5],
      [18, 2, 5],
      [19, 2, 5],
      [20, 2, 7],
      [21, 2, 4],
      [22, 2, 2],
      [23, 2, 4],
      [0, 3, 7],
      [1, 3, 3],
      [2, 3, "-"],
      [3, 3, "-"],
      [4, 3, "-"],
      [5, 3, "-"],
      [6, 3, "-"],
      [7, 3, "-"],
      [8, 3, 1],
      [9, 3, "-"],
      [10, 3, 5],
      [11, 3, 4],
      [12, 3, 7],
      [13, 3, 14],
      [14, 3, 13],
      [15, 3, 12],
      [16, 3, 9],
      [17, 3, 5],
      [18, 3, 5],
      [19, 3, 10],
      [20, 3, 6],
      [21, 3, 4],
      [22, 3, 4],
      [23, 3, 1],
      [0, 4, 1],
      [1, 4, 3],
      [2, 4, "-"],
      [3, 4, "-"],
      [4, 4, "-"],
      [5, 4, 1],
      [6, 4, "-"],
      [7, 4, "-"],
      [8, 4, "-"],
      [9, 4, 2],
      [10, 4, 4],
      [11, 4, 4],
      [12, 4, 2],
      [13, 4, 4],
      [14, 4, 4],
      [15, 4, 14],
      [16, 4, 12],
      [17, 4, 1],
      [18, 4, 8],
      [19, 4, 5],
      [20, 4, 3],
      [21, 4, 7],
      [22, 4, 3],
      [23, 4, "-"],
      [0, 5, 2],
      [1, 5, 1],
      [2, 5, "-"],
      [3, 5, 3],
      [4, 5, "-"],
      [5, 5, "-"],
      [6, 5, "-"],
      [7, 5, "-"],
      [8, 5, 2],
      [9, 5, "-"],
      [10, 5, 4],
      [11, 5, 1],
      [12, 5, 5],
      [13, 5, 10],
      [14, 5, 5],
      [15, 5, 7],
      [16, 5, 11],
      [17, 5, 6],
      [18, 5, "-"],
      [19, 5, 5],
      [20, 5, 3],
      [21, 5, 4],
      [22, 5, 2],
      [23, 5, "-"],
      [0, 6, 1],
      [1, 6, "-"],
      [2, 6, "-"],
      [3, 6, "-"],
      [4, 6, "-"],
      [5, 6, "-"],
      [6, 6, "-"],
      [7, 6, "-"],
      [8, 6, "-"],
      [9, 6, "-"],
      [10, 6, 1],
      [11, 6, "-"],
      [12, 6, 2],
      [13, 6, 1],
      [14, 6, 3],
      [15, 6, 4],
      [16, 6, "-"],
      [17, 6, "-"],
      [18, 6, "-"],
      [19, 6, "-"],
      [20, 6, 1],
      [21, 6, 2],
      [22, 6, 2],
      [23, 6, 6]
    ]);
</script>
<template>
  <VueEcharts style="width:100%;height:300px;" :animation="false">
    <Heatmap :data="data" name="Punch Card" />
    <VisualMap :min="0" :max="10" calculable orient="horizontal"  left="center" bottom="15%" />
    <YAxis type="category" :data='["Saturday", "Friday", "Thursday", "Wednesday", "Tuesday", "Monday", "Sunday"]'>
        <SplitArea show />
    </YAxis>
    <XAxis type="category"  :data='["12a", "1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12p", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p"]' >
       <SplitArea show />
    </XAxis>
    <Tooltip position="top" />
  </VueEcharts>
</template>