云盘点击热点图

November 12, 2015

最近在云盘中实现了热点上报系统，方便 UED 同学进行针对性的设计，最后成品如下： image.png

实现

采集上报

实现思路很简单，因为云盘使用 react 框架，常规的业务事件都由 react 合成事件代理。所以热点 sdk 可以直接将 在 document 上监听 mouseDown 事件，获取坐标，1200 * 800 (设计稿尺寸) 进行上报。大致的伪代码如下

// 监听页面的点击事件
document.addEventListener('click', function(e) {
    // 获取点击的原始坐标
    var x = e.pageX;
    var y = e.pageY;

    // 获取页面的实际尺寸
    var pageWidth = document.documentElement.scrollWidth;
    var pageHeight = document.documentElement.scrollHeight;

    // 将坐标值缩放到800*1200
    var scaledX = Math.round(x / pageWidth * 800);
    var scaledY = Math.round(y / pageHeight * 1200);

    // 打包成对象
    var reportData = {
        x: scaledX,
        y: scaledY,
    };

    // 将数据上报到服务器（这里假设你有一个名为 report 的函数来完成数据上报）
    report(reportData);
});

数据清洗

数据上报后会送到 kafka 中，有一个 java 任务进行 kafka 消费，数据按照分钟级别存入 mysql 中即可，这个过程需要区分一下版本&AB 等进行分组

数据展示

后台设计上传不同版本的设计稿 (1200 * 800) ，根据版本信息去数据库中获取对应时间段的点位信息，通过 echarts 热力图展示即可

可改进

  1. 滚动

目前云盘不存在整个页面的滚动行为，所以没有实现滚动下 点击位置的校准

阅读量

目录