feat: 增加日线数据显示

leopard-web/src/pages/stock/StockDetail.tsx

@@ -47,7 +47,6 @@ const financePropertyLabel = (id: string | undefined, label: string, type: Finan
       tpl: label,
     }
   }
-  let current = new Date().getFullYear()
   let formatter: (value: number) => string
   switch (type) {
     case 'PERCENTAGE':
@@ -138,13 +137,7 @@ const financePropertyLabel = (id: string | undefined, label: string, type: Finan
               },
               xAxis: {
                 type: 'category',
-                data: [
-                  current - 5,
-                  current - 4,
-                  current - 3,
-                  current - 2,
-                  current - 1,
-                ],
+                data: '${xList || []}',
                 axisLine: {
                   lineStyle: {
                     color: '#e0e0e0',
@@ -183,7 +176,7 @@ const financePropertyLabel = (id: string | undefined, label: string, type: Finan
               },
               series: [
                 {
-                  data: '${detail || []}',
+                  data: '${yList || []}',
                   type: 'line',
                   smooth: true,
                   showSymbol: true,
@@ -416,6 +409,135 @@ function StockDetail() {
                   ],
                 },
                 {type: 'divider'},
+                "100天日线数据",
+                {
+                  type: 'chart',
+                  height: 800,
+                  api: `get:${commonInfo.baseUrl}/stock/daily/${id}`,
+                  config: {
+                    backgroundColor: '#fff',
+                    animation: true,
+                    animationDuration: 1000,
+                    tooltip: {
+                      trigger: 'axis',
+                      axisPointer: {
+                        type: 'cross',
+                      },
+                      backgroundColor: 'rgba(0, 0, 0, 0.7)',
+                      borderColor: '#333',
+                      borderWidth: 1,
+                      textStyle: {
+                        color: '#fff',
+                        fontSize: 12,
+                      },
+                      padding: 12,
+                      formatter: function (params: any) {
+                        const param = params[0]
+                        const open = param.data[0]
+                        const close = param.data[1]
+                        const lowest = param.data[2]
+                        const highest = param.data[3]
+
+                        return [
+                          `<div style="font-weight: bold; margin-bottom: 4px;">${param.name}</div>`,
+                          `<div style="display: flex; justify-content: space-between; margin: 2px 0;">`,
+                          `<span>开盘:</span>`,
+                          `<span style="margin-left: 12px; font-weight: bold;">${open}</span>`,
+                          `</div>`,
+                          `<div style="display: flex; justify-content: space-between; margin: 2px 0;">`,
+                          `<span>收盘:</span>`,
+                          `<span style="margin-left: 12px; font-weight: bold;">${close}</span>`,
+                          `</div>`,
+                          `<div style="display: flex; justify-content: space-between; margin: 2px 0;">`,
+                          `<span>最低:</span>`,
+                          `<span style="margin-left: 12px; font-weight: bold;">${lowest}</span>`,
+                          `</div>`,
+                          `<div style="display: flex; justify-content: space-between; margin: 2px 0;">`,
+                          `<span>最高:</span>`,
+                          `<span style="margin-left: 12px; font-weight: bold;">${highest}</span>`,
+                          `</div>`,
+                        ].join('')
+                      },
+                    },
+                    grid: {
+                      left: '10%',
+                      right: '10%',
+                      top: '10%',
+                      bottom: '15%',
+                      containLabel: true,
+                    },
+                    xAxis: {
+                      data: '${xList || []}',
+                      axisLine: {
+                        lineStyle: {
+                          color: '#e0e0e0',
+                        },
+                      },
+                      axisLabel: {
+                        color: '#666',
+                        fontWeight: 'bold',
+                      },
+                      splitLine: {
+                        show: false,
+                      },
+                      axisTick: {
+                        show: false,
+                      },
+                    },
+                    yAxis: {
+                      scale: true,
+                      axisLine: {
+                        lineStyle: {
+                          color: '#e0e0e0',
+                        },
+                      },
+                      axisLabel: {
+                        color: '#666',
+                        fontWeight: 'bold',
+                        formatter: function (value: number) {
+                          return value.toFixed(0)
+                        },
+                      },
+                      splitLine: {
+                        lineStyle: {
+                          type: 'dashed',
+                          color: '#f0f0f0',
+                        },
+                      },
+                      axisTick: {
+                        show: false,
+                      },
+                    },
+                    dataZoom: [
+                      {
+                        type: 'inside',
+                        start: 0,
+                        end: 100,
+                      },
+                      {
+                        show: true,
+                        type: 'slider',
+                        top: '90%',
+                        start: 0,
+                        end: 100,
+                      },
+                    ],
+                    series: [
+                      {
+                        type: 'candlestick',
+                        data: '${yList || []}',
+                        itemStyle: {
+                          color: '#eb5454',
+                          color0: '#4aaa93',
+                          borderColor: '#eb5454',
+                          borderColor0: '#4aaa93',
+                          borderWidth: 1,
+                        },
+
+                      },
+                    ],
+                  },
+                },
               ],
             },
           ],