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;
}