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

图表数据修改完成

hongxilin/hotfix-20250625101643-手机输入法弹出输入框上浮
宋杰 1 week ago
parent
0668475e40
commit
f01e6d6134
3 changed files with 78 additions and 44 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. 43
      src/views/components/emoEnergyConverter.vue
  2. 78
      src/views/components/emotionalBottomRadar.vue
  3. 1
      src/views/components/marketTemperature.vue

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

@ -244,12 +244,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
show: true, show: true,
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'cross',
crossStyle: {
color: '#fff',
width: 1,
type: 'solid'
},
type: 'line',
lineStyle: { lineStyle: {
color: '#fff', color: '#fff',
width: 1, width: 1,
@ -280,10 +275,10 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
let color = param.color let color = param.color
if (param.seriesType === 'candlestick') { if (param.seriesType === 'candlestick') {
let openPrice = value[0] // 开盘价
let closePrice = value[1] // 收盘价
let lowPrice = value[2] // 最低价
let highPrice = value[3] // 最高价
let openPrice = value[1] // 开盘价
let closePrice = value[2] // 收盘价
let lowPrice = value[3] // 最低价
let highPrice = value[4] // 最高价
// 检查数据有效性 // 检查数据有效性
if (typeof openPrice !== 'number' || typeof closePrice !== 'number' || if (typeof openPrice !== 'number' || typeof closePrice !== 'number' ||
@ -293,10 +288,10 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
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 ? '#ef232a' : '#14b143'
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(2)}</div>` result += `<div style="color: #fff;">开盘: ${openPrice.toFixed(2)}</div>`
result += `<div style="color: #fff;">收盘: ${closePrice.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;">最低: ${lowPrice.toFixed(2)}</div>`
@ -317,7 +312,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
{ {
type: 'slider', type: 'slider',
xAxisIndex: 0, xAxisIndex: 0,
start: 40,
start: 0,
end: 100, end: 100,
show: true, show: true,
bottom: 10, bottom: 10,
@ -335,7 +330,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
{ {
type: 'inside', type: 'inside',
xAxisIndex: 0, xAxisIndex: 0,
start: 70,
start: 0,
end: 100, end: 100,
zoomOnMouseWheel: true, zoomOnMouseWheel: true,
moveOnMouseMove: true, moveOnMouseMove: true,
@ -349,9 +344,21 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
rotate: 45, // 日期旋转45度防止重叠 rotate: 45, // 日期旋转45度防止重叠
color: "white" color: "white"
}, },
axisLine: {
// show: false,
lineStyle: {
color: 'white', // x轴线颜色
}
},
}, },
yAxis: { yAxis: {
scale: true, scale: true,
axisLine: {
// show: false,
lineStyle: {
color: 'white', // x轴线颜色
}
},
splitLine: { splitLine: {
show: false, show: false,
}, },
@ -391,10 +398,10 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
itemStyle: { itemStyle: {
normal: { normal: {
// 阳线样式（收盘 > 开盘） // 阳线样式（收盘 > 开盘）
color: 'transparent', // 阳线色
color0: '#008080', // 阴线色
borderColor: '#ff0783', // 阳线边框色（红）
borderColor0: '#008080', // 阴线边框色（绿）
color: '#14b143', // 开盘价 < 收盘价时为绿色
color0: '#ef232a', // 开盘价 > 收盘价时为红色
borderColor: '#14b143', // 阳线边框色（绿）
borderColor0: '#ef232a', // 阴线边框色（红）
} }
}, },
// 实现 分区域背景色 // 实现 分区域背景色

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

@ -19,8 +19,28 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
// 日期-作为x轴 // 日期-作为x轴
let dateArray = barAndLineData.map(subArray => subArray[0]) let dateArray = barAndLineData.map(subArray => subArray[0])
// k线，取前四个即可
let kLineDataArray = KlineData.map(subArray => subArray.slice(1, 5))
// k线数据格式：['2025/04/24', 250.5, 259.51, 249.2, 259.54, 274.899, 0.685, 258.354]
// 原始数据：索引1=开盘价, 索引2=收盘价, 索引3=最低价, 索引4=最高价
// ECharts candlestick需要：[开盘, 收盘, 最低, 最高]
let kLineDataArray = KlineData.map(subArray => [
subArray[1], // 开盘价
subArray[2], // 收盘价
subArray[3], // 最低价
subArray[4] // 最高价
])
// 计算K线数据的最小值，用于设置y轴起始值
let allKlineValues = []
kLineDataArray.forEach(item => {
if (Array.isArray(item) && item.length >= 4) {
// K线数据格式：[开盘价, 收盘价, 最低价, 最高价]
allKlineValues.push(item[0], item[1], item[2], item[3])
}
})
// 找到最小值并向下取整到10的整数倍
let minValue = Math.min(...allKlineValues.filter(val => typeof val === 'number' && !isNaN(val)))
let yAxisMin = Math.floor(minValue / 10) * 10
// 红线，取第二个值 // 红线，取第二个值
let redLineDataArray = barAndLineData.map(subArray => subArray[1]) let redLineDataArray = barAndLineData.map(subArray => subArray[1])
// 色块数据格式化 // 色块数据格式化
@ -157,24 +177,34 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
if (param.seriesType === 'candlestick') { if (param.seriesType === 'candlestick') {
// ECharts candlestick的value格式：[开盘, 收盘, 最低, 最高] // ECharts candlestick的value格式：[开盘, 收盘, 最低, 最高]
// 但param.value可能包含额外信息，需要从原始数据中获取
let dataIndex = param.dataIndex
let candlestickData = kLineDataArray[dataIndex]
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') {
return ''
}
let openPrice = candlestickData[0] // 开盘价
let closePrice = candlestickData[1] // 收盘价
let lowPrice = candlestickData[2] // 最低价
let highPrice = candlestickData[3] // 最高价
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(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: #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 === '红线') {
@ -183,7 +213,6 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
result += `<div style="color: ${color}; margin-bottom: 4px;">${param.seriesName}: ${value}</div>` result += `<div style="color: ${color}; margin-bottom: 4px;">${param.seriesName}: ${value}</div>`
} }
}) })
return result return result
} }
}, },
@ -251,7 +280,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
axisPointer: { axisPointer: {
link: { link: {
xAxisIndex: 'all' xAxisIndex: 'all'
}
},
} }
}, },
{ {
@ -319,6 +348,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
type: 'value', type: 'value',
gridIndex: 0, gridIndex: 0,
splitNumber: 4, splitNumber: 4,
min: yAxisMin, // 设置y轴最小值为数据中最小值的10的整数倍
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'white' // y轴坐标轴颜色 color: 'white' // y轴坐标轴颜色
@ -331,9 +361,6 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
width: 50, // 宽度限制 width: 50, // 宽度限制
color: 'white', color: 'white',
formatter: function (value, index) { formatter: function (value, index) {
if (index === 0) {
return '0'
}
return value.toFixed(2) return value.toFixed(2)
} }
}, },
@ -344,7 +371,6 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
type: 'dotted' // 设置网格线类型 dotted：虚线 solid:实线 type: 'dotted' // 设置网格线类型 dotted：虚线 solid:实线
} }
}, },
// min: 4,
scale: true, // 不强制包含0，不然k线图底部空余太多 scale: true, // 不强制包含0，不然k线图底部空余太多
}, },
{ {
@ -424,7 +450,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
{ {
type: 'slider', type: 'slider',
xAxisIndex: [0, 1, 2], xAxisIndex: [0, 1, 2],
start: 70,
start: 0,
end: 100, end: 100,
show: true, show: true,
bottom: 10, bottom: 10,
@ -449,7 +475,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
{ {
type: 'inside', type: 'inside',
xAxisIndex: [0, 1, 2], xAxisIndex: [0, 1, 2],
start: 70,
start: 0,
end: 100, end: 100,
zoomOnMouseWheel: true, zoomOnMouseWheel: true,
moveOnMouseMove: true, moveOnMouseMove: true,
@ -464,13 +490,13 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
xAxisIndex: 0, xAxisIndex: 0,
yAxisIndex: 0, yAxisIndex: 0,
itemStyle: { itemStyle: {
color: '#14b143', // 上涨颜色 (绿)
color0: '#ef232a', // 下跌颜色 (红)
color: '#14b143', // 开盘价 > 收盘价时为绿色
color0: '#ef232a', // 开盘价 < 收盘价时为红色
borderColor: '#14b143', borderColor: '#14b143',
borderColor0: '#ef232a', borderColor0: '#ef232a',
normal: { normal: {
color: '#14b143', // 上涨颜色 (绿)
color0: '#ef232a', // 下跌颜色 (红)
color: '#14b143', // 开盘价 > 收盘价时为绿色
color0: '#ef232a', // 开盘价 < 收盘价时为红色
borderColor: '#14b143', borderColor: '#14b143',
borderColor0: '#ef232a', borderColor0: '#ef232a',
opacity: function (params) { opacity: function (params) {

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

@ -337,6 +337,7 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
data: klineData, data: klineData,
itemStyle: { itemStyle: {
normal: { normal: {
color: '#00FF00', // 阳线红色 color: '#00FF00', // 阳线红色
color0: '#FF0000', // 阴线绿色 color0: '#FF0000', // 阴线绿色
borderColor: '#00FF00', // 阳线边框红色 borderColor: '#00FF00', // 阳线边框红色

Write Preview
Loading…
Cancel
Save