股市温度计tooltip。

src/views/components/marketTemperature.vue

@@ -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;
@@ -1108,6 +1117,7 @@ defineExpose({ initChart });
   display: flex;
   justify-content: center;
   align-items: center;
+
   @media only screen and (max-width: 768px) {
     font-size: 12px;
   }