ddHeatMap

绘制热力图小工具

功能

帮你实现热力图的绘制 👍

API

HeatMap：父类

| API | 说明 | | ---------------- | ------------ | | HeatMap.create() | 创建唯一实例 |

heatMap：实例

| API | 参数格式 | 是否可为空 | 说明 | | -------------------- | ------------------------------- | ---------- | ----------------------- | | heatMap.setData() | object{data: { yourData }} | 是 | 填入数据 | | heatMap.addData() | array[{ x,y,value }] | 是 | 增加圆点数 | | heatMap.getData() | / | 是 | 获取所有圆点数 data | | heatMap.getValueAt() | object{x: yourx, y: youry } | 否 | 获取某个坐标上的 vaule | | heatMap.clearMap() | / | 是 | 清空 map | | heatMap.repaintMap() | / | 是 | 重绘，缓存历史所有 data |

Quick start

1. 下载包

   npm install ddHeatMap -S

2. 引入

    import HeatMap from 'ddHeatMap'

3. 在你的文件中，创建画布

   tip: 因为考虑一般情况下只需要一个map，因此本方法采用单例模式，创建唯一原型，直接调用 HeatMap 上的静态方法 create，传入你所需要的参数，创建你的 heatmap 吧

   const heatmap = HeatMap.create({
     container: document.getElementById('xxx'),
     max: 100 || max, // 你所需要展示的数字的最大值
     min: 10 || min, // 你所需要展示的数字的最小值
     radius: 40, // 圆半径
     gradientConfig, // 渐变色带
     width: 800, // 画布宽
     height: 800, // 画布高
   })

4. 现在，你已经创建了map，但是没有看到彩色的圆圈，因为还未传入data，提供以下测试数据：

   heatmap.setData({data: {
   	x: 47,
     y: 80,
     value: 25
   }, {
     x: 143,
     y: 130,
     value: 97
   }, {
     x: 52,
     y: 33,
     value: 71
   }, {
     x: 62,
     y: 70,
     value: 63
   }, {
     x: 463,
     y: 95,
     value: 97
   }, {
     x: 590,
     y: 437,
     value: 34
   }, {
     x: 171,
     y: 254,
     value: 20
   }})

5. 刷新一下浏览器，就能看到下图所示：