最近改个人博客，看了github的提交记录，是真觉得好看。可以移植到自己的博客上做文章统计
效果如下
代码如下
<!DOCTYPEhtml><htmllang="en"style="height: 100%"><head><metacharset="utf-8"></head><bodystyle="height: 100%;margin: 0"><divid="container"style="height: 100%"></div><scripttype="text/javascript"src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script><scripttype="text/javascript">var dom = document.getElementById('container');var myChart = echarts.init(dom,null,{renderer:'canvas',useDirtyRect:false});var app ={};var option;functiongetVirtualData(year){const date =+echarts.time.parse(year +'-01-01');const end =+echarts.time.parse(+year +1+'-01-01');const dayTime =3600*24*1000;const data =[];for(let time = date; time < end; time += dayTime){
data.push([
echarts.time.format(time,'{yyyy}-{MM}-{dd}',false),
Math.floor(Math.random()*50)]);}return data;}
option ={title:{top:30,left:'center',text:'Daily Step Count'},tooltip:{},visualMap:{min:1,max:10,splitNumber:'3',type:'piecewise',orient:'horizontal',left:'center',show:false,top:65,inRange:{color:['#9be9a8','#40c463','#30a14e','#216e39']},},calendar:{top:120,left:30,right:30,cellSize:['auto',13],range:'2024',itemStyle:{borderWidth:0.5},yearLabel:{show:false}},series:{type:'heatmap',coordinateSystem:'calendar',data:getVirtualData('2024')}};if(option &&typeof option ==='object'){
myChart.setOption(option);}
window.addEventListener('resize', myChart.resize);</script></body></html>
本文转载自: https://blog.csdn.net/qq_40984919/article/details/140285098
版权归原作者 吃货智 所有， 如有侵权，请联系我们删除。
版权归原作者 吃货智 所有， 如有侵权，请联系我们删除。