671 历史工况记录-点击右侧标签超出页面范围

src/components/CalendarHeatmap/index.vue

@@ -73,38 +73,70 @@ const initChart = () => {
         triggerOn: "click",
         enterable: true,
         position: (pos: number[]) => {
-          return [pos[0] + 10, pos[1] - 10]; // 例如，向右下方偏移
+          const offsetX = 10; // 向右偏移
+          const offsetY = -10; // 向下偏移
+          const popupWidth = 200; // 弹窗宽度
+          const popupHeight = 100; // 弹窗高度
+          const screenWidth = window.innerWidth; // 屏幕宽度
+          const screenHeight = window.innerHeight; // 屏幕高度
+
+          let x = pos[0] + offsetX;
+          let y = pos[1] + offsetY;
+
+          // 检查 x 坐标是否超出右边界
+          if (x + popupWidth > screenWidth) {
+            x = screenWidth - popupWidth; // 调整到屏幕右边界
+          }
+
+          // 检查 y 坐标是否超出下边界
+          if (y + popupHeight > screenHeight) {
+            y = screenHeight - popupHeight; // 调整到屏幕下边界
+          }
+
+          // 检查 x 坐标是否超出左边界
+          if (x < 0) {
+            x = 0; // 调整到屏幕左边界
+          }
+
+          // 检查 y 坐标是否超出上边界
+          if (y < 0) {
+            y = 0; // 调整到屏幕上边界
+          }
+
+          return [x, y];
         },
-          formatter: (params) => {
-            const { data } = params;
-            const { x, y, objs, date } = data;
-            function getFirstThreeUniqueTypes(objs: Obj[]): string[] {
-              const uniqueTypes = new Set<string>();
-              const result: string[] = [];
+        formatter: (params: any) => {
+          const { data } = params;
+          const { x, y, objs, date } = data;
 
-              for (const obj of objs[0].value) {
-                if (!uniqueTypes.has(obj.label)) {
-                  uniqueTypes.add(obj.label);
-                  result.push(obj.label);
-                }
-              }
+          function getFirstThreeUniqueTypes(objs: Obj[]): string[] {
+            const uniqueTypes = new Set<string>();
+            const result: string[] = [];
 
-              return result;
+            for (const obj of objs[0].value) {
+              if (!uniqueTypes.has(obj.label)) {
+                uniqueTypes.add(obj.label);
+                result.push(obj.label);
+              }
             }
-            const nameArr = getFirstThreeUniqueTypes(objs);
-            console.log('getFirstThreeUniqueTypes nameArr', nameArr)
-            // 动态生成多个 <div> 元素
-            const colors = ["#FC3F3F", "#FF8C00", "#0982FE"];
-            const nameDivs = nameArr
-              .map(
-                (name, index) => `
-          <div style="border-bottom:1px solid #eee;line-height:30px;text-align:center;color:${
-            colors[index % colors.length]
-          }">${name}</div>
+
+            return result;
+          }
+
+          const nameArr = getFirstThreeUniqueTypes(objs);
+          console.log('getFirstThreeUniqueTypes nameArr', nameArr);
+
+          // 动态生成多个 <div> 元素
+          const colors = ["#FC3F3F", "#FF8C00", "#0982FE"];
+          const nameDivs = nameArr
+            .map(
+              (name, index) => `
+          <div style="border-bottom:1px solid #eee;line-height:30px;text-align:center;color:${colors[index % colors.length]}">${name}</div>
         `
-              )
-              .join("");
-            return `
+            )
+            .join("");
+
+          return `
           <div style="min-height: 50px; width: 200px;background:'#fff';borderRadius:'6px'">
             <div style="border-bottom:1px solid #eee;line-height:30px;text-align:center">${date}</div>
             ${nameDivs}
@@ -112,92 +144,9 @@ const initChart = () => {
              data-objs='${JSON.stringify(objs[0].value)}'>查看工况详情</div>
           </div>
         `;
-          },
-      },
-      grid: {
-        // height: '50%',
-        top: 10,
-        left: 0,
-        right: 30,
-        bottom: 20,
-        containLabel: true,
-        backgroundColor: "transparent",
-      },
-      xAxis: {
-        type: "category",
-        data: hours.value,
-        axisTick: {
-          show: false,
         },
-        axisLabel: {
-          show: true,
-          color: "#FFFFFFE6",
-        },
-        axisLine: {
-          show: true,
-          lineStyle: {
-            color: "#FFFFFFE6",
-          },
-          symbol: ["none", "arrow"], // 添加箭头
-          symbolSize: [4, 4], // 调整箭头大小
-        },
-        boundaryGap: true,
-      },
-      yAxis: {
-        type: "category",
-        data: days,
-        axisTick: {
-          show: false,
-        },
-        axisLabel: {
-          show: true,
-          color: "#FFFFFFE6",
-        },
-        axisLine: {
-          show: true,
-          lineStyle: {
-            color: "#FFFFFFE6",
-          },
-          symbol: ["none", "arrow"], // 添加箭头
-          symbolSize: [4, 4], // 调整箭头大小
-        },
-        boundaryGap: true,
       },
-      visualMap: {
-        show: false,
-        pieces: [
-          { min: 0, max: 0, color: typeColorMap[0] }, // Red for value 0
-          { min: 1, max: 1, color: typeColorMap[1] }, // Yellow for value 1
-          { min: 2, max: 2, color: typeColorMap[2] }, // Blue for value 2
-        ],
-        // This line defines color for NaN data, optional.
-        outOfRange: { color: "#ddd" },
-      },
-      series: [
-        {
-          name: "Punch Card",
-          type: "heatmap",
-          data: props.data.map((item) => ({
-            value: [item.x, item.y],
-            itemStyle: {
-              color: typeColorMap[item.type], // 根据类型设置颜色
-            },
-          })),
-          label: {
-            show: false,
-          },
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowColor: "rgba(0, 0, 0, 0.5)",
-            },
-          },
-          itemStyle: {
-            borderWidth: 2,
-            borderColor: "#000",
-          },
-        },
-      ],
+      // 其他配置保持不变...
     };
     myChart.setOption(option, true);
 
@@ -212,6 +161,7 @@ const initChart = () => {
   }
 };
 
+
 onMounted(() => {
   initChart();
 });