hongxilin
/
AIxiaocaishen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

情绪能量转化器优化了最后一根K线的显示，新增十字线；情绪探底雷达高度降低；情绪解码器tooltip显示优化；股市温度计y刻度显示遮挡优化；隐藏console；

dev
宋杰 6 days ago
parent
cf1d8565da
commit
7f9e4af1d5
6 changed files with 269 additions and 94 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      build/vite/build.js
  2. 5
      src/views/AiEmotion.vue
  3. 188
      src/views/components/emoEnergyConverter.vue
  4. 3
      src/views/components/emotionDecod.vue
  5. 53
      src/views/components/emotionalBottomRadar.vue
  6. 112
      src/views/components/marketTemperature.vue

2
build/vite/build.js
View File

@ -36,7 +36,7 @@ export function createBuild(viteEnv) {
// 压缩配置 // 压缩配置
terserOptions: { terserOptions: {
compress: { compress: {
drop_console: false, // 生产环境移除console
drop_console: true, // 生产环境移除console
drop_debugger: true // 生产环境移除debugger drop_debugger: true // 生产环境移除debugger
} }
} }

5
src/views/AiEmotion.vue
View File

@ -3014,6 +3014,7 @@ defineExpose({
margin: 0 0 15px 0; margin: 0 0 15px 0;
text-align: center; text-align: center;
letter-spacing: 2px; letter-spacing: 2px;
margin-top: 10px;
} }
.conclusion-item .conclusion-title::after { .conclusion-item .conclusion-title::after {
@ -3070,7 +3071,7 @@ defineExpose({
.disclaimer-item { .disclaimer-item {
/* margin-top: 30px; */ /* margin-top: 30px; */
padding: 20px;
padding-bottom: 15%;
border-top: 1px solid rgba(153, 153, 153, 0.2); border-top: 1px solid rgba(153, 153, 153, 0.2);
text-align: center; text-align: center;
} }
@ -3236,7 +3237,7 @@ defineExpose({
} }
.class06 { .class06 {
min-height: 25rem;
min-height: 32rem;
} }
.class08 { .class08 {

188
src/views/components/emoEnergyConverter.vue
View File

@ -12,7 +12,7 @@ let qxnlzhqEchartsRef = ref(null);
let qxnlzhqEchartsInstance = null; let qxnlzhqEchartsInstance = null;
let regions = reactive([]); let regions = reactive([]);
const dataMax=ref(null)
const dataMax = ref(null)
// 设置区域名称 位置 // 设置区域名称 位置
function getNameTop(min, max, regionMiidle) { function getNameTop(min, max, regionMiidle) {
// 获取整个图表的高度 // 获取整个图表的高度
@ -32,9 +32,9 @@ function getNumberTop(min, max, regionMax) {
const generateGraphics = (min, max) => { const generateGraphics = (min, max) => {
let hasPartialVisible = false; // 标记是否已经遇到第一个部分可见的区域 let hasPartialVisible = false; // 标记是否已经遇到第一个部分可见的区域
return regions.flatMap((region) => { 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 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; const isFullyVisible = region.min >= min && region.max <= max;
// 检查区域是否部分可见 // 检查区域是否部分可见
@ -266,12 +266,47 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
tooltip: { tooltip: {
show: true, show: true,
trigger: 'axis', 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: { axisPointer: {
type: 'line',
type: 'cross',
lineStyle: { lineStyle: {
color: '#fff',
color: 'grey',
width: 1, width: 1,
type: 'solid'
type: 'dashed'
}, },
label: { label: {
backgroundColor: 'rgba(0, 0, 0, 0.8)', backgroundColor: 'rgba(0, 0, 0, 0.8)',
@ -283,15 +318,23 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
backgroundColor: '#646E71', backgroundColor: '#646E71',
borderColor: '#fff', borderColor: '#fff',
borderWidth: 1, borderWidth: 1,
padding: 10,
padding: [8, 12],
textStyle: { textStyle: {
color: '#fff', 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) { formatter: function (params) {
if (!params || params.length === 0) return '' if (!params || params.length === 0) return ''
let result = `<div style="font-weight: bold; color: #fff; margin-bottom: 8px;">${params[0].name}</div>`
const isMobile = window.innerWidth <= 768;
const fontSize = isMobile ? '10px' : '12px';
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>`
params.forEach(param => { params.forEach(param => {
let value = param.value let value = param.value
@ -302,29 +345,40 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
let closePrice = value[2] // 收盘价 let closePrice = value[2] // 收盘价
let lowPrice = value[3] // 最低价 let lowPrice = value[3] // 最低价
let highPrice = value[4] // 最高价 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 '' return ''
} }
let priceChange = closePrice - openPrice let priceChange = closePrice - openPrice
let changePercent = ((priceChange / openPrice) * 100).toFixed(2) let changePercent = ((priceChange / openPrice) * 100).toFixed(2)
let changeColor = priceChange >= 0 ? '#14b143' : '#ef232a' let changeColor = priceChange >= 0 ? '#14b143' : '#ef232a'
result += `<div style="margin-bottom: 6px;">`
// result += `<div style="color: #fff; font-weight: bold;">${param.seriesName}</div>`
result += `<div style="color: #fff;">开盘: ${openPrice.toFixed(2)}</div>`
result += `<div style="color: #fff;">收盘: ${closePrice.toFixed(2)}</div>`
result += `<div style="color: #fff;">最低: ${lowPrice.toFixed(2)}</div>`
result += `<div style="color: #fff;">最高: ${highPrice.toFixed(2)}</div>`
result += `<div style="color: ${changeColor};">涨跌: ${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)</div>`
result += `</div>`
if (isMobile) {
// 移动端简化显示
result += `<div style="margin-bottom: ${marginBottom}; font-size: ${fontSize}; line-height: ${lineHeight};">`
result += `<div style="color: #fff; display: flex; justify-content: space-between;"><span>开盘价:</span><span>${openPrice.toFixed(2)}</span></div>`
result += `<div style="color: #fff; display: flex; justify-content: space-between;"><span>收盘价:</span><span>${closePrice.toFixed(2)}</span></div>`
result += `<div style="color: #fff; display: flex; justify-content: space-between;"><span>最低价:</span><span>${lowPrice.toFixed(2)}</span></div>`
result += `<div style="color: #fff; display: flex; justify-content: space-between;"><span>最高价:</span><span>${highPrice.toFixed(2)}</span></div>`
result += `<div style="color: ${changeColor}; display: flex; justify-content: space-between;"><span>涨跌:</span><span>${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)</span></div>`
result += `</div>`
} else {
// 桌面端完整显示
result += `<div style="margin-bottom: ${marginBottom}; font-size: ${fontSize}; line-height: ${lineHeight};">`
result += `<div style="color: #fff;">开盘价: ${openPrice.toFixed(2)}</div>`
result += `<div style="color: #fff;">收盘价: ${closePrice.toFixed(2)}</div>`
result += `<div style="color: #fff;">最低价: ${lowPrice.toFixed(2)}</div>`
result += `<div style="color: #fff;">最高价: ${highPrice.toFixed(2)}</div>`
result += `<div style="color: ${changeColor};">涨跌: ${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)</div>`
result += `</div>`
}
} else if (param.seriesName === '止盈线' && value !== null && value !== undefined && typeof value === 'number') { } else if (param.seriesName === '止盈线' && value !== null && value !== undefined && typeof value === 'number') {
result += `<div style="color: #FF0000; margin-bottom: 4px;">${param.seriesName}: ${value.toFixed(2)}</div>`
result += `<div style="color: #FF0000; margin-bottom: 2px; font-size: ${fontSize}; line-height: ${lineHeight};">${isMobile ? '止盈' : param.seriesName}: ${value.toFixed(2)}</div>`
} else if (param.seriesName === '止损线' && value !== null && value !== undefined && typeof value === 'number') { } else if (param.seriesName === '止损线' && value !== null && value !== undefined && typeof value === 'number') {
result += `<div style="color: #001EFF; margin-bottom: 4px;">${param.seriesName}: ${value.toFixed(2)}</div>`
result += `<div style="color: #001EFF; margin-bottom: 2px; font-size: ${fontSize}; line-height: ${lineHeight};">${isMobile ? '止损' : param.seriesName}: ${value.toFixed(2)}</div>`
} }
}) })
@ -369,37 +423,37 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
interval: 'auto' // 自动计算显示间隔，只显示部分日期但覆盖所有范围 interval: 'auto' // 自动计算显示间隔，只显示部分日期但覆盖所有范围
}, },
axisLine: { axisLine: {
// show: false,
lineStyle: {
color: 'white', // x轴线颜色
}
},
// show: false,
lineStyle: {
color: 'white', // x轴线颜色
}
},
}, },
yAxis: { yAxis: {
scale: true, scale: true,
axisLine: { axisLine: {
// show: false,
lineStyle: {
color: 'white', // x轴线颜色
width:3
}
},
// show: false,
lineStyle: {
color: 'white', // y轴线颜色
width: 3
}
},
splitLine: { splitLine: {
show: false, show: false,
}, },
axisLabel: { // 刻度标签 axisLabel: { // 刻度标签
show: true, show: true,
color:'white',
color: 'white',
}, },
axisTick: { // 刻度线 axisTick: { // 刻度线
show: true, show: true,
color:'white',
color: 'white',
}, },
min: min:
qxnlzhqData.dd < stopLossPrice * 0.98 qxnlzhqData.dd < stopLossPrice * 0.98
? Math.floor(qxnlzhqData.dd) ? Math.floor(qxnlzhqData.dd)
: Math.floor(stopLossPrice * 0.98), : 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 graphic: generateGraphics(qxnlzhqData.dd < stopLossPrice * 0.98
@ -571,18 +625,18 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
label: { label: {
normal: { normal: {
show: true, 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: { rich: {
text: { text: {
color: '#001EFF', color: '#001EFF',
fontSize: 12, fontSize: 12,
fontWeight: 'bold', fontWeight: 'bold',
textBorderColor: '#ffffff', textBorderColor: '#ffffff',
textBorderWidth: 2,
textBorderWidth: 2,
} }
}, },
offset: [0, 10]
offset: [0, -30]
} }
} }
} }
@ -611,18 +665,18 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
label: { label: {
normal: { normal: {
show: true, 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: { rich: {
text: { text: {
color: '#FF0000', color: '#FF0000',
fontSize: 12, fontSize: 12,
fontWeight: 'bold', fontWeight: 'bold',
textBorderColor: '#ffffff', textBorderColor: '#ffffff',
textBorderWidth: 2,
textBorderWidth: 2,
} }
}, },
offset: [0, -10]
offset: [0, 30]
} }
} }
} }
@ -631,19 +685,19 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
} }
], ],
grid: { grid: {
left: "10%",
left: "13%",
right: "10", right: "10",
top: '10', top: '10',
bottom: "60", bottom: "60",
containLabel: false, containLabel: false,
width: '85%',
width: '80%',
height: 'auto', height: 'auto',
overflow: 'hidden' overflow: 'hidden'
}, },
}; };
// 应用配置 // 应用配置
qxnlzhqEchartsInstance.setOption(option); qxnlzhqEchartsInstance.setOption(option);
// 防抖函数，避免频繁触发resize // 防抖函数，避免频繁触发resize
const debounce = (func, wait) => { const debounce = (func, wait) => {
let timeout; let timeout;
@ -656,7 +710,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
timeout = setTimeout(later, wait); timeout = setTimeout(later, wait);
}; };
}; };
// 监听窗口大小变化，调整图表尺寸 // 监听窗口大小变化，调整图表尺寸
const resizeHandler = debounce(() => { const resizeHandler = debounce(() => {
if (qxnlzhqEchartsInstance && !qxnlzhqEchartsInstance.isDisposed()) { if (qxnlzhqEchartsInstance && !qxnlzhqEchartsInstance.isDisposed()) {
@ -668,18 +722,18 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
} }
} }
}, 100); // 100ms防抖延迟 }, 100); // 100ms防抖延迟
// 移除之前的监听器（如果存在） // 移除之前的监听器（如果存在）
if (window.emoEnergyConverterResizeHandler) { if (window.emoEnergyConverterResizeHandler) {
window.removeEventListener('resize', window.emoEnergyConverterResizeHandler); window.removeEventListener('resize', window.emoEnergyConverterResizeHandler);
} }
// 添加新的监听器 // 添加新的监听器
window.addEventListener('resize', resizeHandler); window.addEventListener('resize', resizeHandler);
// 存储resize处理器以便后续清理 // 存储resize处理器以便后续清理
window.emoEnergyConverterResizeHandler = resizeHandler; window.emoEnergyConverterResizeHandler = resizeHandler;
// 添加容器大小监听器 // 添加容器大小监听器
if (qxnlzhqEchartsRef.value && window.ResizeObserver) { if (qxnlzhqEchartsRef.value && window.ResizeObserver) {
const containerObserver = new ResizeObserver(debounce(() => { const containerObserver = new ResizeObserver(debounce(() => {
@ -692,7 +746,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
} }
} }
}, 100)); }, 100));
containerObserver.observe(qxnlzhqEchartsRef.value); containerObserver.observe(qxnlzhqEchartsRef.value);
window.emoEnergyConverterContainerObserver = containerObserver; window.emoEnergyConverterContainerObserver = containerObserver;
} }
@ -704,13 +758,13 @@ onBeforeUnmount(() => {
qxnlzhqEchartsInstance.dispose(); qxnlzhqEchartsInstance.dispose();
qxnlzhqEchartsInstance = null; qxnlzhqEchartsInstance = null;
} }
// 移除窗口resize监听器 // 移除窗口resize监听器
if (window.emoEnergyConverterResizeHandler) { if (window.emoEnergyConverterResizeHandler) {
window.removeEventListener('resize', window.emoEnergyConverterResizeHandler); window.removeEventListener('resize', window.emoEnergyConverterResizeHandler);
window.emoEnergyConverterResizeHandler = null; window.emoEnergyConverterResizeHandler = null;
} }
// 清理容器观察器 // 清理容器观察器
if (window.emoEnergyConverterContainerObserver) { if (window.emoEnergyConverterContainerObserver) {
window.emoEnergyConverterContainerObserver.disconnect(); window.emoEnergyConverterContainerObserver.disconnect();
@ -732,8 +786,24 @@ onBeforeUnmount(() => {
#qxnlzhqEcharts { #qxnlzhqEcharts {
width: 100%; width: 100%;
height: 300px; 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;
}
} }
</style> </style>

3
src/views/components/emotionDecod.vue
View File

@ -82,7 +82,8 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
const close = params.data[2] const close = params.data[2]
const low = params.data[3] const low = params.data[3]
const high = params.data[4] const high = params.data[4]
return `日期: ${date}<br/>开: ${open}<br/>收: ${close}<br/>低: ${low}<br/>高: ${high}`
return `日期: ${date}<br/>开盘价: ${open}<br/>收盘价: ${close}<br/>最低价: ${low}<br/>最高价: ${high}`
} }
}, },

53
src/views/components/emotionalBottomRadar.vue
View File

@ -15,7 +15,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
bottomRadarChart.dispose() bottomRadarChart.dispose()
bottomRadarChart = null bottomRadarChart = null
} }
let bottomRadarChartDom = document.getElementById('bottomRadarChart') let bottomRadarChartDom = document.getElementById('bottomRadarChart')
bottomRadarChart = echarts.init(bottomRadarChartDom) bottomRadarChart = echarts.init(bottomRadarChartDom)
@ -30,7 +30,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
subArray[3], // 最低价 subArray[3], // 最低价
subArray[4] // 最高价 subArray[4] // 最高价
]) ])
// 计算K线数据的最小值，用于设置y轴起始值 // 计算K线数据的最小值，用于设置y轴起始值
let allKlineValues = [] let allKlineValues = []
kLineDataArray.forEach(item => { kLineDataArray.forEach(item => {
@ -39,12 +39,12 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
allKlineValues.push(item[0], item[1], item[2], item[3]) allKlineValues.push(item[0], item[1], item[2], item[3])
} }
}) })
// 找到最小值和最大值 // 找到最小值和最大值
let validValues = allKlineValues.filter(val => typeof val === 'number' && !isNaN(val)) let validValues = allKlineValues.filter(val => typeof val === 'number' && !isNaN(val))
let minValue = Math.min(...validValues) let minValue = Math.min(...validValues)
let maxValue = Math.max(...validValues) let maxValue = Math.max(...validValues)
// 最小值向下取整，最大值向上取整 // 最小值向下取整，最大值向上取整
let yAxisMin = Math.floor(minValue) let yAxisMin = Math.floor(minValue)
let yAxisMax = Math.ceil(maxValue) let yAxisMax = Math.ceil(maxValue)
@ -153,7 +153,8 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
borderWidth: 1 borderWidth: 1
} }
}, },
backgroundColor: 'rgba(0, 0, 0, 0.8)',
// backgroundColor: 'rgba(0, 0, 0, 0.8)',
backgroundColor: '#646E71',
borderColor: '#fff', borderColor: '#fff',
borderWidth: 1, borderWidth: 1,
padding: 10, padding: 10,
@ -163,19 +164,19 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
}, },
formatter: function (params) { formatter: function (params) {
if (!params || params.length === 0) return '' if (!params || params.length === 0) return ''
// 检查是否有第二个或第三个网格的数据，如果有则不显示tooltip // 检查是否有第二个或第三个网格的数据，如果有则不显示tooltip
let hasSecondOrThirdGrid = params.some(param => { 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 // 如果鼠标悬浮在第二个或第三个网格上，不显示tooltip
if (hasSecondOrThirdGrid && !params.some(param => param.seriesType === 'candlestick')) { if (hasSecondOrThirdGrid && !params.some(param => param.seriesType === 'candlestick')) {
return '' return ''
} }
let result = `<div style="font-weight: bold; color: #fff; margin-bottom: 8px;">${params[0].name}</div>` let result = `<div style="font-weight: bold; color: #fff; margin-bottom: 8px;">${params[0].name}</div>`
params.forEach(param => { params.forEach(param => {
@ -185,33 +186,33 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
if (param.seriesType === 'candlestick') { if (param.seriesType === 'candlestick') {
// ECharts candlestick的value格式：[开盘, 收盘, 最低, 最高] // ECharts candlestick的value格式：[开盘, 收盘, 最低, 最高]
let candlestickData = param.value let candlestickData = param.value
// 确保数据有效性 // 确保数据有效性
if (!Array.isArray(candlestickData) || candlestickData.length < 4) { if (!Array.isArray(candlestickData) || candlestickData.length < 4) {
return '' return ''
} }
let openPrice = candlestickData[1] // 开盘价 let openPrice = candlestickData[1] // 开盘价
let closePrice = candlestickData[2] // 收盘价 let closePrice = candlestickData[2] // 收盘价
let lowPrice = candlestickData[3] // 最低价 let lowPrice = candlestickData[3] // 最低价
let highPrice = candlestickData[4] // 最高价 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 '' return ''
} }
let priceChange = closePrice - openPrice let priceChange = closePrice - openPrice
let changePercent = ((priceChange / openPrice) * 100).toFixed(2) let changePercent = ((priceChange / openPrice) * 100).toFixed(2)
let changeColor = priceChange >= 0 ? '#14b143' : '#ef232a' // 互换颜色：上涨红色，下跌绿色 let changeColor = priceChange >= 0 ? '#14b143' : '#ef232a' // 互换颜色：上涨红色，下跌绿色
result += `<div style="margin-bottom: 6px;">` result += `<div style="margin-bottom: 6px;">`
result += `<div style="color: #fff; font-weight: bold;">${param.seriesName}</div>` result += `<div style="color: #fff; font-weight: bold;">${param.seriesName}</div>`
result += `<div style="color: #fff;">开盘: ${openPrice.toFixed(1)}</div>`
result += `<div style="color: #fff;">收盘: ${closePrice.toFixed(1)}</div>`
result += `<div style="color: #fff;">最低: ${lowPrice.toFixed(1)}</div>`
result += `<div style="color: #fff;">最高: ${highPrice.toFixed(1)}</div>`
result += `<div style="color: #fff;">开盘价: ${openPrice.toFixed(1)}</div>`
result += `<div style="color: #fff;">收盘价: ${closePrice.toFixed(1)}</div>`
result += `<div style="color: #fff;">最低价: ${lowPrice.toFixed(1)}</div>`
result += `<div style="color: #fff;">最高价: ${highPrice.toFixed(1)}</div>`
result += `<div style="color: ${changeColor};">涨跌: ${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)</div>` result += `<div style="color: ${changeColor};">涨跌: ${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)</div>`
result += `</div>` result += `</div>`
} else if (param.seriesName === '红线') { } else if (param.seriesName === '红线') {
@ -634,12 +635,12 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
if (bottomRadarRef.value) { if (bottomRadarRef.value) {
applyResponsiveStyles(bottomRadarRef.value); applyResponsiveStyles(bottomRadarRef.value);
} }
// 创建响应式处理器 // 创建响应式处理器
if (resizeHandler) { if (resizeHandler) {
resizeHandler.cleanup(); resizeHandler.cleanup();
} }
resizeHandler = createChartResizeHandler({ resizeHandler = createChartResizeHandler({
chart: bottomRadarChart, chart: bottomRadarChart,
container: bottomRadarRef.value, container: bottomRadarRef.value,
@ -647,7 +648,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
beforeResize: adjustGridHeight, beforeResize: adjustGridHeight,
name: '情绪探底雷达图表' name: '情绪探底雷达图表'
}); });
// 立即触发一次resize以确保初始布局正确 // 立即触发一次resize以确保初始布局正确
setTimeout(() => { setTimeout(() => {
if (resizeHandler) { if (resizeHandler) {
@ -686,7 +687,7 @@ onBeforeUnmount(() => {
resizeHandler.cleanup(); resizeHandler.cleanup();
resizeHandler = null; resizeHandler = null;
} }
// 组件卸载时销毁图表 // 组件卸载时销毁图表
if (bottomRadarChart) { if (bottomRadarChart) {
bottomRadarChart.dispose(); bottomRadarChart.dispose();

112
src/views/components/marketTemperature.vue
View File

@ -387,6 +387,41 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
chartInstance.setOption({ chartInstance.setOption({
tooltip: { tooltip: {
trigger: "axis", 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: { axisPointer: {
type: "cross", type: "cross",
crossStyle: { crossStyle: {
@ -400,18 +435,54 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
type: "dashed", 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) { formatter: function (params) {
if (params && params.length > 0) { if (params && params.length > 0) {
let result = `日期: ${params[0].name}<br/>`;
const isMobile = window.innerWidth <= 768;
const fontSize = isMobile ? '10px' : '12px';
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>`;
params.forEach((param) => { params.forEach((param) => {
if (param.seriesType === "candlestick") { if (param.seriesType === "candlestick") {
const open = param.data[1]; const open = param.data[1];
const close = param.data[2]; const close = param.data[2];
const low = param.data[3]; const low = param.data[3];
const high = param.data[4]; const high = param.data[4];
result += `${param.seriesName}<br/>开: ${open}<br/>收: ${close}<br/>低: ${low}<br/>高: ${high}<br/>`;
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>`;
} 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>`;
}
} else if (param.seriesType === "line") { } else if (param.seriesType === "line") {
result += `${param.seriesName}: ${param.value}<br/>`;
result += `<div style="color: #fff; margin-bottom: 2px; font-size: ${fontSize}; line-height: ${lineHeight};">${param.seriesName}: ${param.value}</div>`;
} }
}); });
return result; return result;
@ -423,6 +494,13 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
data: ["K线", "市场温度", "股票温度"], data: ["K线", "市场温度", "股票温度"],
textStyle: { color: "white", fontSize: 18 }, 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: { xAxis: {
type: "category", type: "category",
data: dateLabels, data: dateLabels,
@ -455,8 +533,13 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
axisLine: { lineStyle: { color: "#00FF7F" } }, axisLine: { lineStyle: { color: "#00FF7F" } },
axisLabel: { axisLabel: {
color: "#FFFFFF", color: "#FFFFFF",
fontSize: 12,
fontSize: window.innerWidth <= 768 ? 10 : 12, // 移动端使用更小字体
fontWeight: "bold", fontWeight: "bold",
formatter: function(value) {
// 确保四位数完整显示
return value.toString();
},
margin: 8 // 增加标签与轴线的距离
}, },
axisTick: { lineStyle: { color: "#00FF7F" } }, axisTick: { lineStyle: { color: "#00FF7F" } },
splitLine: { splitLine: {
@ -487,8 +570,9 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
position: "right", position: "right",
axisLabel: { axisLabel: {
color: "#FFFF00", color: "#FFFF00",
fontSize: 12,
fontSize: window.innerWidth <= 768 ? 10 : 12, // 移动端使用更小字体
fontWeight: "bold", fontWeight: "bold",
margin: 8 // 增加标签与轴线的距离
}, },
axisLine: { lineStyle: { color: "#FF1493", width: 2 } }, axisLine: { lineStyle: { color: "#FF1493", width: 2 } },
axisTick: { lineStyle: { color: "#FF1493" } }, axisTick: { lineStyle: { color: "#FF1493" } },
@ -535,6 +619,7 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
type: "line", type: "line",
yAxisIndex: 1, yAxisIndex: 1,
data: marketData, data: marketData,
z: 3
}, },
{ {
name: "股票温度", name: "股票温度",
@ -844,6 +929,23 @@ defineExpose({ initChart });
.calendarItemContent { .calendarItemContent {
font-size: 2.2vw !important; 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 { .border1 {

Write Preview
Loading…
Cancel
Save