diff --git a/src/components/Chart/heat-map.tsx b/src/components/Chart/heat-map.tsx
new file mode 100644
index 0000000..65c92d7
--- /dev/null
+++ b/src/components/Chart/heat-map.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import ReactECharts from 'echarts-for-react';
+import * as echarts from 'echarts';
+
+const HeatMap: React.FC = () => {
+
+ const getVirtualData = (year: string) => {
+ const date = +echarts.time.parse(`${year}-01-01`);
+ const end = +echarts.time.parse(`${+year + 1}-01-01`);
+ const dayTime = 3600 * 24 * 1000;
+ const data: [string, number][] = [];
+ for (let time = date; time < end; time += dayTime) {
+ data.push([echarts.time.format(time, '{yyyy}-{MM}-{dd}', false), Math.floor(Math.random() * 500)]);
+ }
+ return data;
+ };
+
+
+ const options = {
+ title: {
+ top: 30,
+ left: 'center',
+ text: '应用修改记录'
+ },
+ tooltip: {},
+ visualMap: {
+ min: 0,
+ max: 500,
+ type: 'piecewise',
+ orient: 'horizontal',
+ left: 'center',
+ top: 65
+ },
+ gradientColor: ['#bedaff', '#6ba1ff', '#1241d2'],
+ calendar: {
+ top: 120,
+ left: 30,
+ right: 30,
+ cellSize: ['auto', 20],
+ range: '2024',
+ itemStyle: {
+ borderWidth: 0.5,
+ borderColor: '#86909c'
+ },
+ dayLabel: { nameMap: 'ZH' },
+ monthLabel: { nameMap: 'ZH' },
+ yearLabel: { show: false }
+ },
+ series: {
+ type: 'heatmap',
+ coordinateSystem: 'calendar',
+ data: getVirtualData('2024')
+ }
+ };
+
+ return