效果图：
配置
<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], ], });
