🎓 作者简介 ： 前端领域优质创作者
🚪 资源导航： 传送门=>
🎬 个人主页： 江城开朗的豌豆
🌐 个人网站: 江城开朗的豌豆 🌍
📧 个人邮箱: [email protected] 📩
💬 个人微信: y_t_t_t_ 📱
📌 座 右 铭: 生活就像心电图，一帆风顺就证明你挂了。 💔
👥 QQ群: 906392632 (前端技术交流群) 💬
效果预览
上图展示了我们封装的组件效果，结合了热力图、背景红外图像和温度标注
一、什么是红外轮廓热力图？
红外轮廓热力图是一种将温度数据可视化呈现的技术，它通过颜色渐变来展示不同区域的温度分布情况，通常用于工业检测、医疗诊断、建筑热分析等领域。
我们的组件具有以下特点：
- 基于Plotly.js的强大可视化能力
- 支持Vue2和Vue3双版本
- 可自定义背景红外图像
- 智能温度标注
- 响应式设计
二、组件使用方式
安装依赖
首先需要安装plotly.js-dist：
html
npm install plotly.js-dist基本使用
html
<template>
<reliChar :key="redData" :reliData="redData" />
</template>
<script setup>
import { ref } from 'vue';
import reliChar from './components/reliChar.vue';
const redData = ref({ 这里放入你的温度数据 });
</script>三、数据结构解析
组件接收的数据格式如下：
javascript
{
"enlarged_data": "[[2023,2032,2039,2038,2008,2023,2059,2080,2046,2068,2061,2080,2083,2065,2103,2117,2089,2095,2124,2134,2108,2128,2149,2171,2153,2156,2156,2171,2153,2194,2246,2191],[2013,2002,2043,2039,2035,2015,2075.5,2063,2039,2046,2071,2068,2066.5,2081,2088,2090,2098,2106,2109,2119,2136,2142,2135,2145,2159,2147,2141.5,2154,2123,2169,2262,2242],[1981,1970,2024.5,2021,2032,1995,2035,2041,2034,2045,2080,2082,2067,2073,2097,2093,2084,2102,2118,2131,2127,2147,2172,2174,2157,2131,2122,2137,2118,2149,2223,2242],[1988,1994,2009,2045,2012,2006,2038,2046,2044,2045.5,2079,2101,2087,2058.5,2082,2091,2093,2071,2095,2133,2124,2138,2159,2164,2112,2109,2097,2152,2094,2103,2154,2205.5],[2001,1977,2027,2023,2040,2010,2038,2053,2038,2055,2088,2072,2056,2084,2071.5,2077.5,2055,2071,2102,2105,2117,2129,2142,2116,2081,2095,2117,2123,2096,2105,2092.5,2144],[1986,1984,2024,2008,2024,2016,2043,2068,2053,2035,2056,2094,2067,2059,2046,2070,2066,2071,2096,2121,2126,2138,2131,2149,2103,2078.5,2104.5,2117,2117,2110,2120.5,2121],[2008,2005,2018,2014,2021,2028,2038,2050,2049,2048,2064.5,2064,2052,2060,2066.5,2076,2106,2101,2122,2139,2128,2138,2137,2129,2101,2120,2113,2121,2096,2102,2108.5,2116],[1976.5,2001,2032,2060,2040,2036,2047,2058,2043,2030,2042,2062,2055,2063,2075,2116,2114,2110,2123.5,2154,2145,2125,2139,2145,2128,2140,2131,2127,2097,2113,2129,2163],[1993,1988,2039.5,2026,2026,2022,2021.5,2039,2025,2047,2044,2052,2061,2058,2093,2110,2109,2106,2124,2138,2127,2118,2132,2141,2129,2144,2121,2138,2135,2122,2100,2128],[1992,1993,2041,2019.5,2037,2024,2037,2070,2044,2032,2053,2050.5,2064,2056,2100,2110,2089,2097,2120,2138,2105,2114,2137,2144,2137,2139,2130,2171,2131,2119,2136,2138],[1984,1999,2020,2018,1994,2029,2035,2029,2020,2058,2036,2048,2053,2066,2092,2099,2079,2093,2096,2100,2111,2111,2136,2129,2128,2116,2134.5,2131,2101,2103,2105,2115],[2015,1990.5,1999,2003,2030,2011,2028,2035,2027,2042,2041,2069,2055,2074,2085,2095.5,2085,2086,2097,2101,2121,2122,2137,2150,2132,2121,2125,2130,2105,2091,2093,2118],[2014,1994,2043,2061,2028,2013,2041,2053,2051,2044,2077,2062,2038,2042,2057,2068,2052.5,2051,2081.5,2096,2079,2102.5,2114,2123,2156,2166,2175,2137,2105,2100,2117,2130],[2008,2003.5,2047,2041,2026,2045,2067,2077,2055,2043,2081,2075,2041,2049,2058,2061,2052,2046,2073,2100,2082,2081.5,2099,2127,2133,2165,2142,2154,2106,2091,2109,2129],[1992,1981,2035,2005,2019,2025,2054,2065,2040,2061,2080,2078,2073,2069,2079,2086,2085,2086,2080,2082,2075,2084,2092,2091,2131,2134,2116,2121,2086,2084,2125,2108],[1990,1978,2021,2025,2019,2014,2043,2054,2051,2056,2064,2085,2068.5,2052,2092,2107,2077,2069,2107,2086,2093,2102,2119,2136,2139,2146,2131,2125,2095,2090,2108,2112],[1981,1978,2000,2001,1999,2012,2043,2026,2025,2042,2047,2044.5,2041.5,2062,2105,2082,2070,2080,2098,2098,2107,2108.5,2126,2126,2129,2119,2146,2138,2108,2095,2125,2134],[2001,2010,1982.5,2026,2010,2006,2026,2030,2022,2040,2051,2053,2050,2064,2075,2069.5,2067,2074.5,2101,2109,2108,2122,2123,2136,2119,2114,2127,2151,2094,2104,2106,2146],[1993,1995,2012,2011,2003,2001,2018,2047,2018,2022,2053,2051,2056,2055,2080,2082,2073,2078,2111,2115,2091,2089,2119,2112,2106,2103,2134,2138,2130,2087,2120,2140],[2000,1998,2007,2032,1996,1994,2022,2022,2032,2029,2056,2066,2056,2064,2071.5,2097,2074.5,2080,2097,2102,2095,2111,2123,2127.5,2114,2106,2107,2161,2090,2088,2134,2141],[2001,1990,2017,2015,2000,1994,2018,2029,2030,2016,2063,2070,2062,2040,2072,2071,2075,2072,2105,2110,2108,2112,2103,2101,2086,2072,2120,2124,2090,2073,2133,2144],[1996,2010,2019,2014,1998,2000,2014,2048,2033,2008,2052,2056.5,2053,2046,2058,2050,2059,2068,2091,2110,2084,2080,2092,2121,2105,2064,2137,2117,2086.5,2086,2157,2223],[1970,2000,2015.5,2038,2027,1987,2019,2048,2016,2037,2067,2050,2037,2054,2078,2070,2065,2038,2080,2088,2109,2091,2112,2113,2090,2077,2100,2105.5,2095,2074,2233,2294],[1980,1984,2043,2061,2010,2014,2063,2061,2023,2030,2046.5,2086,2049,2058,2091,2096,2070,2071,2106,2112,2097,2072,2144,2117.5,2093,2094.5,2103,2136,2103,2112,2305,2265]]",
"data": [
[
20.23,
20.32,
20.39,
20.38,
20.08,
20.23,
20.59,
20.8,
20.46,
20.68,
20.61,
20.8,
20.83,
20.65,
21.03,
21.17,
20.89,
20.95,
21.24,
21.34,
21.08,
21.28,
21.49,
21.71,
21.53,
21.56,
21.56,
21.71,
21.53,
21.94,
22.46,
21.91
],
[
20.13,
20.02,
20.43,
20.39,
20.35,
20.15,
20.755,
20.63,
20.39,
20.46,
20.71,
20.68,
20.665,
20.81,
20.88,
20.9,
20.98,
21.06,
21.09,
21.19,
21.36,
21.42,
21.35,
21.45,
21.59,
21.47,
21.415,
21.54,
21.23,
21.69,
22.62,
22.42
],
[
19.81,
19.7,
20.245,
20.21,
20.32,
19.95,
20.35,
20.41,
20.34,
20.45,
20.8,
20.82,
20.67,
20.73,
20.97,
20.93,
20.84,
21.02,
21.18,
21.31,
21.27,
21.47,
21.72,
21.74,
21.57,
21.31,
21.22,
21.37,
21.18,
21.49,
22.23,
22.42
],
[
19.88,
19.94,
20.09,
20.45,
20.12,
20.06,
20.38,
20.46,
20.44,
20.455,
20.79,
21.01,
20.87,
20.585,
20.82,
20.91,
20.93,
20.71,
20.95,
21.33,
21.24,
21.38,
21.59,
21.64,
21.12,
21.09,
20.97,
21.52,
20.94,
21.03,
21.54,
22.055
],
[
20.01,
19.77,
20.27,
20.23,
20.4,
20.1,
20.38,
20.53,
20.38,
20.55,
20.88,
20.72,
20.56,
20.84,
20.715,
20.775,
20.55,
20.71,
21.02,
21.05,
21.17,
21.29,
21.42,
21.16,
20.81,
20.95,
21.17,
21.23,
20.96,
21.05,
20.925,
21.44
],
[
19.86,
19.84,
20.24,
20.08,
20.24,
20.16,
20.43,
20.68,
20.53,
20.35,
20.56,
20.94,
20.67,
20.59,
20.46,
20.7,
20.66,
20.71,
20.96,
21.21,
21.26,
21.38,
21.31,
21.49,
21.03,
20.785,
21.045,
21.17,
21.17,
21.1,
21.205,
21.21
],
[
20.08,
20.05,
20.18,
20.14,
20.21,
20.28,
20.38,
20.5,
20.49,
20.48,
20.645,
20.64,
20.52,
20.6,
20.665,
20.76,
21.06,
21.01,
21.22,
21.39,
21.28,
21.38,
21.37,
21.29,
21.01,
21.2,
21.13,
21.21,
20.96,
21.02,
21.085,
21.16
],
[
19.765,
20.01,
20.32,
20.6,
20.4,
20.36,
20.47,
20.58,
20.43,
20.3,
20.42,
20.62,
20.55,
20.63,
20.75,
21.16,
21.14,
21.1,
21.235,
21.54,
21.45,
21.25,
21.39,
21.45,
21.28,
21.4,
21.31,
21.27,
20.97,
21.13,
21.29,
21.63
],
[
19.93,
19.88,
20.395,
20.26,
20.26,
20.22,
20.215,
20.39,
20.25,
20.47,
20.44,
20.52,
20.61,
20.58,
20.93,
21.1,
21.09,
21.06,
21.24,
21.38,
21.27,
21.18,
21.32,
21.41,
21.29,
21.44,
21.21,
21.38,
21.35,
21.22,
21,
21.28
],
[
19.92,
19.93,
20.41,
20.195,
20.37,
20.24,
20.37,
20.7,
20.44,
20.32,
20.53,
20.505,
20.64,
20.56,
21,
21.1,
20.89,
20.97,
21.2,
21.38,
21.05,
21.14,
21.37,
21.44,
21.37,
21.39,
21.3,
21.71,
21.31,
21.19,
21.36,
21.38
],
[
19.84,
19.99,
20.2,
20.18,
19.94,
20.29,
20.35,
20.29,
20.2,
20.58,
20.36,
20.48,
20.53,
20.66,
20.92,
20.99,
20.79,
20.93,
20.96,
21,
21.11,
21.11,
21.36,
21.29,
21.28,
21.16,
21.345,
21.31,
21.01,
21.03,
21.05,
21.15
],
[
20.15,
19.905,
19.99,
20.03,
20.3,
20.11,
20.28,
20.35,
20.27,
20.42,
20.41,
20.69,
20.55,
20.74,
20.85,
20.955,
20.85,
20.86,
20.97,
21.01,
21.21,
21.22,
21.37,
21.5,
21.32,
21.21,
21.25,
21.3,
21.05,
20.91,
20.93,
21.18
],
[
20.14,
19.94,
20.43,
20.61,
20.28,
20.13,
20.41,
20.53,
20.51,
20.44,
20.77,
20.62,
20.38,
20.42,
20.57,
20.68,
20.525,
20.51,
20.815,
20.96,
20.79,
21.025,
21.14,
21.23,
21.56,
21.66,
21.75,
21.37,
21.05,
21,
21.17,
21.3
],
[
20.08,
20.035,
20.47,
20.41,
20.26,
20.45,
20.67,
20.77,
20.55,
20.43,
20.81,
20.75,
20.41,
20.49,
20.58,
20.61,
20.52,
20.46,
20.73,
21,
20.82,
20.815,
20.99,
21.27,
21.33,
21.65,
21.42,
21.54,
21.06,
20.91,
21.09,
21.29
],
[
19.92,
19.81,
20.35,
20.05,
20.19,
20.25,
20.54,
20.65,
20.4,
20.61,
20.8,
20.78,
20.73,
20.69,
20.79,
20.86,
20.85,
20.86,
20.8,
20.82,
20.75,
20.84,
20.92,
20.91,
21.31,
21.34,
21.16,
21.21,
20.86,
20.84,
21.25,
21.08
],
[
19.9,
19.78,
20.21,
20.25,
20.19,
20.14,
20.43,
20.54,
20.51,
20.56,
20.64,
20.85,
20.685,
20.52,
20.92,
21.07,
20.77,
20.69,
21.07,
20.86,
20.93,
21.02,
21.19,
21.36,
21.39,
21.46,
21.31,
21.25,
20.95,
20.9,
21.08,
21.12
],
[
19.81,
19.78,
20,
20.01,
19.99,
20.12,
20.43,
20.26,
20.25,
20.42,
20.47,
20.445,
20.415,
20.62,
21.05,
20.82,
20.7,
20.8,
20.98,
20.98,
21.07,
21.085,
21.26,
21.26,
21.29,
21.19,
21.46,
21.38,
21.08,
20.95,
21.25,
21.34
],
[
20.01,
20.1,
19.825,
20.26,
20.1,
20.06,
20.26,
20.3,
20.22,
20.4,
20.51,
20.53,
20.5,
20.64,
20.75,
20.695,
20.67,
20.745,
21.01,
21.09,
21.08,
21.22,
21.23,
21.36,
21.19,
21.14,
21.27,
21.51,
20.94,
21.04,
21.06,
21.46
],
[
19.93,
19.95,
20.12,
20.11,
20.03,
20.01,
20.18,
20.47,
20.18,
20.22,
20.53,
20.51,
20.56,
20.55,
20.8,
20.82,
20.73,
20.78,
21.11,
21.15,
20.91,
20.89,
21.19,
21.12,
21.06,
21.03,
21.34,
21.38,
21.3,
20.87,
21.2,
21.4
],
[
20,
19.98,
20.07,
20.32,
19.96,
19.94,
20.22,
20.22,
20.32,
20.29,
20.56,
20.66,
20.56,
20.64,
20.715,
20.97,
20.745,
20.8,
20.97,
21.02,
20.95,
21.11,
21.23,
21.275,
21.14,
21.06,
21.07,
21.61,
20.9,
20.88,
21.34,
21.41
],
[
20.01,
19.9,
20.17,
20.15,
20,
19.94,
20.18,
20.29,
20.3,
20.16,
20.63,
20.7,
20.62,
20.4,
20.72,
20.71,
20.75,
20.72,
21.05,
21.1,
21.08,
21.12,
21.03,
21.01,
20.86,
20.72,
21.2,
21.24,
20.9,
20.73,
21.33,
21.44
],
[
19.96,
20.1,
20.19,
20.14,
19.98,
20,
20.14,
20.48,
20.33,
20.08,
20.52,
20.565,
20.53,
20.46,
20.58,
20.5,
20.59,
20.68,
20.91,
21.1,
20.84,
20.8,
20.92,
21.21,
21.05,
20.64,
21.37,
21.17,
20.865,
20.86,
21.57,
22.23
],
[
19.7,
20,
20.155,
20.38,
20.27,
19.87,
20.19,
20.48,
20.16,
20.37,
20.67,
20.5,
20.37,
20.54,
20.78,
20.7,
20.65,
20.38,
20.8,
20.88,
21.09,
20.91,
21.12,
21.13,
20.9,
20.77,
21,
21.055,
20.95,
20.74,
22.33,
22.94
],
[
19.8,
19.84,
20.43,
20.61,
20.1,
20.14,
20.63,
20.61,
20.23,
20.3,
20.465,
20.86,
20.49,
20.58,
20.91,
20.96,
20.7,
20.71,
21.06,
21.12,
20.97,
20.72,
21.44,
21.175,
20.93,
20.945,
21.03,
21.36,
21.03,
21.12,
23.05,
22.65
]
],
"backgroundImagePath": "data:image/BDAQkAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1F",
"cameraImgUrl": "data:image/BDAQkAAAAAAAAAAAECAwQFBSkZJRgABAQAAAQABAAD/wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAME",
"annotations": [
{
"x": 0,
"y": 0,
"xref": "x",
"yref": "y",
"text": "<span style=\"font-weight:bold; font-size:14px; color:#fff;\">左</span><br><span style=\"font-size:12px; color:#fff;\">20.23℃</span>",
"ax": 30,
"ay": -45,
"font": {
"size": 14
},
"bgcolor": "rgba(21, 21, 21, 0.5)",
"bordercolor": "rgba(21, 21, 21, 0.5)",
"borderwidth": 1,
"borderpad": 1
}
]
}四、组件实现核心代码
Vue3版本核心逻辑
javascript
<template>
<div ref="heatmap" id="heatmap" style="width: 100%"></div>
</template>
<script setup>
import Plotly from "plotly.js-dist";
import { onMounted, ref, defineProps } from "vue";
// 接收父组件传递的 reliData 作为 props
const props = defineProps({
reliData: {
type: Object,
required: true,
},
});
const payload = props.reliData;
const imgdata = payload.backgroundImagePath;
const cameraImgUrl = payload.cameraImgUrl;
const heatmap = ref(null);
const hasHoverListener = ref(false);
const drawHeatmap = () => {
const data = [
{
z: payload.data,
type: "contour",
colorscale: "Jet",
contours: {
coloring: "lines",
},
line: {
width: 1,
},
hovertemplate: "%{z:.2f}℃<extra></extra>",
},
];
const layout = {
autosize: true,
aspectratio: {
x: 4,
y: 3,
},
margin: {
l: 0,
r: 0,
b: 0,
t: 0,
pad: 0,
},
xaxis: {
showgrid: false,
},
yaxis: {
showgrid: false,
},
images: [
{
source: imgdata,
xref: "x",
yref: "y",
x: 0,
y: 24,
sizex: 32,
sizey: 24,
sizing: "stretch",
opacity: 0.85,
layer: "above",
},
{
source: cameraImgUrl, //可见光
xref: "x",
yref: "y",
x: 0,
y: 24,
sizex: 32,
sizey: 24,
sizing: "stretch",
opacity: 1,
layer: "below",
},
],
};
layout.annotations = payload.annotations;
layout.shapes = payload.shapes;
Plotly.react(heatmap.value, data, layout);
if (!hasHoverListener.value) {
heatmap.value.on("plotly_click", (data) => {
const hoverData = data.points.map((point) => ({
x: point.x,
y: point.y,
}));
});
hasHoverListener.value = true;
}
};
onMounted(() => {
drawHeatmap();
});
</script>Vue2版本适配
javascript
// vue2 写法
<template>
<div ref="heatmap" id="heatmap" style="width: 100%"></div>
</template>
export default {
data() {
return {
hasHoverListener: false,
payload:{}
};
},
name: 'reliChar',
// props: {
// payload: {
// type: Object,
// required: true,
// },
// },
emits: ['send'],
created() {
console.log('reliChar mounted',reliData);
this.payload = reliData;
},
mounted() {
this.drawHeatmap();
},
watch: {
payload: 'drawHeatmap',
},
methods: {
drawHeatmap() {
const data = [
{
z: this.payload.data,
type: 'contour',
colorscale: 'Jet',
contours: {
coloring: 'lines',
},
line: {
width: 1,
},
hovertemplate: '%{z:.2f}℃<extra></extra>',
},
];
const layout = {
autosize: true,
aspectratio: {
x: 4,
y: 3,
},
margin: {
l: 0,
r: 0,
b: 0,
t: 0,
pad: 0,
},
xaxis: {
showgrid: false,
},
yaxis: {
showgrid: false,
},
images: [
{
// source: 'http://192.168.0.8:1880/rtspJpg/1/image_20250310_191715.jpg',
source: imgdata,
// source: this.payload.backgroundImagePath,
xref: 'x',
yref: 'y',
x: 0,
y: 24,
sizex: 32,
sizey: 24,
sizing: 'stretch',
opacity: 0.85,
layer: "above",
// layer: "below",
},
{
source: imgdata,
// source: 'http://192.168.0.8:1880/rtspJpg/1/image_20250310_191715.jpg',
// source: this.payload.cameraImgUrl,
xref: 'x',
yref: 'y',
x: 0,
y: 24,
sizex: 32,
sizey: 24,
sizing: 'stretch',
opacity: 1,
layer: "below",
// layer: "above",
},
],
};
layout.annotations = this.payload.annotations;
layout.shapes = this.payload.shapes;
Plotly.react(this.$refs.heatmap, data, layout);
if (!this.hasHoverListener) {
this.$refs.heatmap.on('plotly_click', (data) => {
const hoverData = data.points.map((point) => ({
x: point.x,
y: point.y
}));
this.$emit('send', hoverData);
});
this.hasHoverListener = true;
}
},
},
};
</script>五、关键技术点解析
- 颜色映射：通过colorscale配置温度到颜色的映射关系
- 背景叠加：利用Plotly的images配置将红外图作为背景
- 标注系统：动态生成温度标注点
- 性能优化：对大数组数据进行抽样展示
- 响应式设计：监听容器大小变化重绘图表
六、实际应用案例
这个组件在我们项目中用于：
- 工业设备温度监控
- 建筑热能损耗分析
- 医疗红外成像显示
- 电子产品散热测试
七、总结
通过封装这个红外轮廓热力图组件，我们实现了：
- 温度数据的直观可视化
- 灵活的配置选项
- 良好的性能表现
- 跨Vue版本的兼容性
欢迎在评论区分享你的想法和建议！如果你觉得这篇文章有用，别忘了点赞和收藏哦~