Merge branch 'aiEmotion' of http://39.101.133.168:8807/hongxilin/AIxiaocaishen into aiEmotion

src/views/components/emotionDecod.vue

@@ -1,57 +1,34 @@
 <template>
-  <!-- <div ref="qxnlzhqEchartsRef" id="qxnlzhqEcharts"></div> -->
   <div class="qxjmqbox">
-    <div ref="KlineCanvs" id="qxjmqEcharts" class="qxjmqbox"></div>
+    <div ref="qxjmqEchartsRef" id="qxjmqEcharts" class="qxjmqbox"></div>
   </div>
 </template>
     
     <script setup>
-import { ref, onMounted, onBeforeUnmount, toRef } from "vue";
+import { ref, onMounted, onBeforeUnmount } from "vue";
 import * as echarts from "echarts";
-import { color } from "echarts/lib/export";
 
 defineExpose({ initQXNLZHEcharts });
 
-const KlineCanvs = ref(null);
-let KlineCanvsChart = null;
+const qxjmqEchartsRef = ref(null);
+let qxjmqChart = null;
 const heatmapData = ref([]); // 存储热力图数据
 
-// 假数据
-const rawData2 = ref([]);
-const lineData3 = ref([]);
+const rawData2 = ref([]); // 
+const lineData3 = ref([]);// 存储折线图数据
 function initQXNLZHEcharts(kline, qxnlzhqData) {
-  qxnlzhqData[9][9] = 1;
-  qxnlzhqData[2][9] = 1;
   rawData2.value = qxnlzhqData;
   // 处理热力图数据
   const processedHeatmap = [];
   rawData2.value.forEach((item, dateIndex) => {
     const [date, d1, d2, d3, d4, d5, d6, d7, d8, d9] = item;
-    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
+    processedHeatmap.push([ dateIndex, 0, d4, d8 == 1 ? "green" : "transparent", date]); // 数据1
+    processedHeatmap.push([ dateIndex, 1, d3, d7 == 1 ? "purple" : "transparent", date]); // 数据2
+    processedHeatmap.push([ dateIndex, 2, d2, d6 == 1 ? "red" : "transparent", date]); // 数据3
+    processedHeatmap.push([ dateIndex, 3, d1, d5 == 1 ? "yellow" : "transparent", date, ]); // 数据4
   });
   heatmapData.value = processedHeatmap;
-  // 处理折线图数据
   lineData3.value = rawData2.value.map((item) => item[9]);
-  console.log("热力图数据:", heatmapData.value);
-  console.log("折线图数据:", lineData3.value);
   const data = kline;
   // 切割数据方法
   const spliteDate = (a) => {
@@ -64,16 +41,10 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
     return { categoryData, value };
   };
   const dealData = spliteDate(data);
-  // 给配置项
+  // 配置项
   const KlineOption = {
     tooltip: {
-      trigger: "item", // 触发类型 坐标轴触发
-      //       axisPointer: {
-      //     type: "cross", // 十字准星效果
-      //     crossStyle: {
-      //       color: "#999"
-      //     }
-      //   }
+       show: false 
     },
 
     //控制坐标轴
@@ -82,7 +53,6 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
       { top: "45%", height: "35%" },
       { top: "80%", height: "2%" },
     ],
-
     visualMap: [
       {
         show: false, // 不显示控制条
@@ -127,7 +97,6 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
           show: true,
           lineStyle: {
             color: "white",
-            // 间隔线类型实线
             type: "solid",
           },
           interval: 0,
@@ -138,6 +107,9 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         gridIndex: 2,
         data: dealData.categoryData,
         axisLine: { lineStyle: { color: "#8392A5" } },
+        axisLabel: {
+        rotate: 45, // 日期旋转45度防止重叠
+      },
       },
     ],
     yAxis: [
@@ -166,14 +138,10 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
       {
         gridIndex: 1,
         type: "category",
-        data: [0, 1, 2, 3], // 倒序显示
+        data: [0, 1, 2, 3],
         axisLine: { lineStyle: { color: "#8392A5" } },
         axisLabel: {
-          show: true, // 显示刻度标签
-          color: "#fff", // 白色文字
-          backgroundColor: "transparent",
-          fontSize: 12,
-          margin: 8,
+          show: false, 
         },
         axisTick: { show: false }, // 隐藏刻度线
         splitLine: {
@@ -183,7 +151,6 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
             width: 1,
             type: "solid",
           },
-
           interval: 0, // 强制显示间隔
         },
       },
@@ -240,9 +207,12 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
     series: [
       {
         type: "candlestick",
-        name: "\u65e5K",
+        name: "K线",
         // 数据
         data: dealData.value,
+        tooltip: {
+                show: false 
+        },
         itemStyle: {
           normal: {
             color0: "red", // 阴线颜色
@@ -262,12 +232,11 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         data: processedHeatmap,
         coordinateSystem: "cartesian2d",
         // tooltip: {
-//     // 覆盖全局 tooltip 配置
         //   formatter: function (params) {
-//         const date = params.axisValue;
-//       return `${date}：${params.data[2]}`; // 直接取数据中的第3个元素（数值）
-//     }
+        //     return `${params.data[4]}: ${params.data[2]}`; // 时间 值
+        //   },
         // },
+
         label: {
           normal: {
             show: true,
@@ -275,7 +244,6 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
             formatter: function (params) {
               const value = params.value[2]; // 数值
               const colorType = params.value[3]; // 颜色类型
-              // 使用 rich 富文本格式
               return `{${colorType}|${value}}`;
             },
             rich: {
@@ -322,11 +290,11 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
   };
 
   // 创造echarts图
-  KlineCanvsChart = echarts.init(KlineCanvs.value);
-  KlineCanvsChart.setOption(KlineOption);
+  qxjmqChart = echarts.init(qxjmqEchartsRef.value);
+  qxjmqChart.setOption(KlineOption);
   // 窗口大小变化时重置图表大小
   window.addEventListener("resize", () => {
-    KlineCanvsChart.resize();
+    qxjmqChart.resize();
   });
 }
 const windowHeight = ref(window.innerHeight);
@@ -338,14 +306,15 @@ onMounted(() => {
 });
 onBeforeUnmount(() => {
   // 组件卸载时销毁图表
-  if (KlineCanvsChart) {
-    KlineCanvsChart.dispose();
+  if (qxjmqChart) {
+    qxjmqChart.dispose();
   }
 });
 </script>
 <style scoped>
 .qxjmqbox {
   background-color: #131a2a;
+  width: 100%;
 }
 #qxjmqEcharts {
   width: 100%;