From f7e4ccc608d8c3472643dc080b207e977e8c5c33 Mon Sep 17 00:00:00 2001
From: yy <3078169442@qq.com>
Date: Mon, 26 May 2025 17:40:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Analysis/Industrytrend/index.tsx | 94 +++++++++++++++++++---
 src/types/analysis/industry.d.ts           | 25 +++++-
 2 files changed, 106 insertions(+), 13 deletions(-)

diff --git a/src/pages/Analysis/Industrytrend/index.tsx b/src/pages/Analysis/Industrytrend/index.tsx
index 46bbe89..d6cca3b 100644
--- a/src/pages/Analysis/Industrytrend/index.tsx
+++ b/src/pages/Analysis/Industrytrend/index.tsx
@@ -73,7 +73,7 @@ const IndustryTrendPage: React.FC = () => {
     let newStartTime = '';
     
     if (value === '月') {
-      newStartTime = now.subtract(6, 'month').format('YYYY-MM');
+      newStartTime = now.subtract(5, 'month').format('YYYY-MM');
     } else if (value === '季度') {
       newStartTime = now.subtract(6, 'quarter').format('YYYY-Q');
     } else {
@@ -101,6 +101,18 @@ const IndustryTrendPage: React.FC = () => {
     }
   };
 
+  const disabledDate = (current: dayjs.Dayjs) => {
+    const now = dayjs();
+    
+    if (params.timeDimension === '月') {
+      return current.isAfter(now.endOf('month'));
+    } else if (params.timeDimension === '季度') {
+      return current.isAfter(now.endOf('quarter'));
+    } else {
+      return current.isAfter(now.endOf('year'));
+    }
+  };
+
   const currentIndustryData = useMemo(() => {
     if (!params.selectedIndustry || allData.length === 0) return [];
     
@@ -108,16 +120,32 @@ const IndustryTrendPage: React.FC = () => {
       .filter(item => item.category === params.selectedIndustry)
       .map(item => ({
         ...item,
+        originalDate: item.date,
         date: formatDateForDisplay(item.date, params.timeDimension)
       }))
       .sort((a, b) => {
-        const dateA = a.date.includes('第') 
-          ? parseInt(a.date.split('第')[1]) 
-          : dayjs(a.date).valueOf();
-        const dateB = b.date.includes('第') 
-          ? parseInt(b.date.split('第')[1]) 
-          : dayjs(b.date).valueOf();
-        return dateA - dateB;
+        if (params.timeDimension === '季度') {
+          // 处理中文季度格式，如 "2024-第一季度" -> ["2024", "第一"]
+          const [yearA, quarterA] = a.originalDate.split('-');
+          const [yearB, quarterB] = b.originalDate.split('-');
+          
+          // 转换中文季度为数字（"第一" -> 1, "第二" -> 2...）
+          const quarterToNumber = (q: string) => {
+            if (q.includes('第一')) return 1;
+            if (q.includes('第二')) return 2;
+            if (q.includes('第三')) return 3;
+            if (q.includes('第四')) return 4;
+            return 0;
+          };
+          
+          return yearA === yearB 
+            ? quarterToNumber(quarterA) - quarterToNumber(quarterB)
+            : parseInt(yearA) - parseInt(yearB);
+        } else if (params.timeDimension === '年') {
+          return parseInt(a.originalDate) - parseInt(b.originalDate);
+        } else {
+          return dayjs(a.originalDate).valueOf() - dayjs(b.originalDate).valueOf();
+        }
       });
   }, [allData, params.selectedIndustry, params.timeDimension]);
 
@@ -143,16 +171,17 @@ const IndustryTrendPage: React.FC = () => {
     seriesField: 'category',
     xAxis: {
       type: 'cat',
+      
       label: {
         formatter: (text: string) => text,
+        
       },
     },
     yAxis: {
       label: {
-        formatter: (val: string) => `${val}${params.type === '招聘增长率' ? '%' : '个'}`,
+        formatter: (val: string) => `${val}${params.type === '招聘增长率' ? '%' : ''}`,
       },
     },
-    tooltip: false,
     point: {
       size: 4,
       shape: 'circle',
@@ -164,6 +193,48 @@ const IndustryTrendPage: React.FC = () => {
       },
     },
     smooth: true,
+    interactions: [
+      {
+        type: 'tooltip',
+        cfg: {
+          render: (e, { title, items }) => {
+            const list = items.filter((item) => item.value);
+            return (
+              <div key={title} style={{ padding: '8px 12px' }}>
+                <h4 style={{ marginBottom: 8 }}>{title}</h4>
+                {list.map((item, index) => {
+                  const { name, value, color } = item;
+                  return (
+                    <div key={index} style={{ margin: '4px 0', display: 'flex', justifyContent: 'space-between' }}>
+                      <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <span
+                          style={{
+                            display: 'inline-block',
+                            width: 8,
+                            height: 8,
+                            borderRadius: '50%',
+                            backgroundColor: color,
+                            marginRight: 8,
+                          }}
+                        ></span>
+                        <span>{name}</span>
+                      </div>
+                      <b>{value}{params.type === '招聘增长率' ? '%' : ''}</b>
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          },
+        },
+      },
+    ],
+    legend: false,
+    tooltip: {
+      showTitle: undefined,
+      title: undefined,
+      customContent: undefined
+    }
   };
 
   useEffect(() => {
@@ -206,6 +277,7 @@ const IndustryTrendPage: React.FC = () => {
               style={{ width: 180 }}
               disabled={loading}
               allowClear={false}
+              disabledDate={disabledDate}
             />
 
             <Select
@@ -310,6 +382,4 @@ const IndustryTrendPage: React.FC = () => {
   );
 };
 
-         
-
 export default IndustryTrendPage;
\ No newline at end of file
diff --git a/src/types/analysis/industry.d.ts b/src/types/analysis/industry.d.ts
index 2a26174..422f599 100644
--- a/src/types/analysis/industry.d.ts
+++ b/src/types/analysis/industry.d.ts
@@ -1,4 +1,5 @@
 import dayjs from 'dayjs';
+import { ReactNode } from 'react';
 
 export type TimeDimension = '月' | '季度' | '年';
 export type AnalysisType = '岗位发布数量' | '招聘增长率';
@@ -27,6 +28,17 @@ export interface IndustryTrendApiResult {
   msg: string;
 }
 
+export interface TooltipItem {
+  name: string;
+  value: number;
+  color: string;
+  data: {
+    date: string;
+    category: string;
+    value: number;
+  };
+}
+
 export interface ChartConfig {
   data: IndustryDataItem[];
   height: number;
@@ -44,7 +56,11 @@ export interface ChartConfig {
       formatter: (val: string) => string;
     };
   };
-  tooltip: false;
+  tooltip: {
+    showTitle?: boolean;
+    title?: string | ((title: string, data?: TooltipItem[]) => string); 
+    customContent?: (title: string, items: TooltipItem[]) => ReactNode;
+  };
   point: {
     size: number;
     shape: string;
@@ -56,6 +72,13 @@ export interface ChartConfig {
     };
   };
   smooth: boolean;
+  interactions?: Array<{
+    type: string;
+    cfg: {
+      render: (event: any, { title, items }: { title: string; items: TooltipItem[] }) => ReactNode;
+    };
+  }>;
+  legend?: boolean;
 }
 
 export type DateFormatter = (dateStr: string, dimension: TimeDimension) => string;