echarts中的热力图-人物分布

最新推荐文章于 2025-07-11 11:50:38 发布

原创最新推荐文章于 2025-07-11 11:50:38 发布 · 7.1k 阅读

CC 4.0 BY-SA版权

本文介绍了如何使用ECharts结合heatmap.js插件来创建人物分布的热力图。在实现过程中，通过引入必要的js文件并编写相应代码，成功实现了人物的随机分布展示。虽然最初觉得ECharts复杂，但经过学习和实践，发现其实现逻辑并不难理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于近期做了一个有关人物分布的功能，需要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插件起到了很大的作用。