refactor(frontend):优化资金趋势图表组件

- 优化图表展示效果，增加累计净流入和股价的显示
- 调整图表样式，增加暗黑主题支持
- 优化数据处理逻辑，提高图表准确性
-调整模态框样式，移除不必要的属性

frontend/src/components/moneyTrend.vue

@@ -61,26 +61,34 @@ const handleLine = (code, days) => {
       }
 
       if (i > 0) {
-        let b=(result[i].netamount - result[i - 1].netamount)/10000
+        let b = Number(Number(result[i].netamount) + Number(result[i - 1].netamount)) / 10000
-        volume.push(b)
+        volume.push(b.toFixed(2))
       } else {
-        volume.push(result[i].netamount/10000)
+        volume.push((Number(result[i].netamount) / 10000).toFixed(2))
       }
 
     }
-    console.log("trades_values", trades_values)
+    console.log("volume", volume)
-
+    const upColor = '#ec0000';
+    const downColor = '#00da3c';
     let option = {
-      darkMode: darkTheme,
       tooltip: {
         trigger: 'axis',
         axisPointer: {
           type: 'cross',
-          animation: false,
+          lineStyle: {
-          label: {
+            color: '#376df4',
-            backgroundColor: '#505765'
+            width: 1,
+            opacity: 1
           }
-        }
+        },
+        borderWidth: 2,
+        borderColor: darkTheme?'#456':'#ccc',
+        backgroundColor: darkTheme?'#456':'#fff',
+        padding: 10,
+        textStyle: {
+          color: darkTheme?'#ccc':'#456'
+        },
       },
       axisPointer: {
         link: [
@@ -94,40 +102,76 @@ const handleLine = (code, days) => {
       },
       legend: {
         show: true,
-        data: ['当日净流入','主力当日净流入','累计净流入', '股价'],
+        data: ['当日净流入', '主力当日净流入','累计净流入',  '股价'],
         selected: {
           '当日净流入': true,
-          '主力当日净流入': false,
+          '主力当日净流入': true,
-          '累计净流入': false,
+          '累计净流入': true,
           '股价': true,
         },
         //orient: 'vertical',
         textStyle: {
-          color: darkTheme ? '#ccc' : '#456'
+          color: darkTheme ? 'rgb(253,252,252)' : '#456'
         },
         right: 150,
       },
       dataZoom: [
         {
-          show: true,
+          type: 'inside',
-          realtime: true,
+          xAxisIndex: [0, 1],
-          start: 70,
+          start: 86,
           end: 100
         },
         {
-          type: 'inside',
+          show: true,
-          realtime: true,
+          xAxisIndex: [0, 1],
+          type: 'slider',
+          top: '90%',
           start: 86,
           end: 100
         }
       ],
-      xAxis: {
+      grid: [
-        type: 'category',
+        {
-        data: categoryData
+          left: '8%',
-      },
+          right: '8%',
+          height: '50%',
+        },
+        {
+          left: '8%',
+          right: '8%',
+          top: '74%',
+          height: '15%'
+        },
+      ],
+      xAxis: [
+        {
+          type: 'category',
+          data: categoryData,
+          axisPointer: {
+            z: 100
+          },
+
+          boundaryGap: false,
+          axisLine: { onZero: false },
+          splitLine: { show: false },
+          min: 'dataMin',
+          max: 'dataMax',
+
+
+        },
+        {
+          gridIndex: 1,
+          type: 'category',
+          data: categoryData,
+          axisLabel: {
+            show: false
+          },
+        }
+      ],
       yAxis: [
         {
-          name: '净流入',
+          name: '当日净流入/万',
           type: 'value',
           axisLine: {
             show: true
@@ -148,13 +192,25 @@ const handleLine = (code, days) => {
           splitLine: {
             show: false
           },
-        }
+        },
+        {
+          gridIndex: 1,
+          name: '累计净流入/万',
+          type: 'value',
+          axisLine: {
+            show: true
+          },
+          splitLine: {
+            show: false
+          },
+        },
       ],
       series: [
         {
+          yAxisIndex: 0,
           name: '当日净流入',
           data: netamount_values,
-          smooth: true,
+          smooth: false,
           showSymbol: false,
           lineStyle: {
             width: 2
@@ -190,86 +246,49 @@ const handleLine = (code, days) => {
           type: 'line'
         },
         {
+          yAxisIndex: 0,
           name: '主力当日净流入',
           data: r0_net_values,
-          smooth: true,
+          smooth: false,
           showSymbol: false,
           lineStyle: {
             width: 2
           },
-          markPoint: {
+          // markPoint: {
-            symbol: 'arrow',
+          //   symbol: 'arrow',
-            symbolRotate: 90,
+          //   symbolRotate: 90,
-            symbolSize: [10, 20],
+          //   symbolSize: [10, 20],
-            symbolOffset: [10, 0],
+          //   symbolOffset: [10, 0],
-            itemStyle: {
+          //   itemStyle: {
-              color: '#0d7dfc'
+          //     color: '#0d7dfc'
-            },
+          //   },
-            label: {
+          //   label: {
-              position: 'right',
+          //     position: 'right',
-            },
+          //   },
-            data: [
+          //   data: [
-              {type: 'max', name: 'Max'},
+          //     {type: 'max', name: 'Max'},
-              {type: 'min', name: 'Min'}
+          //     {type: 'min', name: 'Min'}
-            ]
+          //   ]
-          },
+          // },
-          markLine: {
+          // markLine: {
-            data: [
+          //   data: [
-              {
+          //     {
-                type: 'average',
+          //       type: 'average',
-                name: 'Average',
+          //       name: 'Average',
-                lineStyle: {
+          //       lineStyle: {
-                  color: '#0077ff',
+          //         color: '#0077ff',
-                  width: 0.5
+          //         width: 0.5
-                },
+          //       },
-              },
+          //     },
-            ]
+          //   ]
-          },
+          // },
-          type: 'line'
+          type: 'bar'
-        },
-        {
-          name: '累计净流入',
-          data: volume,
-          smooth: true,
-          showSymbol: false,
-          lineStyle: {
-            width: 2
-          },
-          markPoint: {
-            symbol: 'arrow',
-            symbolRotate: 90,
-            symbolSize: [10, 20],
-            symbolOffset: [10, 0],
-            itemStyle: {
-              color: '#0059ff'
-            },
-            label: {
-              position: 'right',
-            },
-            data: [
-              {type: 'max', name: 'Max'},
-              {type: 'min', name: 'Min'}
-            ]
-          },
-          markLine: {
-            data: [
-              {
-                type: 'average',
-                name: 'Average',
-                lineStyle: {
-                  color: '#0059ff',
-                  width: 0.5
-                },
-              },
-            ]
-          },
-          type: 'line'
         },
         {
+          yAxisIndex: 1,
           name: '股价',
           type: 'line',
           data: trades_values,
-          yAxisIndex: 1,
           smooth: true,
           showSymbol: false,
           lineStyle: {
@@ -303,7 +322,35 @@ const handleLine = (code, days) => {
               },
             ]
           },
-        }
+        },
+        {
+          type: 'bar',
+          xAxisIndex: 1,
+          yAxisIndex: 2,
+          name: '累计净流入',
+          data: volume,
+          smooth: true,
+          showSymbol: false,
+          lineStyle: {
+            width: 2
+          },
+          markPoint: {
+            symbol: 'arrow',
+            symbolRotate: 90,
+            symbolSize: [10, 20],
+            symbolOffset: [10, 0],
+            // itemStyle: {
+            //   color: '#f39509'
+            // },
+            label: {
+              position: 'right',
+            },
+            data: [
+              {type: 'max', name: 'Max'},
+              {type: 'min', name: 'Min'}
+            ]
+          },
+        },
       ]
     };
     chart.setOption(option);

frontend/src/components/stock.vue

@@ -2000,7 +2000,7 @@ function delStockGroup(code,name,groupId){
       </n-flex>
     </template>
   </n-modal>
-  <n-modal v-model:show="modalShow5" :title="data.name+'资金趋势'" style="width: 1000px" :preset="'card'" @after-enter="getMoneyTrendLine">
+  <n-modal v-model:show="modalShow5" :title="data.name+'资金趋势'" style="width: 1000px" :preset="'card'">
     <money-trend :code="data.code" :name="data.name" :days="360" :dark-theme="data.darkTheme" :chart-height="500"></money-trend>
   </n-modal>
 </template>