由于近期做了一个有关人物分布的功能,需要echarts中的热力图,起初感觉echarts很难,不过功夫不负有心人,经过查阅,最后解决了,解决的具体方法如下:
下面的代码是具体实现人物随机分布,其中大小,位置代码中都包含其中
不过实现以下代码必须引入heatmap.js和jquery.min.js
<script src="js/heatmap.js"></script>
<script type="text/javascript">
// 创建一个heatmap实例对象
// 这里直接指定热点图渲染的div
var heatmapInstance = h337.create({
container:document.getElementById("heatmap1"),
backgroundColor:'#FFAAD5',
gradient: {
'0.5': 'blue',
'0.8': 'red',
'0.95': 'white',
'0.6':'yellow',
'0.5':'#964B00'
},
radius: 17, // [0,+∞)
opacity:0.5
});
//构建一些随机数据点,网页切图价格这里替换成你的业务数据
var points = [];
var max = 0;
var width = 80;
var height = 60;
var len = 4; //控制点(人物)的多少
while (len--) {
var val = Math.floor(Math.random()*100);
max = Math.max(max, val);
var point = {
x: Math.floor(Math.random()*width+15),//点的水平位置
y: Math.floor(Math.random()*height+25),//点的垂直位置
value: val
};
points.push(point);
}
var data = {
max: max,
data: points
};
//因为data是一组数据,web切图报价所以直接setData
heatmapInstance.setData(data); //数据绑定还可以使用
</script>
实现功能之后发现代码可以简单读懂,最重要的是引入的heatmap.js插件起到了很大的作用。