This commit is contained in:
aaron 2026-02-22 09:36:42 +08:00
parent 4a357b56c0
commit 55202f959b

View File

@ -1907,9 +1907,11 @@
const data = await response.json(); const data = await response.json();
if (data.success) { if (data.success) {
this.dailyReturns = data.data; this.dailyReturns = data.data;
// 等待 DOM 更新后渲染图表 // 等待 DOM 更新后渲染图表,添加额外延迟确保 canvas 完全渲染
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => {
this.renderCharts(); this.renderCharts();
}, 100);
}); });
} }
} catch (e) { } catch (e) {
@ -1928,17 +1930,35 @@
// 渲染净值曲线图 // 渲染净值曲线图
renderBalanceChart() { renderBalanceChart() {
const canvas = document.getElementById('balanceChart'); const canvas = document.getElementById('balanceChart');
if (!canvas) return; if (!canvas) {
console.warn('balanceChart canvas not found');
return;
}
// 销毁已存在的图表 // 销毁已存在的图表
if (this.balanceChart) { if (this.balanceChart) {
this.balanceChart.destroy(); this.balanceChart.destroy();
this.balanceChart = null;
} }
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
if (!ctx) {
console.warn('Cannot get 2d context');
return;
}
// 确保有数据
if (!this.dailyReturns || this.dailyReturns.length === 0) {
console.warn('No daily returns data');
return;
}
const labels = this.dailyReturns.map(d => d.date); const labels = this.dailyReturns.map(d => d.date);
const balanceData = this.dailyReturns.map(d => d.balance); const balanceData = this.dailyReturns.map(d => d.balance);
console.log('Rendering balance chart:', { labels, balanceData });
try {
this.balanceChart = new Chart(ctx, { this.balanceChart = new Chart(ctx, {
type: 'line', type: 'line',
data: { data: {
@ -2004,23 +2024,45 @@
} }
} }
}); });
console.log('Balance chart rendered successfully');
} catch (e) {
console.error('Error rendering balance chart:', e);
}
}, },
// 渲染收益率柱状图 // 渲染收益率柱状图
renderReturnsChart() { renderReturnsChart() {
const canvas = document.getElementById('returnsChart'); const canvas = document.getElementById('returnsChart');
if (!canvas) return; if (!canvas) {
console.warn('returnsChart canvas not found');
return;
}
// 销毁已存在的图表 // 销毁已存在的图表
if (this.returnsChart) { if (this.returnsChart) {
this.returnsChart.destroy(); this.returnsChart.destroy();
this.returnsChart = null;
} }
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
if (!ctx) {
console.warn('Cannot get 2d context');
return;
}
// 确保有数据
if (!this.dailyReturns || this.dailyReturns.length === 0) {
console.warn('No daily returns data');
return;
}
const labels = this.dailyReturns.map(d => d.date); const labels = this.dailyReturns.map(d => d.date);
const returnsData = this.dailyReturns.map(d => d.return_percent); const returnsData = this.dailyReturns.map(d => d.return_percent);
const colors = returnsData.map(v => v >= 0 ? '#00ff41' : '#ff4444'); const colors = returnsData.map(v => v >= 0 ? '#00ff41' : '#ff4444');
console.log('Rendering returns chart:', { labels, returnsData });
try {
this.returnsChart = new Chart(ctx, { this.returnsChart = new Chart(ctx, {
type: 'bar', type: 'bar',
data: { data: {
@ -2076,6 +2118,10 @@
} }
} }
}); });
console.log('Returns chart rendered successfully');
} catch (e) {
console.error('Error rendering returns chart:', e);
}
} }
}, },
computed: { computed: {
@ -2161,9 +2207,11 @@
if (this.dailyReturns.length === 0) { if (this.dailyReturns.length === 0) {
this.fetchDailyReturns(); this.fetchDailyReturns();
} else { } else {
// 数据已存在,需要重新渲染图表 // 数据已存在,需要重新渲染图表,添加延迟确保 DOM 显示
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => {
this.renderCharts(); this.renderCharts();
}, 100);
}); });
} }
} }