修改:盈亏曲线展示时间轴,并按区间起止固定可视范围。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
马丁 2026-07-28 23:12:51 +08:00
parent d8a6c22367
commit bd698067f8

View File

@ -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,8 +120,22 @@ async function loadCurve() {
if (chartSeries) {
chartSeries.applyOptions(seriesColors(currentPnl.value))
chartSeries.setData(toLwcData(points))
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')
toastStore.show(msg, 'error')
@ -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;
}