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

股市温度计tooltip。

master
宋杰 3 weeks ago
parent
b4463582b0
commit
7c807ac1a1
1 changed files with 47 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 84
      src/views/components/marketTemperature.vue

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

@ -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 = `<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;
@ -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;
}

Write Preview
Loading…
Cancel
Save