diff --git a/backend/service_implementation/service/data/futures_analysis.db b/backend/service_implementation/service/data/futures_analysis.db index c6450c5..345c9a2 100644 Binary files a/backend/service_implementation/service/data/futures_analysis.db and b/backend/service_implementation/service/data/futures_analysis.db differ diff --git a/src/pages/detail/Detail.jsx b/src/pages/detail/Detail.jsx index 02a1435..f04095f 100644 --- a/src/pages/detail/Detail.jsx +++ b/src/pages/detail/Detail.jsx @@ -120,6 +120,18 @@ const Detail = () => { ]); } + // 准备成交量数据 + const volumeData = klineData.map(item => { + const isUp = item.close >= item.open; + return [ + new Date(item.timestamp * 1000).getTime(), // 时间戳 + item.volume, // 成交量 + isUp ? 1 : 0 // 涨跌状态,用于着色 + ]; + }); + + console.log('Volume data for ECharts:', volumeData); + // 配置选项 const option = { tooltip: { @@ -129,22 +141,60 @@ const Detail = () => { } }, legend: { - data: ['K线', 'MA5', 'MA10'] - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - xAxis: { - type: 'time', - boundaryGap: false - }, - yAxis: { - type: 'value', - scale: true + data: ['K线', 'MA5', 'MA10', '成交量'], + top: '3%', + left: 'center' }, + grid: [ + { + left: '3%', + right: '4%', + bottom: '15%', + containLabel: true + }, + { + left: '3%', + right: '4%', + bottom: '3%', + height: '10%', + containLabel: true + } + ], + xAxis: [ + { + type: 'time', + boundaryGap: false, + axisLabel: { + show: true + } + }, + { + type: 'time', + boundaryGap: false, + gridIndex: 1, + axisLabel: { + show: false + } + } + ], + yAxis: [ + { + type: 'value', + scale: true, + splitArea: { + show: true + } + }, + { + type: 'value', + scale: true, + gridIndex: 1, + splitNumber: 2, + axisLabel: { + show: true + } + } + ], series: [ { name: 'K线', @@ -178,6 +228,19 @@ const Detail = () => { color: '#faad14' }, showSymbol: false + }, + { + name: '成交量', + type: 'bar', + xAxisIndex: 1, + yAxisIndex: 1, + data: volumeData, + itemStyle: { + color: function(params) { + // 根据涨跌状态着色 + return params.data[2] === 1 ? '#52c41a' : '#ff4d4f'; + } + } } ] };