From 7f9e4af1d541a7a3391c42c8ab70f149cacbcadb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=8B=E6=9D=B0?= Date: Thu, 10 Jul 2025 17:06:57 +0800 Subject: [PATCH] =?UTF-8?q?=E6=83=85=E7=BB=AA=E8=83=BD=E9=87=8F=E8=BD=AC?= =?UTF-8?q?=E5=8C=96=E5=99=A8=E4=BC=98=E5=8C=96=E4=BA=86=E6=9C=80=E5=90=8E?= =?UTF-8?q?=E4=B8=80=E6=A0=B9K=E7=BA=BF=E7=9A=84=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=EF=BC=8C=E6=96=B0=E5=A2=9E=E5=8D=81=E5=AD=97=E7=BA=BF=EF=BC=9B?= =?UTF-8?q?=E6=83=85=E7=BB=AA=E6=8E=A2=E5=BA=95=E9=9B=B7=E8=BE=BE=E9=AB=98?= =?UTF-8?q?=E5=BA=A6=E9=99=8D=E4=BD=8E=EF=BC=9B=E6=83=85=E7=BB=AA=E8=A7=A3?= =?UTF-8?q?=E7=A0=81=E5=99=A8tooltip=E6=98=BE=E7=A4=BA=E4=BC=98=E5=8C=96?= =?UTF-8?q?=EF=BC=9B=E8=82=A1=E5=B8=82=E6=B8=A9=E5=BA=A6=E8=AE=A1y?= =?UTF-8?q?=E5=88=BB=E5=BA=A6=E6=98=BE=E7=A4=BA=E9=81=AE=E6=8C=A1=E4=BC=98?= =?UTF-8?q?=E5=8C=96=EF=BC=9B=E9=9A=90=E8=97=8Fconsole=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/vite/build.js | 2 +- src/views/AiEmotion.vue | 5 +- src/views/components/emoEnergyConverter.vue | 188 ++++++++++++++++++-------- src/views/components/emotionDecod.vue | 3 +- src/views/components/emotionalBottomRadar.vue | 53 ++++---- src/views/components/marketTemperature.vue | 112 ++++++++++++++- 6 files changed, 269 insertions(+), 94 deletions(-) diff --git a/build/vite/build.js b/build/vite/build.js index 3894ee7..37e9c28 100644 --- a/build/vite/build.js +++ b/build/vite/build.js @@ -36,7 +36,7 @@ export function createBuild(viteEnv) { // 压缩配置 terserOptions: { compress: { - drop_console: false, // 生产环境移除console + drop_console: true, // 生产环境移除console drop_debugger: true // 生产环境移除debugger } } diff --git a/src/views/AiEmotion.vue b/src/views/AiEmotion.vue index bbd24cf..06b3039 100644 --- a/src/views/AiEmotion.vue +++ b/src/views/AiEmotion.vue @@ -3014,6 +3014,7 @@ defineExpose({ margin: 0 0 15px 0; text-align: center; letter-spacing: 2px; + margin-top: 10px; } .conclusion-item .conclusion-title::after { @@ -3070,7 +3071,7 @@ defineExpose({ .disclaimer-item { /* margin-top: 30px; */ - padding: 20px; + padding-bottom: 15%; border-top: 1px solid rgba(153, 153, 153, 0.2); text-align: center; } @@ -3236,7 +3237,7 @@ defineExpose({ } .class06 { - min-height: 25rem; + min-height: 32rem; } .class08 { diff --git a/src/views/components/emoEnergyConverter.vue b/src/views/components/emoEnergyConverter.vue index c6f447c..dfba893 100644 --- a/src/views/components/emoEnergyConverter.vue +++ b/src/views/components/emoEnergyConverter.vue @@ -12,7 +12,7 @@ let qxnlzhqEchartsRef = ref(null); let qxnlzhqEchartsInstance = null; let regions = reactive([]); -const dataMax=ref(null) +const dataMax = ref(null) // 设置区域名称 位置 function getNameTop(min, max, regionMiidle) { // 获取整个图表的高度 @@ -32,9 +32,9 @@ function getNumberTop(min, max, regionMax) { const generateGraphics = (min, max) => { let hasPartialVisible = false; // 标记是否已经遇到第一个部分可见的区域 return regions.flatMap((region) => { - if(!region.min || !region.max) return []; + if (!region.min || !region.max) return []; const middleY = (Number(region.min) + Number(region.max)) / 2; - const safeY = Math.max(min, Math.min(middleY, max*0.99)); + const safeY = Math.max(min, Math.min(middleY, max * 0.99)); // 检查区域是否完全可见 const isFullyVisible = region.min >= min && region.max <= max; // 检查区域是否部分可见 @@ -266,12 +266,47 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { tooltip: { show: true, trigger: 'axis', + confine: true, // 限制tooltip在图表区域内 + position: function (point, params, dom, rect, size) { + // 获取图表容器大小 + const chartWidth = size.viewSize[0]; + const chartHeight = size.viewSize[1]; + const tooltipWidth = size.contentSize[0]; + const tooltipHeight = size.contentSize[1]; + + // 检测是否为移动设备 + const isMobile = window.innerWidth <= 768; + + if (isMobile) { + // 移动端：固定在顶部中央 + return { + top: 10, + left: Math.max(10, (chartWidth - tooltipWidth) / 2) + }; + } else { + // 桌面端：智能定位 + let x = point[0]; + let y = point[1]; + + // 防止tooltip超出右边界 + if (x + tooltipWidth > chartWidth) { + x = chartWidth - tooltipWidth - 10; + } + + // 防止tooltip超出下边界 + if (y + tooltipHeight > chartHeight) { + y = chartHeight - tooltipHeight - 10; + } + + return [Math.max(10, x), Math.max(10, y)]; + } + }, axisPointer: { - type: 'line', + type: 'cross', lineStyle: { - color: '#fff', + color: 'grey', width: 1, - type: 'solid' + type: 'dashed' }, label: { backgroundColor: 'rgba(0, 0, 0, 0.8)', @@ -283,15 +318,23 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { backgroundColor: '#646E71', borderColor: '#fff', borderWidth: 1, - padding: 10, + padding: [8, 12], textStyle: { color: '#fff', - fontSize: 12 + fontSize: window.innerWidth <= 768 ? 10 : 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);', formatter: function (params) { if (!params || params.length === 0) return '' - - let result = `
${params[0].name}
` + + const isMobile = window.innerWidth <= 768; + const fontSize = isMobile ? '10px' : '12px'; + const lineHeight = isMobile ? '1.3' : '1.5'; + const marginBottom = isMobile ? '4px' : '6px'; + + let result = `
${params[0].name}
` params.forEach(param => { let value = param.value @@ -302,29 +345,40 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { let closePrice = value[2] // 收盘价 let lowPrice = value[3] // 最低价 let highPrice = value[4] // 最高价 - + // 检查数据有效性 - if (typeof openPrice !== 'number' || typeof closePrice !== 'number' || - typeof lowPrice !== 'number' || typeof highPrice !== 'number') { + if (typeof openPrice !== 'number' || typeof closePrice !== 'number' || + typeof lowPrice !== 'number' || typeof highPrice !== 'number') { return '' } - + let priceChange = closePrice - openPrice let changePercent = ((priceChange / openPrice) * 100).toFixed(2) let changeColor = priceChange >= 0 ? '#14b143' : '#ef232a' - - result += `
` - // result += `
${param.seriesName}
` - result += `
开盘: ${openPrice.toFixed(2)}
` - result += `
收盘: ${closePrice.toFixed(2)}
` - result += `
最低: ${lowPrice.toFixed(2)}
` - result += `
最高: ${highPrice.toFixed(2)}
` - result += `
涨跌: ${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)
` - result += `
` + + if (isMobile) { + // 移动端简化显示 + result += `
` + result += `
开盘价:${openPrice.toFixed(2)}
` + result += `
收盘价:${closePrice.toFixed(2)}
` + result += `
最低价:${lowPrice.toFixed(2)}
` + result += `
最高价:${highPrice.toFixed(2)}
` + result += `
涨跌:${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)
` + result += `
` + } else { + // 桌面端完整显示 + result += `
` + result += `
开盘价: ${openPrice.toFixed(2)}
` + result += `
收盘价: ${closePrice.toFixed(2)}
` + result += `
最低价: ${lowPrice.toFixed(2)}
` + result += `
最高价: ${highPrice.toFixed(2)}
` + result += `
涨跌: ${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)
` + result += `
` + } } else if (param.seriesName === '止盈线' && value !== null && value !== undefined && typeof value === 'number') { - result += `
${param.seriesName}: ${value.toFixed(2)}
` + result += `
${isMobile ? '止盈' : param.seriesName}: ${value.toFixed(2)}
` } else if (param.seriesName === '止损线' && value !== null && value !== undefined && typeof value === 'number') { - result += `
${param.seriesName}: ${value.toFixed(2)}
` + result += `
${isMobile ? '止损' : param.seriesName}: ${value.toFixed(2)}
` } }) @@ -369,37 +423,37 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { interval: 'auto' // 自动计算显示间隔，只显示部分日期但覆盖所有范围 }, axisLine: { - // show: false, - lineStyle: { - color: 'white', // x轴线颜色 - } - }, + // show: false, + lineStyle: { + color: 'white', // x轴线颜色 + } + }, }, yAxis: { scale: true, axisLine: { - // show: false, - lineStyle: { - color: 'white', // x轴线颜色 - width:3 - } - }, + // show: false, + lineStyle: { + color: 'white', // y轴线颜色 + width: 3 + } + }, splitLine: { show: false, }, axisLabel: { // 刻度标签 show: true, - color:'white', + color: 'white', }, axisTick: { // 刻度线 show: true, - color:'white', + color: 'white', }, min: qxnlzhqData.dd < stopLossPrice * 0.98 ? Math.floor(qxnlzhqData.dd) : Math.floor(stopLossPrice * 0.98), - max: Math.max(Math.ceil(dataMax * 1.02), (qxnlzhqData.yl > 0 ? qxnlzhqData.yl : Math.ceil(dataMax * 1.02)), stopProfitPrice * 1.02), + max: Math.round(Math.max(Math.ceil(dataMax * 1.02), (qxnlzhqData.yl > 0 ? qxnlzhqData.yl : Math.ceil(dataMax * 1.02)), stopProfitPrice * 1.02)), }, // 自定义区域名称和区域范围值 位置 graphic: generateGraphics(qxnlzhqData.dd < stopLossPrice * 0.98 @@ -571,18 +625,18 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { label: { normal: { show: true, - position: 'top', - formatter: `{text|${mixData[mixData.length - 1].value[2].toFixed(2)}}`, + position: 'bottom', + formatter: `{text| ${mixData[mixData.length - 1].value[2].toFixed(2)}}`, rich: { text: { color: '#001EFF', fontSize: 12, fontWeight: 'bold', textBorderColor: '#ffffff', - textBorderWidth: 2, + textBorderWidth: 2, } }, - offset: [0, 10] + offset: [0, -30] } } } @@ -611,18 +665,18 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { label: { normal: { show: true, - position: 'bottom', - formatter: `{text|${mixData[mixData.length - 1].value[3].toFixed(2)}}`, + position: 'top', + formatter: `{text| ${mixData[mixData.length - 1].value[3].toFixed(2)}}`, rich: { text: { color: '#FF0000', fontSize: 12, fontWeight: 'bold', textBorderColor: '#ffffff', - textBorderWidth: 2, + textBorderWidth: 2, } }, - offset: [0, -10] + offset: [0, 30] } } } @@ -631,19 +685,19 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { } ], grid: { - left: "10%", + left: "13%", right: "10", top: '10', bottom: "60", containLabel: false, - width: '85%', + width: '80%', height: 'auto', overflow: 'hidden' }, }; // 应用配置 qxnlzhqEchartsInstance.setOption(option); - + // 防抖函数，避免频繁触发resize const debounce = (func, wait) => { let timeout; @@ -656,7 +710,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { timeout = setTimeout(later, wait); }; }; - + // 监听窗口大小变化，调整图表尺寸 const resizeHandler = debounce(() => { if (qxnlzhqEchartsInstance && !qxnlzhqEchartsInstance.isDisposed()) { @@ -668,18 +722,18 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { } } }, 100); // 100ms防抖延迟 - + // 移除之前的监听器（如果存在） if (window.emoEnergyConverterResizeHandler) { window.removeEventListener('resize', window.emoEnergyConverterResizeHandler); } - + // 添加新的监听器 window.addEventListener('resize', resizeHandler); - + // 存储resize处理器以便后续清理 window.emoEnergyConverterResizeHandler = resizeHandler; - + // 添加容器大小监听器 if (qxnlzhqEchartsRef.value && window.ResizeObserver) { const containerObserver = new ResizeObserver(debounce(() => { @@ -692,7 +746,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { } } }, 100)); - + containerObserver.observe(qxnlzhqEchartsRef.value); window.emoEnergyConverterContainerObserver = containerObserver; } @@ -704,13 +758,13 @@ onBeforeUnmount(() => { qxnlzhqEchartsInstance.dispose(); qxnlzhqEchartsInstance = null; } - + // 移除窗口resize监听器 if (window.emoEnergyConverterResizeHandler) { window.removeEventListener('resize', window.emoEnergyConverterResizeHandler); window.emoEnergyConverterResizeHandler = null; } - + // 清理容器观察器 if (window.emoEnergyConverterContainerObserver) { window.emoEnergyConverterContainerObserver.disconnect(); @@ -732,8 +786,24 @@ onBeforeUnmount(() => { #qxnlzhqEcharts { width: 100%; height: 300px; - margin: 0; + /* margin: 0; */ } + /* 移动端tooltip优化 */ + :deep(.echarts-tooltip) { + max-width: 280px !important; + font-size: 10px !important; + line-height: 1.3 !important; + padding: 8px 10px !important; + word-wrap: break-word !important; + white-space: normal !important; + box-sizing: border-box !important; + } + + /* 确保tooltip不会超出屏幕 */ + :deep(.echarts-tooltip-content) { + max-width: 100% !important; + overflow: hidden !important; + } } \ No newline at end of file diff --git a/src/views/components/emotionDecod.vue b/src/views/components/emotionDecod.vue index caf49c1..cf94c09 100644 --- a/src/views/components/emotionDecod.vue +++ b/src/views/components/emotionDecod.vue @@ -82,7 +82,8 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { const close = params.data[2] const low = params.data[3] const high = params.data[4] - return `日期: ${date}
开: ${open}
收: ${close}
低: ${low}
高: ${high}` + return `日期: ${date}
开盘价: ${open}
收盘价: ${close}
最低价: ${low}
最高价: ${high}` + } }, diff --git a/src/views/components/emotionalBottomRadar.vue b/src/views/components/emotionalBottomRadar.vue index aadca65..e8da8f4 100644 --- a/src/views/components/emotionalBottomRadar.vue +++ b/src/views/components/emotionalBottomRadar.vue @@ -15,7 +15,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { bottomRadarChart.dispose() bottomRadarChart = null } - + let bottomRadarChartDom = document.getElementById('bottomRadarChart') bottomRadarChart = echarts.init(bottomRadarChartDom) @@ -30,7 +30,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { subArray[3], // 最低价 subArray[4] // 最高价 ]) - + // 计算K线数据的最小值，用于设置y轴起始值 let allKlineValues = [] kLineDataArray.forEach(item => { @@ -39,12 +39,12 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { allKlineValues.push(item[0], item[1], item[2], item[3]) } }) - + // 找到最小值和最大值 let validValues = allKlineValues.filter(val => typeof val === 'number' && !isNaN(val)) let minValue = Math.min(...validValues) let maxValue = Math.max(...validValues) - + // 最小值向下取整，最大值向上取整 let yAxisMin = Math.floor(minValue) let yAxisMax = Math.ceil(maxValue) @@ -153,7 +153,8 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { borderWidth: 1 } }, - backgroundColor: 'rgba(0, 0, 0, 0.8)', + // backgroundColor: 'rgba(0, 0, 0, 0.8)', + backgroundColor: '#646E71', borderColor: '#fff', borderWidth: 1, padding: 10, @@ -163,19 +164,19 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { }, formatter: function (params) { if (!params || params.length === 0) return '' - + // 检查是否有第二个或第三个网格的数据，如果有则不显示tooltip let hasSecondOrThirdGrid = params.some(param => { - return (param.seriesName === '红线' && param.axisIndex === 1) || - (param.axisIndex === 2) || - (param.seriesName !== 'K线' && param.seriesName !== '基础base') + return (param.seriesName === '红线' && param.axisIndex === 1) || + (param.axisIndex === 2) || + (param.seriesName !== 'K线' && param.seriesName !== '基础base') }) - + // 如果鼠标悬浮在第二个或第三个网格上，不显示tooltip if (hasSecondOrThirdGrid && !params.some(param => param.seriesType === 'candlestick')) { return '' } - + let result = `
${params[0].name}
` params.forEach(param => { @@ -185,33 +186,33 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { if (param.seriesType === 'candlestick') { // ECharts candlestick的value格式：[开盘, 收盘, 最低, 最高] let candlestickData = param.value - + // 确保数据有效性 if (!Array.isArray(candlestickData) || candlestickData.length < 4) { return '' } - + let openPrice = candlestickData[1] // 开盘价 let closePrice = candlestickData[2] // 收盘价 let lowPrice = candlestickData[3] // 最低价 let highPrice = candlestickData[4] // 最高价 - + // 确保所有价格都是有效数字 - if (typeof openPrice !== 'number' || typeof closePrice !== 'number' || - typeof lowPrice !== 'number' || typeof highPrice !== 'number') { + if (typeof openPrice !== 'number' || typeof closePrice !== 'number' || + typeof lowPrice !== 'number' || typeof highPrice !== 'number') { return '' } - + let priceChange = closePrice - openPrice let changePercent = ((priceChange / openPrice) * 100).toFixed(2) let changeColor = priceChange >= 0 ? '#14b143' : '#ef232a' // 互换颜色：上涨红色，下跌绿色 - + result += `
` result += `
${param.seriesName}
` - result += `
开盘: ${openPrice.toFixed(1)}
` - result += `
收盘: ${closePrice.toFixed(1)}
` - result += `
最低: ${lowPrice.toFixed(1)}
` - result += `
最高: ${highPrice.toFixed(1)}
` + result += `
开盘价: ${openPrice.toFixed(1)}
` + result += `
收盘价: ${closePrice.toFixed(1)}
` + result += `
最低价: ${lowPrice.toFixed(1)}
` + result += `
最高价: ${highPrice.toFixed(1)}
` result += `
涨跌: ${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)
` result += `
` } else if (param.seriesName === '红线') { @@ -634,12 +635,12 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { if (bottomRadarRef.value) { applyResponsiveStyles(bottomRadarRef.value); } - + // 创建响应式处理器 if (resizeHandler) { resizeHandler.cleanup(); } - + resizeHandler = createChartResizeHandler({ chart: bottomRadarChart, container: bottomRadarRef.value, @@ -647,7 +648,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { beforeResize: adjustGridHeight, name: '情绪探底雷达图表' }); - + // 立即触发一次resize以确保初始布局正确 setTimeout(() => { if (resizeHandler) { @@ -686,7 +687,7 @@ onBeforeUnmount(() => { resizeHandler.cleanup(); resizeHandler = null; } - + // 组件卸载时销毁图表 if (bottomRadarChart) { bottomRadarChart.dispose(); diff --git a/src/views/components/marketTemperature.vue b/src/views/components/marketTemperature.vue index b7aaee0..9ee6b77 100644 --- a/src/views/components/marketTemperature.vue +++ b/src/views/components/marketTemperature.vue @@ -387,6 +387,41 @@ function initChart(raw, klineDataRawValue, WDRLValue) { chartInstance.setOption({ tooltip: { trigger: "axis", + confine: true, // 限制tooltip在图表区域内 + position: function (point, params, dom, rect, size) { + // 获取图表容器大小 + const chartWidth = size.viewSize[0]; + const chartHeight = size.viewSize[1]; + const tooltipWidth = size.contentSize[0]; + const tooltipHeight = size.contentSize[1]; + + // 检测是否为移动设备 + const isMobile = window.innerWidth <= 768; + + if (isMobile) { + // 移动端：固定在顶部中央 + return { + top: 10, + left: Math.max(10, (chartWidth - tooltipWidth) / 2) + }; + } else { + // 桌面端：智能定位 + let x = point[0]; + let y = point[1]; + + // 防止tooltip超出右边界 + if (x + tooltipWidth > chartWidth) { + x = chartWidth - tooltipWidth - 10; + } + + // 防止tooltip超出下边界 + if (y + tooltipHeight > chartHeight) { + y = chartHeight - tooltipHeight - 10; + } + + return [Math.max(10, x), Math.max(10, y)]; + } + }, axisPointer: { type: "cross", crossStyle: { @@ -400,18 +435,54 @@ function initChart(raw, klineDataRawValue, WDRLValue) { type: "dashed", }, }, + backgroundColor: '#646E71', + borderColor: '#fff', + borderWidth: 1, + padding: [8, 12], + textStyle: { + color: '#fff', + fontSize: window.innerWidth <= 768 ? 10 : 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);', formatter: function (params) { if (params && params.length > 0) { - let result = `日期: ${params[0].name}
`; + const isMobile = window.innerWidth <= 768; + const fontSize = isMobile ? '10px' : '12px'; + const lineHeight = isMobile ? '1.3' : '1.5'; + const marginBottom = isMobile ? '4px' : '6px'; + + let result = `
日期: ${params[0].name}
`; + params.forEach((param) => { if (param.seriesType === "candlestick") { const open = param.data[1]; const close = param.data[2]; const low = param.data[3]; const high = param.data[4]; - result += `${param.seriesName}
开: ${open}
收: ${close}
低: ${low}
高: ${high}
`; + + if (isMobile) { + // 移动端简化显示 + result += `
`; + 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 += `
`; + } } else if (param.seriesType === "line") { - result += `${param.seriesName}: ${param.value}
`; + result += `
${param.seriesName}: ${param.value}
`; } }); return result; @@ -423,6 +494,13 @@ function initChart(raw, klineDataRawValue, WDRLValue) { data: ["K线", "市场温度", "股票温度"], textStyle: { color: "white", fontSize: 18 }, }, + grid: { + left: window.innerWidth <= 768 ? '40px' : '100px', // 移动端使用较小边距，桌面端为四位数预留足够空间 + right: window.innerWidth <= 768 ? '40px' : '100px', // 为右侧y轴预留空间 + top: window.innerWidth <= 768 ? '40px' : '60px', + bottom: window.innerWidth <= 768 ? '60px' : '80px', // 为dataZoom预留空间 + containLabel: false // 不自动包含标签，使用固定边距 + }, xAxis: { type: "category", data: dateLabels, @@ -455,8 +533,13 @@ function initChart(raw, klineDataRawValue, WDRLValue) { axisLine: { lineStyle: { color: "#00FF7F" } }, axisLabel: { color: "#FFFFFF", - fontSize: 12, + fontSize: window.innerWidth <= 768 ? 10 : 12, // 移动端使用更小字体 fontWeight: "bold", + formatter: function(value) { + // 确保四位数完整显示 + return value.toString(); + }, + margin: 8 // 增加标签与轴线的距离 }, axisTick: { lineStyle: { color: "#00FF7F" } }, splitLine: { @@ -487,8 +570,9 @@ function initChart(raw, klineDataRawValue, WDRLValue) { position: "right", axisLabel: { color: "#FFFF00", - fontSize: 12, + fontSize: window.innerWidth <= 768 ? 10 : 12, // 移动端使用更小字体 fontWeight: "bold", + margin: 8 // 增加标签与轴线的距离 }, axisLine: { lineStyle: { color: "#FF1493", width: 2 } }, axisTick: { lineStyle: { color: "#FF1493" } }, @@ -535,6 +619,7 @@ function initChart(raw, klineDataRawValue, WDRLValue) { type: "line", yAxisIndex: 1, data: marketData, + z: 3 }, { name: "股票温度", @@ -844,6 +929,23 @@ defineExpose({ initChart }); .calendarItemContent { font-size: 2.2vw !important; } + + /* 移动端tooltip优化 */ + :deep(.echarts-tooltip) { + max-width: 280px !important; + font-size: 10px !important; + line-height: 1.3 !important; + padding: 8px 10px !important; + word-wrap: break-word !important; + white-space: normal !important; + box-sizing: border-box !important; + } + + /* 确保tooltip不会超出屏幕 */ + :deep(.echarts-tooltip-content) { + max-width: 100% !important; + overflow: hidden !important; + } } .border1 {