fix: k线图显示正确

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']
+          data: ['K线', 'MA5', 'MA10', '成交量'],
-        },
+          top: '3%',
-        grid: {
+          left: 'center'
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
-        },
-        xAxis: {
-          type: 'time',
-          boundaryGap: false
-        },
-        yAxis: {
-          type: 'value',
-          scale: true
         },
+        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';
+              }
+            }
           }
         ]
       };