Generate dataset

data.js

@@ -0,0 +1,41 @@
+var data = {
+  gaode: {
+    securityJsCode: "0bc2f7560c1da34a09c921a92fce4502",
+  },
+  center: [112.945311, 28.178169],
+  zoom: 13,
+  chart: {
+    xAxis: [
+      "0",
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12",
+      "13",
+      "14",
+      "15",
+      "16",
+      "17",
+      "18",
+      "19",
+      "20",
+      "21",
+      "22",
+      "23",
+      "24",
+    ],
+    series: [
+      30000, 28000, 25000, 26000, 27000, 30000, 55000, 50000, 40000, 39000,
+      38000, 39000, 27000, 25000, 30000, 32000, 31000, 25000, 23000, 10000,
+      12000, 12300, 25000, 26000, 30000,
+    ],
+  },
+};

gen/generate.py

@@ -0,0 +1,40 @@
+import json
+import numpy as np
+
+# 中心点的坐标以及每个中心的点的数目
+map_center = (112.945311, 28.178169)
+points = []
+all_data = []
+
+count_max = 1000
+
+num_points = 100
+lng_center, lat_center = map_center
+for _ in range(num_points):
+    # 正态分布生成
+    lng = np.random.normal(lng_center, 0.05)
+    lat = np.random.normal(lat_center, 0.05)
+    
+    up = np.random.randint(0, 2)
+    if (up == 1):
+        count = np.random.randint(1, 200)
+    else:
+        count = np.random.randint(800, 1000)
+    points.append({'lng': lng, 'lat': lat, 'count': count, 'up': up})
+
+for time in range(24):
+    data = []
+    for point in points:
+        count = np.random.randint(1, 100)
+        if (point['up'] == 0):
+            count = -count
+        point['count'] = point['count'] + count
+        if (point['count'] < 0):
+            point['count'] = 0
+        elif (point['count'] > 1000):
+            point['count'] = 1000
+        data.append({'lng': point['lng'], 'lat': point['lat'], 'count': point['count']})
+    all_data.append(data)
+
+with open('data.json', 'w') as f:
+    json.dump(all_data, f)

index.html

@@ -63,12 +63,6 @@
             class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200"
             oninput="updateData(this.value)"
           />
-          <!-- 一种让 slider 下标和对应档位对齐的奇技淫巧：
-            在其下方放置 flex 容器，其中放置 space-between 的若干 label。此时，由于文字宽度的影响，无法真正对齐，产生偏移。
-            考虑将每个 label 实际大小设为 0，这样 label 可以实际对齐；放置其 absolute 的子元素，其中放置实际要显示的文字，
-            该 span 通过指定 left 和 translate 可以实现文字中线和父元素对齐，从而实现文字和 slider 档位对齐，作为 slider 刻度。
-            此外，注意 x 轴 padding 应该设为 slider 上按钮半径大小，因为 slider 实际开始位置不是该元素最左端，而是滑块在最左端时的中心点。
-          -->
           <div
             class="-bottom-6 flex w-full flex-nowrap justify-between px-2 text-sm text-gray-500"
           >
@@ -149,14 +143,16 @@
       </div>
     </div>
 
+    <script type="text/javascript" src="./static/echarts.min.js"></script>
+    <script type="text/javascript" src="./heatmapData.js"></script>
+    <script type="text/javascript" src="./data.js"></script>
+
     <script type="text/javascript">
       window._AMapSecurityConfig = {
-        securityJsCode: "0bc2f7560c1da34a09c921a92fce4502",
+        securityJsCode: data.gaode.securityJsCode,
       };
     </script>
     <script src="https://webapi.amap.com/maps?v=2.0&key=13471667a960ce7a08b3dfdd9a4fb193"></script>
-    <script type="text/javascript" src="./static/echarts.min.js"></script>
-    <script type="text/javascript" src="./heatmapData.js"></script>
 
     <script>
       var chartEle = document.getElementById("linegraph");
@@ -184,33 +180,7 @@
         xAxis: {
           type: "category",
           boundaryGap: false,
-          data: [
+          data: data.chart.xAxis,
-            "0",
-            "1",
-            "2",
-            "3",
-            "4",
-            "5",
-            "6",
-            "7",
-            "8",
-            "9",
-            "10",
-            "11",
-            "12",
-            "13",
-            "14",
-            "15",
-            "16",
-            "17",
-            "18",
-            "19",
-            "20",
-            "21",
-            "22",
-            "23",
-            "24",
-          ],
         },
         yAxis: {
           type: "value",
@@ -232,11 +202,7 @@
             name: "Water",
             type: "line",
             smooth: true,
-            data: [
+            data: data.chart.series,
-              30000, 28000, 25000, 26000, 27000, 30000, 55000, 50000, 40000,
-              39000, 38000, 39000, 27000, 25000, 30000, 32000, 31000, 25000,
-              23000, 10000, 12000, 12300, 25000, 26000, 30000,
-            ],
             markArea: {
               itemStyle: { color: "rgba(255, 173, 177, 0.4)" },
               data: [[{ name: "Now", xAxis: "0" }, { xAxis: "1" }]],
@@ -253,42 +219,33 @@
 
       var map = new AMap.Map("container", {
         resizeEnable: true,
-        center: [116.418261, 39.921984], // 配置地图中心的经纬度
+        center: data.center,
-        zoom: 11,
+        zoom: data.zoom,
       });
 
       // heatmap.js document:
       // http://www.patrick-wied.at/static/heatmapjs/docs.html
-      /* visible 热力图是否显示, 默认为 true
-      * opacity 热力图的透明度, 分别对应 heatmap.js的minOpacity和maxOpacity
-      * radius 热力图的每个点的半径大小
-      * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
-      *	{
-      .2:'rgb(0, 255, 255)',
-      .5:'rgb(0, 110, 255)',
-      .8:'rgb(100, 0, 255)'
-      }
-      其中 key 表示插值的位置, 0-1
-      value 为颜色值
-      */
       var heatmap;
       var playing = false;
       map.plugin(["AMap.HeatMap"], function () {
         heatmap = new AMap.HeatMap(map, {
-          radius: 25, //给定半径
+          radius: 25, // 每个点的半径大小
           opacity: [0, 0.8],
-          /*,
+          gradient: {
-             gradient:{
+            0.1: "rgb(255, 255, 255)",
-                 0.5: 'blue',
+            0.2: "rgb(225, 225, 255)",
-                 0.65: 'rgb(117,211,248)',
+            0.3: "rgb(195, 195, 255)",
-                 0.7: 'rgb(0, 255, 0)',
+            0.4: "rgb(175, 175, 255)",
-                 0.9: '#ffea00',
+            0.5: "rgb(155, 155, 255)",
-                 1.0: 'red'
+            0.6: "rgb(135, 135, 255)",
-             }
+            0.7: "rgb(115, 115, 255)",
-              */
+            0.8: "rgb( 95,  95, 255)",
+            0.9: "rgb( 75,  75, 255)",
+            1.0: "rgb( 55,  55, 255)",
+          },
         });
         heatmap.setDataSet({
-          max: 100,
+          max: 1000,
           data: heatmapData[0],
         });
       });
@@ -308,14 +265,16 @@
               name: "Now",
               xAxis: value.toString(),
             },
-            { xAxis: (parseInt(value) + 1).toString() },
+            {
+              xAxis: (parseInt(value) + 1).toString(),
+            },
           ],
         ];
         chart.setOption(option);
 
         heatmap.setDataSet({
           data: heatmapData[value],
-          max: 100,
+          max: 1000,
         });
       }