股市温度计tooltip。

src/views/components/marketTemperature.vue

@@ -369,14 +369,14 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
   const dateLabels = raw.map((item) => item[0]);
   const marketData = raw.map((item) => Math.round(item[1]));
   const stockData = raw.map((item) => Math.round(item[2]));
-  
+
   // 处理数据重合时只显示市场温度的逻辑
   // 检查是否所有数据都重合
   const allDataMatch = stockData.every((stockTemp, index) => {
     const marketTemp = marketData[index];
     return stockTemp === marketTemp;
   });
-  
+
   // 只有当全部数据都重合时，才只显示市场温度（股票温度设为null）
   const processedStockData = allDataMatch ? stockData.map(() => null) : stockData;
 
@@ -423,24 +423,26 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
       axisPointer: {
         type: "cross",
         crossStyle: {
-          color: "#999",
-          width: 1,
-          type: "dashed",
+          color: '#999'
         },
         lineStyle: {
-          color: "#999",
-          width: 1,
-          type: "dashed",
+          type: 'dashed' // 设置为虚线
         },
+        link: [
+          {
+            xAxisIndex: [0, 1, 2]
+          }
+        ]
       },
-      backgroundColor: '#646E71',
-      borderColor: '#fff',
-      borderWidth: 1,
-      padding: [8, 12],
-      textStyle: {
-        color: '#fff',
-        fontSize: window.innerWidth <= 768 ? 10 : 12 // 移动端使用更小字体
-      },
+			backgroundColor: 'rgba(232, 232, 242, 0.87)',
+			borderColor: '#fff',
+			borderWidth: 1,
+			borderRadius: 8,
+			padding: 10,
+			textStyle: {
+				color: '#555555',
+				fontSize: 12
+			},
       extraCssText: window.innerWidth <= 768 ?
         'max-width: 280px; word-wrap: break-word; white-space: normal; box-shadow: 0 2px 8px rgba(0,0,0,0.3);' :
         'max-width: 350px; word-wrap: break-word; white-space: normal; box-shadow: 0 2px 8px rgba(0,0,0,0.3);',
@@ -451,7 +453,7 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
           const lineHeight = isMobile ? '1.3' : '1.5';
           const marginBottom = isMobile ? '4px' : '6px';
 
-          let result = `<div style="font-weight: bold; color: #fff; margin-bottom: ${marginBottom}; font-size: ${fontSize}; line-height: ${lineHeight};">日期: ${params[0].name}</div>`;
+          let result = `<div style="font-weight: bold; color: black; margin-bottom: ${marginBottom}; font-size: ${fontSize}; line-height: ${lineHeight};">日期: ${params[0].name}</div>`;
 
           params.forEach((param) => {
             if (param.seriesType === "candlestick") {
@@ -463,24 +465,31 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
               if (isMobile) {
                 // 移动端简化显示
                 result += `<div style="margin-bottom: ${marginBottom}; font-size: ${fontSize}; line-height: ${lineHeight};">`;
-                result += `<div style="color: #fff; font-weight: bold; margin-bottom: 2px;">${param.seriesName}</div>`;
-                result += `<div style="color: #fff; display: flex; justify-content: space-between;"><span>开盘价:</span><span>${open}</span></div>`;
-                result += `<div style="color: #fff; display: flex; justify-content: space-between;"><span>收盘价:</span><span>${close}</span></div>`;
-                result += `<div style="color: #fff; display: flex; justify-content: space-between;"><span>最低价:</span><span>${low}</span></div>`;
-                result += `<div style="color: #fff; display: flex; justify-content: space-between;"><span>最高价:</span><span>${high}</span></div>`;
+                result += `<div style="color: black; font-weight: bold; margin-bottom: 2px;">${param.seriesName}</div>`;
+                result += `<div style="color: black; display: flex; justify-content: space-between;"><span>开盘价:</span><span>${open}</span></div>`;
+                result += `<div style="color: black; display: flex; justify-content: space-between;"><span>收盘价:</span><span>${close}</span></div>`;
+                result += `<div style="color: black; display: flex; justify-content: space-between;"><span>最低价:</span><span>${low}</span></div>`;
+                result += `<div style="color: black; display: flex; justify-content: space-between;"><span>最高价:</span><span>${high}</span></div>`;
                 result += `</div>`;
               } else {
                 // 桌面端完整显示
                 result += `<div style="margin-bottom: ${marginBottom}; font-size: ${fontSize}; line-height: ${lineHeight};">`;
-                result += `<div style="color: #fff; font-weight: bold;">${param.seriesName}</div>`;
-                result += `<div style="color: #fff;">开盘价: ${open}</div>`;
-                result += `<div style="color: #fff;">收盘价: ${close}</div>`;
-                result += `<div style="color: #fff;">最低价: ${low}</div>`;
-                result += `<div style="color: #fff;">最高价: ${high}</div>`;
+                result += `<div style="color: black; font-weight: bold;">${param.seriesName}</div>`;
+                result += `<div style="color: black;">开盘价: ${open}</div>`;
+                result += `<div style="color: black;">收盘价: ${close}</div>`;
+                result += `<div style="color: black;">最低价: ${low}</div>`;
+                result += `<div style="color: black;">最高价: ${high}</div>`;
                 result += `</div>`;
               }
             } else if (param.seriesType === "line") {
-              result += `<div style="color: #fff; margin-bottom: 2px; font-size: ${fontSize}; line-height: ${lineHeight};">${param.seriesName}: ${param.value}</div>`;
+              // 根据系列名称设置不同颜色
+              let textColor = 'black';
+              if (param.seriesName === '市场温度') {
+                textColor = 'red';
+              } else if (param.seriesName === '股票温度') {
+                textColor = 'blue';
+              }
+              result += `<div style="color: ${textColor}; margin-bottom: 2px; font-size: ${fontSize}; line-height: ${lineHeight};">${param.seriesName}: ${param.value}</div>`;
             }
           });
           return result;
@@ -511,14 +520,14 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
         fontWeight: "bold",
       },
 
-      axisTick: { 
+      axisTick: {
         show: true,
         alignWithLabel: true, // 刻度线与标签对齐
-        lineStyle: { 
+        lineStyle: {
           color: "white", // 与十字线颜色保持一致
           width: 1,
           type: "dashed" // 与十字线样式保持一致
-        } 
+        }
       },
       axisPointer: {
         show: true,
@@ -678,7 +687,7 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
       },
     ],
   });
-  
+
   // 添加图表交互事件监听器
   if (chartInstance) {
     // 监听数据缩放事件
@@ -687,28 +696,28 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
         window.handleChartInteractionStart();
       }
     });
-    
+
     // 监听鼠标滚轮事件（缩放）
     chartInstance.on('mousewheel', () => {
       if (window.handleChartInteractionStart) {
         window.handleChartInteractionStart();
       }
     });
-    
+
     // 监听鼠标按下事件（拖拽开始）
     chartInstance.on('mousedown', () => {
       if (window.handleChartInteractionStart) {
         window.handleChartInteractionStart();
       }
     });
-    
+
     // 监听鼠标释放事件（拖拽结束）
     chartInstance.on('mouseup', () => {
       if (window.handleChartInteractionEnd) {
         window.handleChartInteractionEnd();
       }
     });
-    
+
     // 监听图表点击事件
     chartInstance.on('click', () => {
       if (window.handleChartInteractionStart) {
@@ -716,7 +725,7 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
       }
     });
   }
-  
+
   // 防抖函数，避免频繁触发resize
   const debounce = (func, wait) => {
     let timeout;
@@ -1108,6 +1117,7 @@ defineExpose({ initChart });
   display: flex;
   justify-content: center;
   align-items: center;
+
   @media only screen and (max-width: 768px) {
     font-size: 12px;
   }