feat: 更新图表工具提示和年份选项

- 重构图表工具提示显示逻辑，支持合并预测值和实际值显示
- 更新默认年份为2024并添加2024选项
- 修复餐饮环节名称错误
- 优化动画关键帧样式

src/views/shanghaiStreetMapDasai.vue

@@ -339,14 +339,11 @@
     </div>
     <div
       class="flex items-center justify-center w-96 h-48 border-2 border-dashed rounded border-gray-500 overflow-hidden z-[999] fixed bottom-10 right-7"
-      ref="main9" 
+      ref="main9" :class="{
-      :class="{
         'animate-popup': isAnimating && relationShow,
         'animate-shrink': isAnimating && !relationShow,
         'opacity-0 scale-0': !relationShow && !isAnimating
-      }"
+      }" v-show="relationShow || isAnimating" style="transform-origin: bottom right;">
-      v-show="relationShow || isAnimating"
-      style="transform-origin: bottom right;">
 
     </div>
 
@@ -505,10 +502,10 @@ const choujianShow = ref(false);
 const tousuShow = ref(false);
 const zhifaShow = ref(false);
 //
-const littlemonth = ref(-1);
+const littlemonth = ref(0);
 
 // 下拉框"年份"值
-const yearValue = ref("2023");
+const yearValue = ref("2024");
 // 下拉框"年份"option
 const yearOptions = [
   {
@@ -523,6 +520,10 @@ const yearOptions = [
     value: "2023",
     label: "2023",
   },
+  {
+    value: "2024",
+    label: "2024",
+  },
   // 可以根据需要添加更多年份
 ];
 
@@ -3987,7 +3988,7 @@ const choujianEchartsPinfa = () => {
         showSymbol: true,
         emphasis: { focus: "series" },
         z: 1,
-        tooltip: { show: false }, // 关键：隐藏虚线的tooltip
+        // tooltip: { show: false }, // 关键：隐藏虚线的tooltip
       },
     ])
     .flat();
@@ -4000,10 +4001,51 @@ const choujianEchartsPinfa = () => {
       textStyle: { color: "#00ffff", fontSize: 20, fontWeight: "bold" },
       top: 5,
     },
+    // tooltip: {
+    //   trigger: "axis",
+    //   // valueFormatter: (v) => (v == null ? "无" : v + "%"),
+    //   valueFormatter: (v) => (v == null ? choujianPinfaData.value[0].prediction + "%" : v + "%"),
+    // },
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
-      // valueFormatter: (v) => (v == null ? "无" : v + "%"),
+      formatter: function (params) {
-      valueFormatter: (v) => (v == null ? choujianPinfaData.value[0].prediction + "%" : v + "%"),
+        let ymonth = "";
+        let result = '';
+        const dataMap = {};
+
+        // 合并实线和虚线数据
+        params.forEach(item => {
+          // console.log(item);
+          const isPrediction = item.seriesName.includes('预测');
+          const baseName = isPrediction ? item.seriesName.replace('预测', '') : item.seriesName;
+
+          if (!dataMap[baseName]) {
+            dataMap[baseName] = { value: null, prediction: null };
+          }
+
+          if (isPrediction) {
+            dataMap[baseName].prediction = item.value;
+          } else {
+            dataMap[baseName].value = item.value;
+          }
+
+          ymonth = item.name;
+          // console.log(ymonth);
+        });
+
+        // 构建tooltip内容
+        Object.keys(dataMap).forEach(name => {
+          const item = dataMap[name];
+          if (item.prediction && ymonth == "5月") {
+            result += `${name}: (预测: ${item.prediction}%)`;
+          } else {
+            result += `${name}: ${item.value || '0'}%`;
+          }
+          result += '<br/>';
+        });
+
+        return result;
+      },
     },
     legend: {
       data: legendData,
@@ -4079,7 +4121,7 @@ const zhifaEchartsPinfa = () => {
         showSymbol: true,
         emphasis: { focus: "series" },
         z: 1,
-        tooltip: { show: false }, // 关键：隐藏虚线的tooltip
+        // tooltip: { show: false }, // 关键：隐藏虚线的tooltip
       },
     ])
     .flat();
@@ -4092,11 +4134,52 @@ const zhifaEchartsPinfa = () => {
       textStyle: { color: "#00ffff", fontSize: 20, fontWeight: "bold" },
       top: 5,
     },
-    tooltip: {
+    // tooltip: {
-      trigger: "axis",
+    //   trigger: "axis",
-      valueFormatter: (v) => (v == null ? zhifaPinfaData.value[0].prediction + "%" : v + "%"),
+    //   valueFormatter: (v) => (v == null ? zhifaPinfaData.value[0].prediction + "%" : v + "%"),
-      // formatter: '{b0}: {c0}<br />{b1}: {c1}'
+    //   // formatter: '{b0}: {c0}<br />{b1}: {c1}'
 
+    // },
+    tooltip: {
+      trigger: 'axis',
+      formatter: function (params) {
+        let ymonth = "";
+        let result = '';
+        const dataMap = {};
+
+        // 合并实线和虚线数据
+        params.forEach(item => {
+          // console.log(item);
+          const isPrediction = item.seriesName.includes('预测');
+          const baseName = isPrediction ? item.seriesName.replace('预测', '') : item.seriesName;
+
+          if (!dataMap[baseName]) {
+            dataMap[baseName] = { value: null, prediction: null };
+          }
+
+          if (isPrediction) {
+            dataMap[baseName].prediction = item.value;
+          } else {
+            dataMap[baseName].value = item.value;
+          }
+
+          ymonth = item.name;
+          // console.log(ymonth);
+        });
+
+        // 构建tooltip内容
+        Object.keys(dataMap).forEach(name => {
+          const item = dataMap[name];
+          if (ymonth == "5月") {
+            result += `${name}: (预测: ${item.prediction}%)`;
+          } else {
+            result += `${name}: ${item.value || '0'}%`;
+          }
+          result += '<br/>';
+        });
+
+        return result;
+      },
     },
     legend: {
       data: legendData,
@@ -4149,7 +4232,7 @@ const jubaoGaofaData = ref([
     tousulv: "2.04%",
     dengji: "yellow",
   }, {
-    huanjie: "销售环节",
+    huanjie: "餐饮环节",
     zhonglei: "虚假宣传",
     tousulv: "1.97%",
     dengji: "yellow",
@@ -4402,10 +4485,12 @@ const handleFancyClick = (e: MouseEvent) => {
     opacity: 0;
     transform: scale(0) translate(0, 0);
   }
+
   50% {
     opacity: 0.8;
     transform: scale(0.8) translate(0, -20px);
   }
+
   100% {
     opacity: 1;
     transform: scale(1) translate(0, 0);
@@ -4418,10 +4503,12 @@ const handleFancyClick = (e: MouseEvent) => {
     opacity: 1;
     transform: scale(1) translate(0, 0);
   }
+
   50% {
     opacity: 0.8;
     transform: scale(0.8) translate(0, -20px);
   }
+
   100% {
     opacity: 0;
     transform: scale(0) translate(0, 0);