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

小财神两侧样式统一；修改情绪探底雷达等图表样式；新工作流；

wangyi/feature-20250804103736-新需求
宋杰 2 weeks ago
parent
934a0c554f
commit
23d2f63dab
6 changed files with 629 additions and 617 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. 4
      src/api/AiEmotionApi.js
  2. 692
      src/views/AiEmotion.vue
  3. 404
      src/views/components/emoEnergyConverter.vue
  4. 18
      src/views/components/emotionDecod.vue
  5. 70
      src/views/components/emotionalBottomRadar.vue
  6. 44
      src/views/components/marketTemperature.vue

4
src/api/AiEmotionApi.js
View File

@ -15,7 +15,7 @@ export const getReplyAPI = function (params) {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
Authorization: Authorization:
"Bearer pat_cOhJRgrEpjXwJJLW1N3YNjCxy19HYTpMFY6XlNCLi4ogm5tdfV266gWIB7MeaRIU",
"Bearer pat_D6vYu7FNXfkSJn8GpmA9oC4DY8LkcbhzrSZuJwuTHT0aYn2uqZ6P5cBfRD0kwZYR",
}, },
}); });
}; };
@ -31,7 +31,7 @@ export const getConclusionAPI = function (params) {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
Authorization: Authorization:
"Bearer pat_cOhJRgrEpjXwJJLW1N3YNjCxy19HYTpMFY6XlNCLi4ogm5tdfV266gWIB7MeaRIU",
"Bearer pat_D6vYu7FNXfkSJn8GpmA9oC4DY8LkcbhzrSZuJwuTHT0aYn2uqZ6P5cBfRD0kwZYR",
}, },
}); });
}; };

692
src/views/AiEmotion.vue
File diff suppressed because it is too large
View File

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

@ -109,40 +109,50 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
min: qxnlzhqData.dd, min: qxnlzhqData.dd,
max: qxnlzhqData.zc, max: qxnlzhqData.zc,
name: "【情绪冰点区】", name: "【情绪冰点区】",
color: "#FF9F9F",
fontColor: '#2D2D89',
color: "#F5D6FF",
fontColor: '#A7691C',
NumberColor: 'white', NumberColor: 'white',
}, },
{ {
min: qxnlzhqData.zc, min: qxnlzhqData.zc,
max: qxnlzhqData.ht, max: qxnlzhqData.ht,
name: "【认知潜伏区】", name: "【认知潜伏区】",
color: "#FFCB75",
fontColor: '#2D2D89',
color: "#FFF6C4",
fontColor: '#A7691C',
NumberColor: 'white', NumberColor: 'white',
}, },
{ {
min: qxnlzhqData.ht, min: qxnlzhqData.ht,
max: qxnlzhqData.qs, max: qxnlzhqData.qs,
name: "【多空消化区】", name: "【多空消化区】",
color: "#D7E95D",
fontColor: '#2D2D89',
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{ offset: 0, color: '#D7FF9B' },
{ offset: 1, color: '#CEFF85' }
]
},
fontColor: '#A7691C',
NumberColor: 'white', NumberColor: 'white',
}, },
{ {
min: qxnlzhqData.qs, min: qxnlzhqData.qs,
max: qxnlzhqData.tp, max: qxnlzhqData.tp,
name: "【共识加速区】", name: "【共识加速区】",
color: "#A0F56F",
fontColor: '#2D2D89',
color: "#FFDC8F",
fontColor: '#A7691C',
NumberColor: 'white', NumberColor: 'white',
}, },
{ {
min: qxnlzhqData.tp, min: qxnlzhqData.tp,
max: qxnlzhqData.js, max: qxnlzhqData.js,
name: "【情绪临界区】", name: "【情绪临界区】",
color: "#87F3CD",
fontColor: '#2D2D89',
color: "#FFC0AA",
fontColor: 'white',
NumberColor: 'white', NumberColor: 'white',
}, },
]; ];
@ -176,9 +186,43 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
const priceValues = kline.flatMap(item => [item[1], item[2], item[3], item[4]]); const priceValues = kline.flatMap(item => [item[1], item[2], item[3], item[4]]);
const dataMin = Math.min(...priceValues); const dataMin = Math.min(...priceValues);
const dataMax = Math.max(...priceValues); const dataMax = Math.max(...priceValues);
// 找到最高价的最大值及其对应的索引
let maxHighPrice = -Infinity;
let maxHighPriceIndex = -1;
kline.forEach((item, index) => {
const highPrice = item[4]; // 最高价在数组的第5个位置（索引4）
if (highPrice > maxHighPrice) {
maxHighPrice = highPrice;
maxHighPriceIndex = index;
}
});
// 计算止盈止损价格 // 计算止盈止损价格
const stopProfitPrice = Number(qxnlzhqData.cc) * 1.05; // 止盈价 const stopProfitPrice = Number(qxnlzhqData.cc) * 1.05; // 止盈价
const stopLossPrice = Number(qxnlzhqData.cc) * 0.97; // 止损价 const stopLossPrice = Number(qxnlzhqData.cc) * 0.97; // 止损价
// 计算最后一根K线的收盘价
const lastClosePrice = mixData[mixData.length - 1].value[2];
// 动态调整标记位置以避免与止盈止损线重叠
const priceBuffer = (dataMax - dataMin) * 0.02; // 2%的缓冲区间
// 最高价标记位置调整
let maxPricePosition = 'top';
let maxPriceOffset = [0, -5];
if (Math.abs(maxHighPrice - stopProfitPrice) < priceBuffer) {
maxPriceOffset = [0, -25]; // 增加偏移避免重叠
}
// 收盘价标记位置调整
let closePricePosition = 'bottom';
let closePriceOffset = [0, 15];
if (Math.abs(lastClosePrice - stopLossPrice) < priceBuffer) {
closePriceOffset = [0, 25]; // 增加偏移避免重叠
}
if (Math.abs(lastClosePrice - stopProfitPrice) < priceBuffer) {
closePriceOffset = [0, 25]; // 增加偏移避免重叠
}
// 确定起始和结束位置 // 确定起始和结束位置
const startIndex = Math.max(0, mixData.length - 17); const startIndex = Math.max(0, mixData.length - 17);
// 创建完整数据数组 // 创建完整数据数组
@ -316,12 +360,12 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
borderWidth: 1 borderWidth: 1
} }
}, },
backgroundColor: '#646E71',
backgroundColor: '#E8E8F2',
borderColor: '#fff', borderColor: '#fff',
borderWidth: 1, borderWidth: 1,
padding: [8, 12], padding: [8, 12],
textStyle: { textStyle: {
color: '#fff',
color: '#000',
fontSize: window.innerWidth <= 768 ? 10 : 12 // 移动端使用更小字体 fontSize: window.innerWidth <= 768 ? 10 : 12 // 移动端使用更小字体
}, },
extraCssText: window.innerWidth <= 768 ? extraCssText: window.innerWidth <= 768 ?
@ -335,7 +379,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
const lineHeight = isMobile ? '1.3' : '1.5'; const lineHeight = isMobile ? '1.3' : '1.5';
const marginBottom = isMobile ? '4px' : '6px'; 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: #000; 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
@ -353,33 +397,48 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
return '' return ''
} }
let priceChange = closePrice - openPrice
let changePercent = ((priceChange / openPrice) * 100).toFixed(2)
let changeColor = priceChange >= 0 ? '#14b143' : '#ef232a'
// 获取前一日收盘价用于计算涨跌幅
let previousClosePrice = null;
const currentIndex = param.dataIndex;
if (currentIndex > 0 && mixData[currentIndex - 1]) {
previousClosePrice = mixData[currentIndex - 1].value[2]; // 前一日收盘价
}
let priceChange, changePercent;
if (previousClosePrice !== null && typeof previousClosePrice === 'number') {
// 使用前一日收盘价计算涨跌幅
priceChange = closePrice - previousClosePrice;
changePercent = ((priceChange / previousClosePrice) * 100).toFixed(2);
} else {
// 如果没有前一日数据，使用开盘价计算（兜底方案）
priceChange = closePrice - openPrice;
changePercent = ((priceChange / openPrice) * 100).toFixed(2);
}
let changeColor = priceChange >= 0 ? '#32B520' : '#D8001B'
if (isMobile) { if (isMobile) {
// 移动端简化显示 // 移动端简化显示
result += `<div style="margin-bottom: ${marginBottom}; font-size: ${fontSize}; line-height: ${lineHeight};">` 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: #000; display: flex; justify-content: space-between;"><span>开盘价:</span><span>${openPrice.toFixed(2)}</span></div>`
result += `<div style="color: #000; display: flex; justify-content: space-between;"><span>收盘价:</span><span>${closePrice.toFixed(2)}</span></div>`
result += `<div style="color: #000; display: flex; justify-content: space-between;"><span>最低价:</span><span>${lowPrice.toFixed(2)}</span></div>`
result += `<div style="color: #000; 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 style="color: ${changeColor}; display: flex; justify-content: space-between;"><span>涨跌:</span><span>${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)</span></div>`
result += `</div>` result += `</div>`
} else { } else {
// 桌面端完整显示 // 桌面端完整显示
result += `<div style="margin-bottom: ${marginBottom}; font-size: ${fontSize}; line-height: ${lineHeight};">` 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: #000;">开盘价: ${openPrice.toFixed(2)}</div>`
result += `<div style="color: #000;">收盘价: ${closePrice.toFixed(2)}</div>`
result += `<div style="color: #000;">最低价: ${lowPrice.toFixed(2)}</div>`
result += `<div style="color: #000;">最高价: ${highPrice.toFixed(2)}</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 === '止盈线' && 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: 2px; font-size: ${fontSize}; line-height: ${lineHeight};">${isMobile ? '止盈' : param.seriesName}: ${value.toFixed(2)}</div>`
result += `<div style="color: #FC0000; 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: 2px; font-size: ${fontSize}; line-height: ${lineHeight};">${isMobile ? '止损' : param.seriesName}: ${value.toFixed(2)}</div>`
result += `<div style="color: #002DFF; margin-bottom: 2px; font-size: ${fontSize}; line-height: ${lineHeight};">${isMobile ? '止损' : param.seriesName}: ${value.toFixed(2)}</div>`
} }
}) })
@ -417,7 +476,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
], ],
xAxis: { xAxis: {
type: "category", type: "category",
data: mixData.map((item) => item.date),
data: [...mixData.map((item) => item.date), '', '', ''], // 在末尾添加三个空占位符，留出三根K线的距离
axisLabel: { axisLabel: {
rotate: 0, // 取消倾斜角度 rotate: 0, // 取消倾斜角度
color: "white", color: "white",
@ -429,6 +488,15 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
color: 'white', // x轴线颜色 color: 'white', // x轴线颜色
} }
}, },
axisTick: {
show: true,
alignWithLabel: true, // 刻度线与标签对齐
lineStyle: {
color: "white", // 与十字线颜色保持一致
width: 1,
type: "dashed" // 与十字线样式保持一致
}
},
}, },
yAxis: { yAxis: {
scale: true, scale: true,
@ -469,17 +537,73 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
markPoint: { markPoint: {
symbol: 'circle', symbol: 'circle',
symbolSize: 10, symbolSize: 10,
data: markPointData,
data: [
...markPointData,
// 添加最高价标记
{
name: '最高价',
coord: [maxHighPriceIndex, maxHighPrice],
itemStyle: {
normal: {
color: 'transparent', // 透明标记点
borderColor: 'transparent',
borderWidth: 0
}
},
label: {
normal: {
show: true,
position: maxPricePosition,
formatter: `${maxHighPrice.toFixed(2)}`,
textStyle: {
color: 'rgb(0,170,255)',
fontSize: 12,
fontWeight: 'bold',
// textBorderColor: '#000000',
textBorderWidth: 1
},
offset: maxPriceOffset
}
}
},
// 添加最后一根K线收盘价标记
{
name: '收盘价',
coord: [mixData.length - 1, mixData[mixData.length - 1].value[2]],
itemStyle: {
normal: {
color: 'transparent', // 透明标记点
borderColor: 'transparent',
borderWidth: 0
}
},
label: {
normal: {
show: true,
position: closePricePosition,
formatter: `${lastClosePrice.toFixed(2)}`,
textStyle: {
color: 'rgb(59,143,8)',
fontSize: 12,
fontWeight: 'bold',
// textBorderColor: '#000000',
textBorderWidth: 1
},
offset: closePriceOffset
}
}
}
],
z: 5 // 确保标记显示在最上层 z: 5 // 确保标记显示在最上层
}, },
itemStyle: { itemStyle: {
normal: { normal: {
// 阳线样式（收盘 > 开盘） // 阳线样式（收盘 > 开盘）
// color: '#14b143', // 开盘价 < 收盘价时为绿色 // color: '#14b143', // 开盘价 < 收盘价时为绿色
color: 'rgba(0,0,0,0)',
color0: '#ef232a', // 开盘价 > 收盘价时为红色
borderColor: '#14b143', // 阳线边框色（绿）
borderColor0: '#ef232a', // 阴线边框色（红）
color: '#00AAFF',
color0: '#FF007F', // 开盘价 > 收盘价时为红色
borderColor: '#00AAFF', // 阳线边框色（绿）
borderColor0: '#FF007F', // 阴线边框色（红）
borderWidth: 1.5 borderWidth: 1.5
} }
}, },
@ -536,7 +660,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
type: 'solid' type: 'solid'
} }
}, },
z: 1,
z: 10,
silent: true, silent: true,
showInLegend: false showInLegend: false
}, },
@ -552,31 +676,29 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
type: 'solid' type: 'solid'
} }
}, },
z: 2,
z: 10,
markPoint: { markPoint: {
symbol: 'circle', symbol: 'circle',
symbolSize: 1, symbolSize: 1,
data: [ data: [
{ {
coord: [mixData.map((item) => item.value).length - 1, stopProfitPrice],
coord: [startIndex, stopProfitPrice],
itemStyle: { itemStyle: {
color: '#ff80ff'
color: 'transparent'
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'top',
formatter: `{text|止盈}`,
rich: {
text: {
color: '#FF0000',
fontSize: 14,
fontWeight: 'bold',
textBorderColor: '#ffffff',
textBorderWidth: 2
}
position: 'left',
formatter: `止盈${stopProfitPrice.toFixed(2)}`,
textStyle: {
color: '#FF0000',
fontSize: 12,
fontWeight: 'bold',
textBorderColor: '#ffffff',
textBorderWidth: 2
}, },
offset: [-20, 0]
offset: [-10, 0]
} }
} }
} }
@ -595,7 +717,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
type: 'solid' type: 'solid'
} }
}, },
z: 1,
z: 10,
silent: true, silent: true,
showInLegend: false showInLegend: false
}, },
@ -611,117 +733,115 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
type: 'solid' type: 'solid'
} }
}, },
z: 2,
z: 10,
markPoint: { markPoint: {
symbol: 'circle', symbol: 'circle',
symbolSize: 1, symbolSize: 1,
data: [ data: [
{ {
coord: [mixData.map((item) => item.value).length - 1, stopLossPrice],
itemStyle: {
color: '#080bfd'
},
label: {
normal: {
show: true,
position: 'bottom',
formatter: `{text|止损}`,
rich: {
text: {
color: '#001EFF',
fontSize: 14,
fontWeight: 'bold',
textBorderColor: '#ffffff',
textBorderWidth: 2
}
},
offset: [-20, 0]
}
}
}
]
}
},
{
name: '最低价',
type: 'line',
symbol: 'none',
lineStyle: {
normal: {
color: 'transparent',
width: 0
}
},
markPoint: {
symbol: 'circle',
symbolSize: 1,
data: [
{
coord: [mixData.length - 1, mixData[mixData.length - 1].value[2]],
coord: [startIndex, stopLossPrice],
itemStyle: { itemStyle: {
color: 'transparent' color: 'transparent'
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'bottom',
formatter: `{text| ${mixData[mixData.length - 1].value[2].toFixed(2)}}`,
rich: {
text: {
color: '#001EFF',
fontSize: 12,
fontWeight: 'bold',
textBorderColor: '#ffffff',
textBorderWidth: 2,
}
position: 'left',
formatter: `止损${stopLossPrice.toFixed(2)}`,
textStyle: {
color: '#001EFF',
fontSize: 12,
fontWeight: 'bold',
textBorderColor: '#ffffff',
textBorderWidth: 2
}, },
offset: [-25, -40]
offset: [-10, 0]
} }
} }
} }
] ]
} }
}, },
{
name: '最高价',
type: 'line',
symbol: 'none',
lineStyle: {
normal: {
color: 'transparent',
width: 0
}
},
markPoint: {
symbol: 'circle',
symbolSize: 1,
data: [
{
coord: [mixData.length - 1, mixData[mixData.length - 1].value[3]],
itemStyle: {
color: 'transparent'
},
label: {
normal: {
show: true,
position: 'top',
formatter: `{text| ${mixData[mixData.length - 1].value[3].toFixed(2)}}`,
rich: {
text: {
color: '#FF0000',
fontSize: 12,
fontWeight: 'bold',
textBorderColor: '#ffffff',
textBorderWidth: 2,
}
},
offset: [-25, 40]
}
}
}
]
}
}
// {
// name: '最低价',
// type: 'line',
// symbol: 'none',
// lineStyle: {
// normal: {
// color: 'transparent',
// width: 0
// }
// },
// markPoint: {
// symbol: 'circle',
// symbolSize: 1,
// data: [
// {
// coord: [mixData.length - 1, mixData[mixData.length - 1].value[2]],
// itemStyle: {
// color: 'transparent'
// },
// label: {
// normal: {
// show: true,
// position: 'bottom',
// formatter: `{text| ${mixData[mixData.length - 1].value[2].toFixed(2)}}`,
// rich: {
// text: {
// color: '#001EFF',
// fontSize: 12,
// fontWeight: 'bold',
// textBorderColor: '#ffffff',
// textBorderWidth: 2,
// }
// },
// offset: [-25, -40]
// }
// }
// }
// ]
// }
// },
// {
// name: '最高价',
// type: 'line',
// symbol: 'none',
// lineStyle: {
// normal: {
// color: 'transparent',
// width: 0
// }
// },
// markPoint: {
// symbol: 'circle',
// symbolSize: 1,
// data: [
// {
// coord: [mixData.length - 1, mixData[mixData.length - 1].value[3]],
// itemStyle: {
// color: 'transparent'
// },
// label: {
// normal: {
// show: true,
// position: 'top',
// formatter: `{text| ${mixData[mixData.length - 1].value[3].toFixed(2)}}`,
// rich: {
// text: {
// color: '#FF0000',
// fontSize: 12,
// fontWeight: 'bold',
// textBorderColor: '#ffffff',
// textBorderWidth: 2,
// }
// },
// offset: [-25, 40]
// }
// }
// }
// ]
// }
// }
], ],
grid: { grid: {
left: "13%", left: "13%",
@ -814,7 +934,7 @@ onBeforeUnmount(() => {
<style scoped> <style scoped>
#qxnlzhqEcharts { #qxnlzhqEcharts {
width: 100%; width: 100%;
height: 700px;
height: 542px;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;

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

@ -89,7 +89,10 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
//控制坐标轴 //控制坐标轴
grid: [ grid: [
{ top: "5%", height: "40%" },
{
top: "5%",
height: window.innerWidth <= 768 ? "30%" : "40%"
},
{ top: "45%", height: "35%" }, { top: "45%", height: "35%" },
{ top: "80%", height: "2%" }, { top: "80%", height: "2%" },
], ],
@ -161,6 +164,15 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
}, },
type: "line", type: "line",
}, },
axisTick: {
show: true,
alignWithLabel: true, // 刻度线与标签对齐
lineStyle: {
color: "white", // 与十字线颜色保持一致
width: 1,
type: "dashed" // 与十字线样式保持一致
}
},
}, },
], ],
yAxis: [ yAxis: [
@ -266,7 +278,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
shadowOffsetX: 2, shadowOffsetX: 2,
shadowOffsetY: 2, shadowOffsetY: 2,
}, },
bottom: window.innerWidth > 768 ? "10%" : "5%", // 下移数据缩放滑块
bottom: window.innerWidth > 768 ? "8%" : "5%", // 下移数据缩放滑块
}, },
{ {
show: !1, show: !1,
@ -471,7 +483,7 @@ onBeforeUnmount(() => {
#qxjmqEcharts { #qxjmqEcharts {
width: 100%; width: 100%;
height: 800px;
height: 542px;
margin: 0; margin: 0;
/* top: 5rem; */ /* top: 5rem; */
box-sizing: border-box; box-sizing: border-box;

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

@ -137,14 +137,14 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
axisPointer: { axisPointer: {
type: 'cross', type: 'cross',
crossStyle: { crossStyle: {
color: '#fff',
color: 'grey',
width: 1, width: 1,
type: 'solid'
type: 'dashed'
}, },
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)',
@ -154,14 +154,15 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
} }
}, },
// backgroundColor: 'rgba(0, 0, 0, 0.8)', // backgroundColor: 'rgba(0, 0, 0, 0.8)',
backgroundColor: '#646E71',
borderColor: '#fff',
borderWidth: 1,
padding: 10,
textStyle: {
color: '#fff',
fontSize: 12
},
backgroundColor: 'rgba(232, 232, 242, 0.87)',
borderColor: '#fff',
borderWidth: 1,
borderRadius: 8,
padding: 10,
textStyle: {
color: '#fff',
fontSize: 12
},
formatter: function (params) { formatter: function (params) {
if (!params || params.length === 0) return '' if (!params || params.length === 0) return ''
@ -203,9 +204,16 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
return '' return ''
} }
let priceChange = closePrice - openPrice
let changePercent = ((priceChange / openPrice) * 100).toFixed(2)
let changeColor = priceChange >= 0 ? '#14b143' : '#ef232a' // 互换颜色：上涨红色，下跌绿色
// 获取前一日收盘价
let previousClosePrice = null;
const currentIndex = param.dataIndex;
if (currentIndex > 0 && kLineDataArray && kLineDataArray[currentIndex - 1]) {
// 从原始K线数据中获取前一日收盘价
const previousData = kLineDataArray[currentIndex - 1];
if (previousData && Array.isArray(previousData) && previousData.length >= 2) {
previousClosePrice = previousData[1]; // 前一日收盘价（ECharts格式：[开盘, 收盘, 最低, 最高]）
}
}
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>`
@ -213,7 +221,15 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
result += `<div style="color: #fff;">收盘价: ${closePrice.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;">最低价: ${lowPrice.toFixed(1)}</div>`
result += `<div style="color: #fff;">最高价: ${highPrice.toFixed(1)}</div>` result += `<div style="color: #fff;">最高价: ${highPrice.toFixed(1)}</div>`
result += `<div style="color: ${changeColor};">涨跌: ${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)</div>`
// 只有当存在前一日收盘价时才显示涨跌幅
if (previousClosePrice !== null && typeof previousClosePrice === 'number') {
let priceChange = closePrice - previousClosePrice;
let changePercent = ((priceChange / previousClosePrice) * 100).toFixed(2);
let changeColor = priceChange >= 0 ? '#14b143' : '#ef232a'; // 互换颜色：上涨红色，下跌绿色
result += `<div style="color: ${changeColor};">涨跌: ${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)</div>`;
}
result += `</div>` result += `</div>`
} else if (param.seriesName === '红线') { } else if (param.seriesName === '红线') {
result += `<div style="color: #ef232a; margin-bottom: 4px;">${param.seriesName}: ${value}</div>` result += `<div style="color: #ef232a; margin-bottom: 4px;">${param.seriesName}: ${value}</div>`
@ -239,16 +255,16 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
right: '3%', right: '3%',
top: '20px', top: '20px',
bottom: '50%', bottom: '50%',
height: '300px',
height: '150px',
width: '85%' width: '85%'
// containLabel: true // containLabel: true
}, },
{ {
left: '10%', left: '10%',
right: '3%', right: '3%',
top: '320px',
top: '170px',
bottom: '25%', bottom: '25%',
height: '300px',
height: '150px',
width: '85%' width: '85%'
// containLabel: true // containLabel: true
@ -256,9 +272,9 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
{ {
left: '10%', left: '10%',
right: '3%', right: '3%',
top: '620px',
top: '320px',
bottom: '50px', bottom: '50px',
height: '300px',
height: '150px',
width: '85%' width: '85%'
// containLabel: true // containLabel: true
@ -277,7 +293,13 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
} }
}, },
axisTick: { axisTick: {
show: false
show: true,
alignWithLabel: true, // 刻度线与标签对齐
lineStyle: {
color: "#999", // 与十字线颜色保持一致
width: 1,
type: "dashed" // 与十字线样式保持一致
}
}, },
axisLabel: { axisLabel: {
show: false show: false
@ -462,7 +484,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
start: 0, start: 0,
end: 100, end: 100,
show: true, show: true,
bottom: window.innerWidth > 768 ? 80 : 50,
bottom: window.innerWidth > 768 ? 30 : 50,
height: 20, height: 20,
borderColor: '#CFD6E3', borderColor: '#CFD6E3',
fillerColor: 'rgba(135, 175, 274, 0.2)', fillerColor: 'rgba(135, 175, 274, 0.2)',
@ -699,7 +721,7 @@ onBeforeUnmount(() => {
<style> <style>
#bottomRadarChart { #bottomRadarChart {
width: 100%; width: 100%;
height: 1040px;
height: 542px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
margin: 0px auto !important; margin: 0px auto !important;

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

@ -490,14 +490,16 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
}, },
legend: { legend: {
data: ["K线", "股票温度", "市场温度"], data: ["K线", "股票温度", "市场温度"],
textStyle: { color: "white", fontSize: 18 },
textStyle: { color: "white", fontSize: window.innerWidth <= 768 ? 14 : 18 },
}, },
grid: { grid: {
left: window.innerWidth <= 768 ? '40px' : '100px', // 移动端使用较小边距，桌面端为四位数预留足够空间
left: window.innerWidth <= 768 ? '50px' : '100px', // 移动端使用较小边距，桌面端为四位数预留足够空间
right: window.innerWidth <= 768 ? '40px' : '100px', // 为右侧y轴预留空间 right: window.innerWidth <= 768 ? '40px' : '100px', // 为右侧y轴预留空间
top: window.innerWidth <= 768 ? '40px' : '60px', top: window.innerWidth <= 768 ? '40px' : '60px',
bottom: window.innerWidth <= 768 ? '60px' : '80px', // 为dataZoom预留空间 bottom: window.innerWidth <= 768 ? '60px' : '80px', // 为dataZoom预留空间
containLabel: false // 不自动包含标签，使用固定边距
containLabel: false, // 不自动包含标签，使用固定边距
height: window.innerWidth <= 768 ? '200px' : '300px',
width: window.innerWidth <= 768 ? '70%' : '80%',
}, },
xAxis: { xAxis: {
type: "category", type: "category",
@ -509,7 +511,15 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
fontWeight: "bold", fontWeight: "bold",
}, },
axisTick: { lineStyle: { color: "#00BFFF" } },
axisTick: {
show: true,
alignWithLabel: true, // 刻度线与标签对齐
lineStyle: {
color: "white", // 与十字线颜色保持一致
width: 1,
type: "dashed" // 与十字线样式保持一致
}
},
axisPointer: { axisPointer: {
show: true, show: true,
type: "line", type: "line",
@ -523,6 +533,15 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
color: "black", color: "black",
}, },
}, },
splitLine: {
show: false, // 显示网格线
lineStyle: {
color: "#999",
width: 1,
type: "dashed",
opacity: 0.3 // 设置透明度使网格线不太突出
}
},
}, },
yAxis: [ yAxis: [
{ {
@ -790,7 +809,7 @@ defineExpose({ initChart });
.KlineClass { .KlineClass {
width: 100%; width: 100%;
height: 600px;
height: 420px;
} }
.market-temperature { .market-temperature {
@ -810,23 +829,23 @@ defineExpose({ initChart });
} }
.border3 { .border3 {
margin-top: 40px;
/* margin-top: 40px; */
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
/* margin-left: 0; */ /* margin-left: 0; */
width: 100%; width: 100%;
height: 100%;
height: auto;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
.border4 { .border4 {
margin-top: 40px;
/* margin-top: 40px; */
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
width: 80%; width: 80%;
/* margin-left: 8%; */ /* margin-left: 8%; */
height: 48vw;
height: 35vw;
overflow: visible; overflow: visible;
} }
@ -861,7 +880,7 @@ defineExpose({ initChart });
margin-top: 0px; margin-top: 0px;
border-radius: 8px; border-radius: 8px;
padding: 0px; padding: 0px;
width: 100%;
width: 80%;
margin-left: 0%; margin-left: 0%;
height: 80vw; height: 80vw;
overflow: visible; overflow: visible;
@ -1048,6 +1067,9 @@ defineExpose({ initChart });
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@media only screen and (max-width: 768px) {
font-size: 12px;
}
} }
.calendar { .calendar {
@ -1101,7 +1123,7 @@ defineExpose({ initChart });
} }
.monthContent { .monthContent {
margin-top: 1.2vw;
margin-top: 0.5vw;
font-weight: bold; font-weight: bold;
font-size: 1.2vw; font-size: 1.2vw;
} }

Write Preview
Loading…
Cancel
Save