From c84f9946cd9b842ec54e5e99ee3c7ebbe1f058bb Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Wed, 3 Sep 2025 15:14:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(chart):=20=E6=96=B0=E5=A2=9E=E7=83=AD?=
 =?UTF-8?q?=E5=8A=9B=E5=9B=BE=E7=BB=84=E4=BB=B6=E5=B9=B6=E5=BA=94=E7=94=A8?=
 =?UTF-8?q?=E5=88=B0=E5=B7=A5=E4=BD=9C=E5=8F=B0=E6=A6=82=E8=A7=88=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Chart/heat-map.tsx          | 59 ++++++++++++++++++++++
 src/pages/dashboard/workplace/overview.tsx | 13 ++---
 2 files changed, 62 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Chart/heat-map.tsx

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 <ReactECharts option={options} />;
+};
+
+export default HeatMap;
\ No newline at end of file
diff --git a/src/pages/dashboard/workplace/overview.tsx b/src/pages/dashboard/workplace/overview.tsx
index a9157bb..24eb0de 100644
--- a/src/pages/dashboard/workplace/overview.tsx
+++ b/src/pages/dashboard/workplace/overview.tsx
@@ -16,6 +16,7 @@ import IconCalendar from './assets/calendar.svg';
 import IconComments from './assets/comments.svg';
 import IconContent from './assets/content.svg';
 import IconIncrease from './assets/increase.svg';
+import HeatMap from '@/components/Chart/heat-map';
 
 const { Row, Col } = Grid;
 
@@ -126,16 +127,8 @@ function Overview() {
       </Row>
       <Divider />
       <div>
-        <div className={styles.ctw}>
-          <Typography.Paragraph
-            className={styles['chart-title']}
-            style={{ margin: '0 auto 1em' }}
-          >
-            应用修改记录
-          </Typography.Paragraph>
-        </div>
-        <div className={styles.tempHeadHot}>热力图</div>
-        {/*<OverviewAreaLine data={data.chartData} loading={loading} />*/}
+        {/*热力图*/}
+        <HeatMap></HeatMap>
       </div>
     </Card>
   );