情绪解码器颜色显示

src/views/components/emotionDecod.vue

@@ -20,37 +20,36 @@ const heatmapData = ref([]); // 存储热力图数据
 const rawData2 = ref([]);
 const lineData3 = ref([]);
 function initQXNLZHEcharts(kline, qxnlzhqData) {
-  // qxnlzhqData[9][9]=1
-  // qxnlzhqData[2][9]=1
+  qxnlzhqData[9][9] = 1;
+  qxnlzhqData[2][9] = 1;
   rawData2.value = qxnlzhqData;
   // 处理热力图数据
   const processedHeatmap = [];
-//   const colorMap = {
-//   'transparent': 0,
-//   'blue': 1,
-//   'pink': 2,
-//   'red': 3,
-//   'yellow': 4
-// };
   rawData2.value.forEach((item, dateIndex) => {
     const [date, d1, d2, d3, d4, d5, d6, d7, d8, d9] = item;
-    processedHeatmap.push([dateIndex, 0, d4 , d8 == 1 ?'blue' :'transparent']); // 数据1
-    processedHeatmap.push([dateIndex, 1, d3 , d7 == 1 ?'pink' :'transparent']); // 数据2
-    processedHeatmap.push([dateIndex, 2, d2 , d6 == 1 ?'red' :'transparent']); // 数据3
-    processedHeatmap.push([dateIndex, 3, d1 , d5 == 1 ?'yellow' :'transparent']); // 数据4
-//     processedHeatmap.push([dateIndex, 0, d4, colorMap[d8 == 1 ? 'blue' : 'transparent']]); // 数据1
-//   processedHeatmap.push([dateIndex, 1, d3, colorMap[d7 == 1 ? 'pink' : 'transparent']]); // 数据2
-//   processedHeatmap.push([dateIndex, 2, d2, colorMap[d6 == 1 ? 'red' : 'transparent']]); // 数据3
-//   processedHeatmap.push([dateIndex, 3, d1, colorMap[d5 == 1 ? 'yellow' : 'transparent']]); // 数据4
-// processedHeatmap.push([dateIndex, 0, d4, d8 === 1 ? -1 : 0]); // -1: blue
-//   processedHeatmap.push([dateIndex, 1, d3, d7 === 1 ? -2 : 0]); // -2: pink
-//   processedHeatmap.push([dateIndex, 2, d2, d6 === 1 ? -3 : 0]); // -3: red
-//   processedHeatmap.push([dateIndex, 3, d1, d5 === 1 ? -4 : 0]); // -4: yellow
+    processedHeatmap.push([
+      dateIndex,
+      0,
+      d4,
+      d8 == 1 ? "green" : "transparent",
+    ]); // 数据1
+    processedHeatmap.push([
+      dateIndex,
+      1,
+      d3,
+      d7 == 1 ? "purple" : "transparent",
+    ]); // 数据2
+    processedHeatmap.push([dateIndex, 2, d2, d6 == 1 ? "red" : "transparent"]); // 数据3
+    processedHeatmap.push([
+      dateIndex,
+      3,
+      d1,
+      d5 == 1 ? "yellow" : "transparent",
+    ]); // 数据4
   });
-  heatmapData.value = processedHeatmap; //[0, 1, 'orange']
+  heatmapData.value = processedHeatmap;
   // 处理折线图数据
   lineData3.value = rawData2.value.map((item) => item[9]);
-  // console.log('k图:', rawData2.value)
   console.log("热力图数据:", heatmapData.value);
   console.log("折线图数据:", lineData3.value);
   const data = kline;
@@ -69,6 +68,12 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
   const KlineOption = {
     tooltip: {
       trigger: "item", // 触发类型 坐标轴触发
+      //       axisPointer: {
+      //     type: "cross", // 十字准星效果
+      //     crossStyle: {
+      //       color: "#999"
+      //     }
+      //   }
     },
 
     //控制坐标轴
@@ -91,14 +96,6 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         inRange: {
           color: ["transparent"],
         },
-        // dimension: 3, // 指定使用第4个维度（索引从0开始）
-    //     pieces: [
-    //   { value: -1, borderColor: '#1E90FF' }, // blue
-    //   { value: -2, borderColor: '#FF69B4' }, // pink
-    //   { value: -3, borderColor: '#FF0000' }, // red
-    //   { value: -4, borderColor: '#FFFF00' }, // yellow
-    //   { value: 0, borderColor: 'transparent' } // 默认透明
-    // ]
       },
     ],
     // 横坐标内容
@@ -195,7 +192,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         type: "value",
         axisLine: {
           show: true,
-          lineStyle: { color: "#FED88D" },
+          lineStyle: { color: "#8392A5" },
         },
         splitLine: {
           show: !1,
@@ -263,26 +260,38 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         xAxisIndex: 1,
         yAxisIndex: 1,
         data: processedHeatmap,
-//         data: [
-//   [0, 0, 116, "#0CF49B"], // [x, y, value, borderColor]
-//   [0, 1, 20, "#FF5733"],
-//   [1, 1, 50, "#FFC300"],
-// ],
         coordinateSystem: "cartesian2d",
+//         tooltip: {
+//     // 覆盖全局 tooltip 配置
+//     formatter: function (params) {
+//         const date = params.axisValue;
+//       return `${date}：${params.data[2]}`; // 直接取数据中的第3个元素（数值）
+//     }
+//   },
         label: {
           normal: {
             show: true,
             color: "#fff", // 文本颜色
             formatter: function (params) {
-              return params.value[2]; // 低版本使用 params.value 访问完整数据
+              const value = params.value[2]; // 数值
+              const colorType = params.value[3]; // 颜色类型
+              // 使用 rich 富文本格式
+              return `{${colorType}|${value}}`;
+            },
+            rich: {
+              green: { color: "#27ae60", fontWeight: "bold" },
+              purple: { color: "#8e44ad", fontWeight: "bold" },
+              red: { color: "#FF0000", fontWeight: "bold" },
+              yellow: { color: "#FFFF00", fontWeight: "bold" },
+              normal: { color: "#fff" },
             },
           },
         },
         itemStyle: {
-            normal: {
-        color: "transparent",
-        borderWidth: 2
-      }
+          normal: {
+            color: "transparent",
+            borderWidth: 2,
+          },
         },
         emphasis: {
           itemStyle: {
@@ -299,9 +308,15 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         data: lineData3.value,
         color: "black",
         lineStyle: {
-          color: "white", // 线的颜色
+          normal: {
+            color: "red",
+          },
+        },
+
+        symbol: "none",
+        emphasis: {
+          showSymbol: true,
         },
-        symbol: "none", // 去掉点
       },
     ],
   };