思源笔记折腾记录 echarts- 热力图 -2023 年文档统计

啊,解释倒是没什么好解释的,就是新建一个图表(斜杠菜单 + 图表或者 charts),然后把这些代码复制进去就行了

( ()=>{
//同步请求后端接口
function syncPost(url, data) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', url, false);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(JSON.stringify(data));
  return JSON.parse(xhr.responseText);
}
//选择所有文档
let sql = `select * from blocks where type = 'd'`
let sqlData = syncPost('/api/query/sql',{stmt:sql })
let data=[]
let max =0
//遍历所有文档数据,然后生成数据序列
sqlData.data.forEach(
	doc=>{
		let createdDay=doc.created.slice(0,4)+'-'+doc.created.slice(4,6)+'-'+doc.created.slice(6,8)
		let currentSum = data.find(
			item=>{
				if(item[0]==createdDay){
					item[1]=item[1]+1
				}
				return item[0]==createdDay
			}
		)
		!currentSum?data.push([createdDay,1]):null
	}
)
//找到单日数据最大值
data.forEach(
	dateData=>{
		max =Math.max(max ,dateData[1])
	}
)
let option = {
//都看得懂就不说了
  title: {
    top: 30,
    left: 'center',
    text: '2023 文档统计'
  },
//这个可以怎么写可以自己去看echarts的文档
  tooltip: {},
  visualMap: {
    min: 0,
    max: max ,
    type: 'piecewise',
    orient: 'horizontal',
    left: 'center',
    top: 65
  },
  calendar: {
    top: 120,
    left: 30,
    right: 30,
    cellSize: ['auto', 13],
    range: '2023',
    itemStyle: {
      borderWidth: 0.5
    },
    yearLabel: { show: false }
  },
  series: {
    type: 'heatmap',
    coordinateSystem: 'calendar',
    data: data
  }
};
return option
})()

效果就像这样

参考了:

Examples - Apache ECharts

如果这玩意对你有用可以去爱发电给我买杯咖啡

leolee9086 正在创作一些简单的技术教程和小工具,以及设计方面内容 | 爱发电 (afdian.net)

‍