Como hace poco realicé una función relacionada con la distribución de caracteres, necesitaba el mapa de calor en echarts. Al principio sentí que echarts era difícil, pero el trabajo duro valió la pena. Después de consultar, finalmente lo resolví. La solución específica es como sigue:
El siguiente código es para realizar la distribución aleatoria de caracteres, y los códigos de tamaño y posición están incluidos en él.
Sin embargo, se deben introducir heatmap.js y jquery.min.js para implementar el siguiente código
<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>
Después de implementar la función, descubrí que el código se puede leer y entender fácilmente. Lo más importante es que el complemento heatmap.js introducido jugó un gran papel.