diff --git a/src/components/PnlCurveCard.vue b/src/components/PnlCurveCard.vue index 588ea50..2777afd 100644 --- a/src/components/PnlCurveCard.vue +++ b/src/components/PnlCurveCard.vue @@ -50,6 +50,7 @@ import { LineType, type IChartApi, type ISeriesApi, + type UTCTimestamp, } from 'lightweight-charts' import { PNL_CURVE_RANGES, @@ -77,6 +78,20 @@ let chartSeries: ISeriesApi<'Area'> | null = null const LINE_UP = '#2E5CFF' const LINE_DOWN = '#dc2626' +/** 与 toLwcData 一致:把毫秒时间戳转为图表本地显示用的 UTCTimestamp */ +function toChartTime(tsMs: number): UTCTimestamp { + const d = new Date(tsMs) + return (Date.UTC( + d.getFullYear(), + d.getMonth(), + d.getDate(), + d.getHours(), + d.getMinutes(), + d.getSeconds(), + d.getMilliseconds(), + ) / 1000) as UTCTimestamp +} + function seriesColors(pnl: number) { const color = pnl >= 0 ? LINE_UP : LINE_DOWN return { @@ -105,7 +120,21 @@ async function loadCurve() { if (chartSeries) { chartSeries.applyOptions(seriesColors(currentPnl.value)) chartSeries.setData(toLwcData(points)) - chartInstance?.timeScale().fitContent() + const startTs = data.startTs + const endTs = data.endTs + if ( + chartInstance && + Number.isFinite(startTs) && + Number.isFinite(endTs) && + endTs > startTs + ) { + chartInstance.timeScale().setVisibleRange({ + from: toChartTime(startTs), + to: toChartTime(endTs), + }) + } else { + chartInstance?.timeScale().fitContent() + } } } catch (e) { const msg = e instanceof Error ? e.message : t('wallet.pnlCurve.loadFailed') @@ -125,7 +154,7 @@ function initChart() { const el = chartRef.value chartInstance = createChart(el, { width: el.clientWidth, - height: 140, + height: 160, layout: { background: { color: '#ffffff' }, textColor: '#9ca3af', @@ -136,7 +165,12 @@ function initChart() { grid: { vertLines: { visible: false }, horzLines: { visible: false } }, leftPriceScale: { visible: false }, rightPriceScale: { visible: false, borderVisible: false }, - timeScale: { visible: false, borderVisible: false }, + timeScale: { + visible: true, + borderVisible: false, + timeVisible: true, + secondsVisible: false, + }, handleScroll: false, handleScale: false, crosshair: { @@ -157,7 +191,7 @@ function initChart() { function handleResize() { if (chartInstance && chartRef.value) { - chartInstance.resize(chartRef.value.clientWidth, 140) + chartInstance.resize(chartRef.value.clientWidth, 160) } } @@ -283,7 +317,7 @@ onUnmounted(() => { .pnl-chart { position: relative; width: 100%; - height: 140px; + height: 160px; margin-top: auto; }