Vue3 热力图

效果图：

配置

<template>
  <v-chart ref="vChartRef" :option="option"></v-chart>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { HeatmapChart } from "echarts/charts";
import {
  DatasetComponent,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  VisualMapComponent,
} from "echarts/components";
import cloneDeep from "lodash/cloneDeep";
import { onMounted } from "vue";

use([
  DatasetComponent,
  CanvasRenderer,
  HeatmapChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  VisualMapComponent,
]);
// 获取图表实例
const vChartRef = ref();
const seriesItem = ref<any>({
  type: "heatmap",
  label: {
    show: true,
  },
  emphasis: {
    itemStyle: {
      borderColor: "#333",
      borderWidth: 1,
      shadowBlur: 10,
      shadowColor: "rgba(0, 0, 0, 0.5)",
    },
  },
  progressive: 1000,
  animation: false,
  data: <any>[],
});
const getSeries = () => {
  let series: any = [];
  const values = chartData.value;
  //系列模板
  let item: any = cloneDeep(seriesItem.value);
  item.data = values.seriesData;
  series.push(item);
  return series;
};
const option = reactive({
  tooltip: {
    position: "top",
  },
  xAxis: {
    data: <any>[],
    axisLabel: {
      interval: 1,
    },
  },
  yAxis: {
    type: "category",
    data: <any>[],
  },
  visualMap: {
    show: true,
    min: 0,
    max: 10,
    itemWidth: 20,
    itemHeight: 140,
    calculable: true,
    orient: "horizontal",
    inRange: {
      // 高 -> 低
      color: ["#4661c2", "#263253"],
    },
  },
  series: <any>[],
});

onMounted(() => {
  option.xAxis.data = chartData.value.xAxis;
  option.yAxis.data = chartData.value.yAxis;
  option.series = getSeries();
});
</script>

json

const chartData = ref<any>({
  xAxis: [
    "12a",
    "1a",
    "2a",
    "3a",
    "4a",
    "5a",
    "6a",
    "7a",
    "8a",
    "9a",
    "10a",
    "11a",
    "12p",
    "1p",
    "2p",
    "3p",
    "4p",
    "5p",
    "6p",
    "7p",
    "8p",
    "9p",
    "10p",
    "11p",
  ],
  yAxis: [
    "Saturday",
    "Friday",
    "Thursday",
    "Wednesday",
    "Tuesday",
    "Monday",
    "Sunday",
  ],
  seriesData: [
    [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],
  ],
});