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 += `
`
+ result += `
开盘价:${openPrice.toFixed(2)}
`
+ result += `
收盘价:${closePrice.toFixed(2)}
`
+ result += `
最低价:${lowPrice.toFixed(2)}
`
+ result += `
最高价:${highPrice.toFixed(2)}
`
+ result += `
涨跌:${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)
`
+ 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 += `
${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 += `
`;
+ 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 += `
`;
+ result += `
${param.seriesName}
`;
+ result += `
开盘价: ${open}
`;
+ result += `
收盘价: ${close}
`;
+ result += `
最低价: ${low}
`;
+ result += `
最高价: ${high}
`;
+ result += `
`;
+ 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 {