1. 自动识别深度档位，支持其他档位的合并。

2. 本地数据每300秒或退出时存放一次，之前是20秒存放一次。
3. 定义每秒绘制帧数，当前是120HZ。

example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "heatmap",
   "homepage": ".",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": true,
   "main": "main.js",
   "scripts": {

example/src/App.js

@@ -227,10 +227,10 @@ export default () => {
       setIsActivation(true)
       await readLocalDb()
       connectWebSocket()
-      // 每20秒存放一次本地数据
+      // 每300秒存放一次本地数据
       setInterval(() => {
         saveLocalDb()
-      }, 20 * 1000)
+      }, 300 * 1000)
     }else{
       toast.error(response.data.msg);
     }

src/index.js

@@ -42,15 +42,23 @@ export default class StockHeatmap extends React.Component {
   windowPosition = 0;
   isMerged = false;
 
+  // 鼠标坐标
   mouse = {
     x: 0,
     y: 0
   }
 
+  // 圆球存放处，事件触发之后需要在这里面取数据进行展示
   circles = [];
 
+  // 最大的买卖数量
   maxBidAskVolume = 0;
 
+  // 绘制间隔，120是帧率
+  drawTimestampDistance = parseInt(1000 / 120);
+  // 上次绘制时间
+  prevDrawTimestamp = 0;
+
   orderbookColors = [
     '#086892',
     '#2f9dd2',
@@ -290,28 +298,35 @@ export default class StockHeatmap extends React.Component {
    * This method will be called after an update of internal data is performed.
    */
   updateHeatmap = () => {
-    if (this.drawingContext !== null) {
-      // 1. update scale and dimensions
-      this.updateHeatmapDimensions();
+    // 绘制器有效性判断
+    if (this.drawingContext === null) {
+      return;
+    }
 
-      // 2. Draw the bid ask spread heatmap
-      this.clearCanvas(this.defaults.borderPadding[3], this.defaults.borderPadding[0],
-        this.defaults.hmWidth(), this.defaults.hmHeight(), this.defaults.clearColor);
-      this.drawMainGraph();
+    // 绘制间隔判断
+    if (new Date().getTime() - this.prevDrawTimestamp < this.drawTimestampDistance) {
+      return;
+    }
 
-      // 3. Draw xy Axis
-      this.drawXAxis();
-      this.drawYAxisAndBidAskGraph();
+    // 1. update scale and dimensions
+    this.updateHeatmapDimensions();
 
-      // 4. Draw buy-to-sell ratio
-      this.drawBuy2SellRatio();
+    // 2. Draw the bid ask spread heatmap
+    this.clearCanvas(0, 0, this.defaults.hmWidth(), this.defaults.hmHeight(), '#ffffff');
+    this.drawMainGraph();
 
-      // 5. Draw mouse
-      this.drawMouse();
+    // 3. Draw xy Axis
+    this.drawXAxis();
+    this.drawYAxisAndBidAskGraph();
 
-      // console.log('heatmap draw update');
-      // this.clearCanvas(0, 0, this.defaults.hmWidth(), this.defaults.hmHeight(), '#aaaaaa');
-    }
+    // 4. Draw buy-to-sell ratio
+    this.drawBuy2SellRatio();
+
+    // 5. Draw mouse
+    this.drawMouse();
+
+    // 重设绘制间隔
+    this.prevDrawTimestamp = new Date().getTime()
   }
 
   // ------------------------------ START: Canvas draw functions ---------------------------------------
@@ -890,9 +905,20 @@ export default class StockHeatmap extends React.Component {
     let totalSellOrderVolume = 0;
     let totalSnapshots = snapshots.length;
 
+    // 识别最大的深度档位，取消之前的5档固定的
+    let maxDepthLevel = snapshots[0].marketDepth.buys.length
+    snapshots.forEach(snapshot => {
+      if (maxDepthLevel < snapshot.marketDepth.buys.length) {
+        maxDepthLevel = snapshot.marketDepth.buys.length
+      }
+      if (maxDepthLevel < snapshot.marketDepth.sells.length) {
+        maxDepthLevel = snapshot.marketDepth.sells.length
+      }
+    })
+
     // 初始化买卖数组
-    let buySums = Array(5).fill({ rate: 0, orders: 0, qty: 0 });
-    let sellSums = Array(5).fill({ rate: 0, orders: 0, qty: 0 });
+    let buySums = Array(maxDepthLevel).fill({ rate: 0, orders: 0, qty: 0 });
+    let sellSums = Array(maxDepthLevel).fill({ rate: 0, orders: 0, qty: 0 });
 
     // 初始化交易数量
     let totalLastTradeQtyBuy = 0;