使用heatmap.js实现热力图
<div class="content-box" >
<img style="width: 100%; height: 429px;" src="@/assets/dataBoard/heat-bg.png" />
<div class="heat-map">
<div ref="heatmapContainer" style="width: 100%; height: 429px;"></div>
</div>
</div>
import heatmap from "heatmap.js";
export default {
name: 'HeatAnalysisDetail',
data() {
return {
heatmapInstance: null,
heatmapData: [
{
x: 25, y: 25, value: 2,
},
{
x: 30, y: 30, value: 10,
},
{
x: 35, y: 35, value: 15,
},
{
x: 40, y: 35, value: 10,
}, {
x: 55, y: 40, value: 10,
},
{
x: 100, y: 100, value: 15,
},
{
x: 120, y: 120, value: 15,
}, {
x: 115, y: 124, value: 15,
}, {
x: 128, y: 122, value: 17,
},
{
x: 150, y: 120, value: 20,
}
],
};
},
mounted() {
this.initHeatmap()
setTimeout(() => {
this.updateHeatmap()
}, 0)
},
methods: {
initHeatmap() {
const cfg = {
container: this.$refs.heatmapContainer,
radius: 10, // 点的半径
maxOpacity: 1, // 最大不透明度
minOpacity: 0.05, // 最小不透明度
scaleRadius: true, // 是否缩放半径
useLocalExtrema: true, // 是否使用局部极值
gridSize: 20, // 网格大小
gradient: {
0.2: '#5d785d',
0.5: "#a66622",
0.7: '#ab271a',
1.0: '#aa121a' // 这里定义了不同值范围对应的颜色
},
};
this.heatmapInstance = heatmap.create(cfg);
},
updateHeatmap() {
this.heatmapInstance.setData({
data: this.heatmapData,
max: 20 // 设置最大值
});
}
}
};