请问能在vue写好的页面上用heatmap.js实现热力图吗，查了很多资料都是在一张图片上实现热力图的
直接在页面中引用不就可以么
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width:600px; height:400px;border: 1px solid;border-color: grey;
}
</style>
</head>
<body>
<div id="heatmap"></div>
</body>
//引入heatmap.js
<script src="heatmap.js"></script>
<script type="text/javascript">
// 创建一个heatmap实例对象
var heatmapInstance = h337.create({
container: document.querySelector('#heatmap'),
});
//构建一些随机数据点,网页切图价格这里替换成你的业务数据
var points = [];
var max = 0;
var width = 600;
var height = 400;
var len = 100;
while (len--) {
var val = Math.floor(Math.random()*100);
max = Math.max(max, val);
var point = {
x: Math.floor(Math.random()*width),
y: Math.floor(Math.random()*height),
value: val
};
points.push(point);
}
var data = {
max: max,
data: points
};
//因为data是一组数据,web切图报价所以直接setData
heatmapInstance.setData(data); //数据绑定还可以使用
</script>
</html>
可以看看echarts的热力图,https://echarts.apache.org/examples/zh/index.html#chart-type-heatmap
您好，我是问答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632