mirror of
https://github.com/ArvinLovegood/go-stock.git
synced 2025-07-19 00:00:09 +08:00
feat(stock):优化股票迷你图刷新逻辑
- 在 Stock 组件中添加 lastPrice 属性,传递当前价格给 StockSparkLine 组件 - 在 StockSparkLine 组件中接收 lastPrice 属性,并使用它来更新 K 线图数据 - 优化 StockSparkLine 组件的渲染逻辑,使用 onMounted 和 watchEffect
This commit is contained in:
parent
f0314187e5
commit
3ba18e8ef2
@ -1815,7 +1815,7 @@ function searchStockReport(stockCode) {
|
||||
</n-text>
|
||||
</n-gi>
|
||||
<n-gi :span="6">
|
||||
<stock-spark-line :open-price="result['昨日收盘价']" :stock-code="result['股票代码']" :stock-name="result['股票名称']" ></stock-spark-line>
|
||||
<stock-spark-line :last-price="result['当前价格']" :open-price="result['昨日收盘价']" :stock-code="result['股票代码']" :stock-name="result['股票名称']" ></stock-spark-line>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
<n-grid :cols="2" :y-gap="4" :x-gap="4">
|
||||
|
@ -1,8 +1,8 @@
|
||||
<script setup>
|
||||
import {onMounted,onBeforeMount, ref} from "vue";
|
||||
import {onMounted, onBeforeMount, ref, watchEffect} from "vue";
|
||||
import * as echarts from 'echarts';
|
||||
import {GetStockMinutePriceLineData} from "../../wailsjs/go/main/App"; // 如果您使用多个组件,请将此样式导入放在您的主文件中
|
||||
const {stockCode,stockName,openPrice,darkTheme} = defineProps({
|
||||
const {stockCode,stockName,lastPrice,openPrice,darkTheme} = defineProps({
|
||||
stockCode: {
|
||||
type: String,
|
||||
default: ""
|
||||
@ -11,6 +11,10 @@ const {stockCode,stockName,openPrice,darkTheme} = defineProps({
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
lastPrice: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
openPrice: {
|
||||
type: Number,
|
||||
default: 0
|
||||
@ -24,6 +28,7 @@ const {stockCode,stockName,openPrice,darkTheme} = defineProps({
|
||||
const chartRef=ref();
|
||||
|
||||
function setChartData(chart) {
|
||||
//console.log("setChartData")
|
||||
GetStockMinutePriceLineData(stockCode, stockName).then(result => {
|
||||
//console.log("GetStockMinutePriceLineData",result)
|
||||
const priceData = result.priceData
|
||||
@ -31,7 +36,6 @@ function setChartData(chart) {
|
||||
let price = []
|
||||
let min = 0
|
||||
let max = 0
|
||||
let lastPrice = priceData[priceData.length - 1].price
|
||||
for (let i = 0; i < priceData.length; i++) {
|
||||
category.push(priceData[i].time)
|
||||
price.push(priceData[i].price)
|
||||
@ -112,16 +116,20 @@ function setChartData(chart) {
|
||||
chart.setOption(option);
|
||||
})
|
||||
}
|
||||
const chart =ref( null)
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
const chart = echarts.init( document.getElementById('sparkLine'+stockCode));
|
||||
setChartData(chart);
|
||||
|
||||
// setInterval(() => {
|
||||
// setChartData(chart);
|
||||
// }, 1000 * 5 );
|
||||
chart.value = echarts.init( document.getElementById('sparkLine'+stockCode));
|
||||
setChartData(chart.value);
|
||||
})
|
||||
|
||||
|
||||
watchEffect(() => {
|
||||
//console.log(stockName,'lastPrice变化为:', lastPrice)
|
||||
setChartData(chart.value);
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div style="height: 20px;width: 100%" :id="'sparkLine'+stockCode">
|
||||
|
Loading…
x
Reference in New Issue
Block a user