feat(chart): 新增热力图组件并应用到工作台概览页面

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;

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
+        <HeatMap></HeatMap>
-            className={styles['chart-title']}
-            style={{ margin: '0 auto 1em' }}
-          >
-            应用修改记录
-          </Typography.Paragraph>
-        </div>
-        <div className={styles.tempHeadHot}>热力图</div>
-        {/*<OverviewAreaLine data={data.chartData} loading={loading} />*/}
       </div>
     </Card>
   );