#633 历史工况记录-工况图未做颜色区分

src/components/CalendarHeatmap/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div ref="chart" style="width: 100%; height: 100%"></div>
 </template>
-  
-  <script lang="ts" setup>
+
+<script lang="ts" setup>
 import {
   ref,
   onMounted,
@@ -69,50 +69,52 @@ const initChart = () => {
     myChart = echarts.init(chart.value);
     const option = {
       tooltip: {
-           trigger: 'item',
-        position: "top",
-        triggerOn:'click',
+        trigger: "item",
+        triggerOn: "click",
         enterable: true,
-        formatter: (params) => {
-          const { data } = params;
-          const { x, y, objs, date } = data;
-          function getFirstThreeUniqueTypes(objs: Obj[]): string[] {
-            const uniqueTypes = new Set<string>();
-            const result: string[] = [];
+        position: (pos: number[]) => {
+          return [pos[0] + 10, pos[1] - 10]; // 例如，向右下方偏移
+        },
+          formatter: (params) => {
+            const { data } = params;
+            const { x, y, objs, date } = data;
+            function getFirstThreeUniqueTypes(objs: Obj[]): string[] {
+              const uniqueTypes = new Set<string>();
+              const result: string[] = [];
 
-            for (const obj of objs[0].value) {
-              if (!uniqueTypes.has(obj.type)) {
-                uniqueTypes.add(obj.type);
-                result.push(obj.label);
-              }
-              if (uniqueTypes.size === 3) {
-                break;
+              for (const obj of objs[0].value) {
+                if (!uniqueTypes.has(obj.type)) {
+                  uniqueTypes.add(obj.type);
+                  result.push(obj.label);
+                }
+                if (uniqueTypes.size === 3) {
+                  break;
+                }
               }
-            }
 
-            return result;
-          }
-          const nameArr = getFirstThreeUniqueTypes(objs);
-          // 动态生成多个 <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 `
-        <div style="max-height: 150px; width: 200px;background:'#fff';borderRadius:'6px'">
-          <div style="border-bottom:1px solid #eee;line-height:30px;text-align:center">${date}</div>
-          ${nameDivs}
-          <div style="border-bottom:1px solid #eee;line-height:30px;text-align:center;color:#0982FE;cursor: pointer;"
-           data-objs='${JSON.stringify(objs[0].value)}'>查看工况详情</div>
-        </div>
-      `;
-        },
+              return result;
+            }
+            const nameArr = getFirstThreeUniqueTypes(objs);
+            // 动态生成多个 <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 `
+          <div style="max-height: 150px; width: 200px;background:'#fff';borderRadius:'6px'">
+            <div style="border-bottom:1px solid #eee;line-height:30px;text-align:center">${date}</div>
+            ${nameDivs}
+            <div style="border-bottom:1px solid #eee;line-height:30px;text-align:center;color:#0982FE;cursor: pointer;"
+             data-objs='${JSON.stringify(objs[0].value)}'>查看工况详情</div>
+          </div>
+        `;
+          },
       },
       grid: {
         // height: '50%',
@@ -164,16 +166,14 @@ const initChart = () => {
         boundaryGap: true,
       },
       visualMap: {
-        show: false, // 隐藏颜色映射条
-        min: 0,
-        max: 10,
-        calculable: true,
-        orient: "horizontal",
-        left: "center",
-        bottom: "15%",
-        textStyle: {
-          color: "#FFFFFFE6",
-        },
+        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: [
         {
@@ -268,11 +268,10 @@ watch(
   }
 );
 </script>
-  
-  <style scoped>
+
+<style scoped>
 #chart {
   width: 100%;
   height: 400px;
 }
 </style>
-