From 8b510bce944c7c963916a8638bf7e1dd9e342f21 Mon Sep 17 00:00:00 2001 From: ArvinLovegood Date: Fri, 16 May 2025 17:26:34 +0800 Subject: [PATCH] =?UTF-8?q?refactor(frontend):=E4=BC=98=E5=8C=96=E8=B5=84?= =?UTF-8?q?=E9=87=91=E8=B6=8B=E5=8A=BF=E5=9B=BE=E8=A1=A8=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 优化图表展示效果，增加累计净流入和股价的显示 - 调整图表样式，增加暗黑主题支持 - 优化数据处理逻辑，提高图表准确性 -调整模态框样式，移除不必要的属性 --- frontend/src/components/moneyTrend.vue | 239 +++++++++++++++---------- frontend/src/components/stock.vue | 2 +- 2 files changed, 144 insertions(+), 97 deletions(-) diff --git a/frontend/src/components/moneyTrend.vue b/frontend/src/components/moneyTrend.vue index b57f294..149fb02 100644 --- a/frontend/src/components/moneyTrend.vue +++ b/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 - volume.push(b) + let b = Number(Number(result[i].netamount) + Number(result[i - 1].netamount)) / 10000 + 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, - label: { - backgroundColor: '#505765' + lineStyle: { + color: '#376df4', + 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, - '累计净流入': false, + '主力当日净流入': true, + '累计净流入': true, '股价': true, }, //orient: 'vertical', textStyle: { - color: darkTheme ? '#ccc' : '#456' + color: darkTheme ? 'rgb(253,252,252)' : '#456' }, right: 150, }, dataZoom: [ { - show: true, - realtime: true, - start: 70, + type: 'inside', + xAxisIndex: [0, 1], + start: 86, end: 100 }, { - type: 'inside', - realtime: true, + show: true, + xAxisIndex: [0, 1], + type: 'slider', + top: '90%', start: 86, end: 100 } ], - xAxis: { - type: 'category', - data: categoryData - }, + grid: [ + { + 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: { - symbol: 'arrow', - symbolRotate: 90, - symbolSize: [10, 20], - symbolOffset: [10, 0], - itemStyle: { - color: '#0d7dfc' - }, - label: { - position: 'right', - }, - data: [ - {type: 'max', name: 'Max'}, - {type: 'min', name: 'Min'} - ] - }, - markLine: { - data: [ - { - type: 'average', - name: 'Average', - lineStyle: { - color: '#0077ff', - width: 0.5 - }, - }, - ] - }, - type: 'line' - }, - { - 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' + // markPoint: { + // symbol: 'arrow', + // symbolRotate: 90, + // symbolSize: [10, 20], + // symbolOffset: [10, 0], + // itemStyle: { + // color: '#0d7dfc' + // }, + // label: { + // position: 'right', + // }, + // data: [ + // {type: 'max', name: 'Max'}, + // {type: 'min', name: 'Min'} + // ] + // }, + // markLine: { + // data: [ + // { + // type: 'average', + // name: 'Average', + // lineStyle: { + // color: '#0077ff', + // width: 0.5 + // }, + // }, + // ] + // }, + type: 'bar' }, { + 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); diff --git a/frontend/src/components/stock.vue b/frontend/src/components/stock.vue index e5c8c1d..57f3748 100644 --- a/frontend/src/components/stock.vue +++ b/frontend/src/components/stock.vue @@ -2000,7 +2000,7 @@ function delStockGroup(code,name,groupId){ - +