1. 背景
今年6月开发了一个前端热力图系统，目前已经应用在公司的主要业务中，一直没时间做个总结，现在梳理一下实现思路。
先说下为什么要做这样一个系统，电商网站的一种常用营销手段，就是配置眼花缭乱的活动页展现给用户，有的用来展示各种商品，有的供用户领取优惠券。但屏幕的展示空间有限，如何配置不同的模块才能最大化利用页面空间，一种比较好的方式就是采集用户点击数据，绘制出热力图，供产品、运营和设计同学参考，不断优化模块配置，有效提升点击转化。
2. 系统架构
先将热力图系统进行子功能拆分，可以得到以下几个部分：
- 用户点击数据采集：包括页面埋点、数据入库；
- 热力图绘制：包括：数据读取、数据加工、热力图绘制；
- 数据查询平台：主要是按日期和活动ID查询自定义区域的点击数。
2.1 数据采集
数据采集部分，主要通过事件代理在body上绑定click事件，采集数据主要包括：
x：点击事件触发相对于 document 的横坐标，主要取自于event.pageX；y：点击事件触发相对于 document 的纵坐标，主要取自于event.pageY