diff --git a/src/views/components/marketTemperature.vue b/src/views/components/marketTemperature.vue index edac0cf..34b392c 100644 --- a/src/views/components/marketTemperature.vue +++ b/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 = `
日期: ${params[0].name}
`; + let result = `
日期: ${params[0].name}
`; params.forEach((param) => { if (param.seriesType === "candlestick") { @@ -463,24 +465,31 @@ function initChart(raw, klineDataRawValue, WDRLValue) { if (isMobile) { // 移动端简化显示 result += `
`; - result += `
${param.seriesName}
`; - result += `
开盘价:${open}
`; - result += `
收盘价:${close}
`; - result += `
最低价:${low}
`; - result += `
最高价:${high}
`; + result += `
${param.seriesName}
`; + result += `
开盘价:${open}
`; + result += `
收盘价:${close}
`; + result += `
最低价:${low}
`; + result += `
最高价:${high}
`; result += `
`; } else { // 桌面端完整显示 result += `
`; - result += `
${param.seriesName}
`; - result += `
开盘价: ${open}
`; - result += `
收盘价: ${close}
`; - result += `
最低价: ${low}
`; - result += `
最高价: ${high}
`; + result += `
${param.seriesName}
`; + result += `
开盘价: ${open}
`; + result += `
收盘价: ${close}
`; + result += `
最低价: ${low}
`; + result += `
最高价: ${high}
`; result += `
`; } } else if (param.seriesType === "line") { - result += `
${param.seriesName}: ${param.value}
`; + // 根据系列名称设置不同颜色 + let textColor = 'black'; + if (param.seriesName === '市场温度') { + textColor = 'red'; + } else if (param.seriesName === '股票温度') { + textColor = 'blue'; + } + result += `
${param.seriesName}: ${param.value}
`; } }); 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; }