更新热力图

public/about/index.html

@@ -63,6 +63,205 @@
   
   
 <div id="pjax-container">
+  <h2>热力图</h2>
+  <div id="heatmap" style="
+  max-width: 600px;
+  height: 180px;
+  padding: 2px;
+  text-align: center;"
+></div>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
+<script type="text/javascript">
+  var chartDom = document.getElementById('heatmap');
+  var myChart = echarts.init(chartDom);
+  window.onresize = function() {
+      myChart.resize();
+  };
+  var option;
+
+  
+  
+  
+  
+  
+  
+  var dataMap = new Map();
+  
+    var key = "2024-07-12";
+    var value = dataMap.get(key);
+    var wordCount = "0.0";
+    var link = "/post/demo05/";
+    var title = "Demo05";
+    
+    
+    
+    if (value == null || wordCount > value[0]) {
+      dataMap.set(key, {wordCount, link, title});
+    }
+    var key = "2024-07-11";
+    var value = dataMap.get(key);
+    var wordCount = "0.0";
+    var link = "/post/demo03/";
+    var title = "Demo03";
+    
+    
+    
+    if (value == null || wordCount > value[0]) {
+      dataMap.set(key, {wordCount, link, title});
+    }
+    var key = "2024-07-11";
+    var value = dataMap.get(key);
+    var wordCount = "0.1";
+    var link = "/post/demo01/";
+    var title = "Demo01";
+    
+    
+    
+    if (value == null || wordCount > value[0]) {
+      dataMap.set(key, {wordCount, link, title});
+    }
+    var key = "2024-07-11";
+    var value = dataMap.get(key);
+    var wordCount = "0.0";
+    var link = "/post/my-second-post/";
+    var title = "My Second Post";
+    
+    
+    
+    if (value == null || wordCount > value[0]) {
+      dataMap.set(key, {wordCount, link, title});
+    }
+    var key = "2024-07-11";
+    var value = dataMap.get(key);
+    var wordCount = "0.0";
+    var link = "/post/my-first-post/";
+    var title = "My First Post";
+    
+    
+    
+    if (value == null || wordCount > value[0]) {
+      dataMap.set(key, {wordCount, link, title});
+    }
+    var key = "2024-07-09";
+    var value = dataMap.get(key);
+    var wordCount = "0.0";
+    var link = "/post/helloworld/";
+    var title = "Helloworld";
+    
+    
+    
+    if (value == null || wordCount > value[0]) {
+      dataMap.set(key, {wordCount, link, title});
+    }var data = [];
+  for (const [key, value] of dataMap.entries()) {
+    data.push([key, value.wordCount]);
+  }
+  
+  var startDate = new Date();
+  var year_Mill = startDate.setFullYear((startDate.getFullYear() - 1));
+  var startDate = +new Date(year_Mill);
+  var endDate = +new Date();
+
+  var dayTime = 3600 * 24 * 1000;
+  startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
+  endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
+
+  
+  function heatmap_width(months){             
+    var startDate = new Date();
+    var mill = startDate.setMonth((startDate.getMonth() - months));
+    var endDate = +new Date();
+    startDate = +new Date(mill);
+
+    endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
+    startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
+
+    var showmonth = [];
+    showmonth.push([
+        startDate,
+        endDate
+    ]);
+    return showmonth
+  };
+
+  function getRangeArr() {
+    const windowWidth = window.innerWidth;
+    if (windowWidth >= 600) {
+      return heatmap_width(12);
+    } else if (windowWidth >= 400) {
+      return heatmap_width(9);
+    } else {
+      return heatmap_width(6);
+    }
+  }
+
+  option = {
+    title: {
+        top: 0,
+        left: 'center',
+        text: ''
+    },
+    tooltip: {
+      formatter: function (p) {
+        const post = dataMap.get(p.data[0]);
+        return post.title + ' | ' + post.wordCount + ' 千字';
+      }
+    },
+    visualMap: {
+        min: 0,
+        max: 10,
+        type: 'piecewise',
+        orient: 'horizontal',
+        left: 'center',
+        top: 30,
+        
+        inRange: {   
+          
+          color: ['#7aa8744c', '#7AA874' ] 
+        },
+        splitNumber: 4,
+        text: ['千字', ''],
+        showLabel: true,
+        itemGap: 20,
+    },
+    calendar: {
+        top: 80,
+        left: 20,
+        right: 4,
+        cellSize: ['auto', 12],
+        range: getRangeArr(),
+        itemStyle: {
+            color: '#F1F1F1',
+            borderWidth: 2.5,
+            borderColor: '#fff',
+        },
+        yearLabel: { show: false },
+        
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(0, 0, 0, 0.0)',
+            
+            
+            
+            
+          }
+        }
+    },
+    series: {
+        type: 'heatmap',
+        coordinateSystem: 'calendar',
+        data: data,
+    }
+  };
+  myChart.setOption(option);
+  myChart.on('click', function(params) {
+    if (params.componentType === 'series') {
+      const post = dataMap.get(params.data[0]);
+      const link = window.location.origin + post.link;
+      window.open(link, '_blank').focus();
+    }
+});
+</script> 
     <div class="post-content" itemprop="articleBody">
       <h2 id="关于我">关于我</h2>
 <p>00后，湖北襄阳人，目前大三本科在读</p>
@@ -71,7 +270,11 @@
 <p>喜欢用文字记录生活，是用心在写文章的宝藏博主</p>
 
     </div>
+ 
+  
   </div>
+
+