diff --git a/src/views/components/emoEnergyConverter.vue b/src/views/components/emoEnergyConverter.vue index 646c338..e4a8e8c 100644 --- a/src/views/components/emoEnergyConverter.vue +++ b/src/views/components/emoEnergyConverter.vue @@ -244,12 +244,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { show: true, trigger: 'axis', axisPointer: { - type: 'cross', - crossStyle: { - color: '#fff', - width: 1, - type: 'solid' - }, + type: 'line', lineStyle: { color: '#fff', width: 1, @@ -280,10 +275,10 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { let color = param.color 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' || @@ -293,10 +288,10 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { let priceChange = closePrice - openPrice let changePercent = ((priceChange / openPrice) * 100).toFixed(2) - let changeColor = priceChange >= 0 ? '#ef232a' : '#14b143' + let changeColor = priceChange >= 0 ? '#14b143' : '#ef232a' result += `
` - result += `
${param.seriesName}
` + // result += `
${param.seriesName}
` result += `
开盘: ${openPrice.toFixed(2)}
` result += `
收盘: ${closePrice.toFixed(2)}
` result += `
最低: ${lowPrice.toFixed(2)}
` @@ -317,7 +312,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { { type: 'slider', xAxisIndex: 0, - start: 40, + start: 0, end: 100, show: true, bottom: 10, @@ -335,7 +330,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { { type: 'inside', xAxisIndex: 0, - start: 70, + start: 0, end: 100, zoomOnMouseWheel: true, moveOnMouseMove: true, @@ -349,9 +344,21 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { rotate: 45, // 日期旋转45度防止重叠 color: "white" }, + axisLine: { + // show: false, + lineStyle: { + color: 'white', // x轴线颜色 + } + }, }, yAxis: { scale: true, + axisLine: { + // show: false, + lineStyle: { + color: 'white', // x轴线颜色 + } + }, splitLine: { show: false, }, @@ -391,10 +398,10 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { itemStyle: { normal: { // 阳线样式（收盘 > 开盘） - color: 'transparent', // 阳线色 - color0: '#008080', // 阴线色 - borderColor: '#ff0783', // 阳线边框色（红） - borderColor0: '#008080', // 阴线边框色（绿） + color: '#14b143', // 开盘价 < 收盘价时为绿色 + color0: '#ef232a', // 开盘价 > 收盘价时为红色 + borderColor: '#14b143', // 阳线边框色（绿） + borderColor0: '#ef232a', // 阴线边框色（红） } }, // 实现 分区域背景色 diff --git a/src/views/components/emotionalBottomRadar.vue b/src/views/components/emotionalBottomRadar.vue index a056922..14b400b 100644 --- a/src/views/components/emotionalBottomRadar.vue +++ b/src/views/components/emotionalBottomRadar.vue @@ -19,8 +19,28 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { // 日期-作为x轴 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]) // 色块数据格式化 @@ -157,24 +177,34 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { if (param.seriesType === 'candlestick') { // 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 changePercent = ((priceChange / openPrice) * 100).toFixed(2) - let changeColor = priceChange >= 0 ? '#14b143' : '#ef232a' // 互换颜色：上涨绿色，下跌红色 + let changeColor = priceChange >= 0 ? '#14b143' : '#ef232a' // 互换颜色：上涨红色，下跌绿色 result += `
` result += `
${param.seriesName}
` - result += `
开盘: ${openPrice.toFixed(2)}
` - result += `
收盘: ${closePrice.toFixed(2)}
` - result += `
最低: ${lowPrice.toFixed(2)}
` - result += `
最高: ${highPrice.toFixed(2)}
` + result += `
开盘: ${openPrice.toFixed(1)}
` + result += `
收盘: ${closePrice.toFixed(1)}
` + result += `
最低: ${lowPrice.toFixed(1)}
` + result += `
最高: ${highPrice.toFixed(1)}
` result += `
涨跌: ${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)
` result += `
` } else if (param.seriesName === '红线') { @@ -183,7 +213,6 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { result += `
${param.seriesName}: ${value}
` } }) - return result } }, @@ -251,7 +280,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { axisPointer: { link: { xAxisIndex: 'all' - } + }, } }, { @@ -319,6 +348,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { type: 'value', gridIndex: 0, splitNumber: 4, + min: yAxisMin, // 设置y轴最小值为数据中最小值的10的整数倍 axisLine: { lineStyle: { color: 'white' // y轴坐标轴颜色 @@ -331,9 +361,6 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { width: 50, // 宽度限制 color: 'white', formatter: function (value, index) { - if (index === 0) { - return '0' - } return value.toFixed(2) } }, @@ -344,7 +371,6 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { type: 'dotted' // 设置网格线类型 dotted：虚线 solid:实线 } }, - // min: 4, scale: true, // 不强制包含0，不然k线图底部空余太多 }, { @@ -424,7 +450,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { { type: 'slider', xAxisIndex: [0, 1, 2], - start: 70, + start: 0, end: 100, show: true, bottom: 10, @@ -449,7 +475,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { { type: 'inside', xAxisIndex: [0, 1, 2], - start: 70, + start: 0, end: 100, zoomOnMouseWheel: true, moveOnMouseMove: true, @@ -464,13 +490,13 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { xAxisIndex: 0, yAxisIndex: 0, itemStyle: { - color: '#14b143', // 上涨颜色 (绿) - color0: '#ef232a', // 下跌颜色 (红) + color: '#14b143', // 开盘价 > 收盘价时为绿色 + color0: '#ef232a', // 开盘价 < 收盘价时为红色 borderColor: '#14b143', borderColor0: '#ef232a', normal: { - color: '#14b143', // 上涨颜色 (绿) - color0: '#ef232a', // 下跌颜色 (红) + color: '#14b143', // 开盘价 > 收盘价时为绿色 + color0: '#ef232a', // 开盘价 < 收盘价时为红色 borderColor: '#14b143', borderColor0: '#ef232a', opacity: function (params) { diff --git a/src/views/components/marketTemperature.vue b/src/views/components/marketTemperature.vue index f200ef0..bcb98a9 100644 --- a/src/views/components/marketTemperature.vue +++ b/src/views/components/marketTemperature.vue @@ -337,6 +337,7 @@ function initChart(raw, klineDataRawValue, WDRLValue) { data: klineData, itemStyle: { normal: { + color: '#00FF00', // 阳线红色 color0: '#FF0000', // 阴线绿色 borderColor: '#00FF00', // 阳线边框红色