update
This commit is contained in:
aaron
parent
4a357b56c0
commit
55202f959b
@ -1907,9 +1907,11 @@
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
this.dailyReturns = data.data;
|
||||
// 等待 DOM 更新后渲染图表
|
||||
// 等待 DOM 更新后渲染图表，添加额外延迟确保 canvas 完全渲染
|
||||
this.$nextTick(() => {
|
||||
this.renderCharts();
|
||||
setTimeout(() => {
|
||||
this.renderCharts();
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
@ -1928,154 +1930,198 @@
|
||||
// 渲染净值曲线图
|
||||
renderBalanceChart() {
|
||||
const canvas = document.getElementById('balanceChart');
|
||||
if (!canvas) return;
|
||||
if (!canvas) {
|
||||
console.warn('balanceChart canvas not found');
|
||||
return;
|
||||
}
|
||||
|
||||
// 销毁已存在的图表
|
||||
if (this.balanceChart) {
|
||||
this.balanceChart.destroy();
|
||||
this.balanceChart = null;
|
||||
}
|
||||
|
||||
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 balanceData = this.dailyReturns.map(d => d.balance);
|
||||
|
||||
this.balanceChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: '账户净值',
|
||||
data: balanceData,
|
||||
borderColor: '#00ff41',
|
||||
backgroundColor: 'rgba(0, 255, 65, 0.1)',
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 2,
|
||||
pointHoverRadius: 5
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
return '净值: $' + context.parsed.y.toFixed(2);
|
||||
console.log('Rendering balance chart:', { labels, balanceData });
|
||||
|
||||
try {
|
||||
this.balanceChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: '账户净值',
|
||||
data: balanceData,
|
||||
borderColor: '#00ff41',
|
||||
backgroundColor: 'rgba(0, 255, 65, 0.1)',
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 2,
|
||||
pointHoverRadius: 5
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
return '净值: $' + context.parsed.y.toFixed(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
maxRotation: 45,
|
||||
minRotation: 45
|
||||
}
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
grid: {
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
maxRotation: 45,
|
||||
minRotation: 45
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
callback: function(value) {
|
||||
return '$' + value.toFixed(0);
|
||||
y: {
|
||||
display: true,
|
||||
grid: {
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
callback: function(value) {
|
||||
return '$' + value.toFixed(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
mode: 'nearest',
|
||||
axis: 'x',
|
||||
intersect: false
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
mode: 'nearest',
|
||||
axis: 'x',
|
||||
intersect: false
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
console.log('Balance chart rendered successfully');
|
||||
} catch (e) {
|
||||
console.error('Error rendering balance chart:', e);
|
||||
}
|
||||
},
|
||||
|
||||
// 渲染收益率柱状图
|
||||
renderReturnsChart() {
|
||||
const canvas = document.getElementById('returnsChart');
|
||||
if (!canvas) return;
|
||||
if (!canvas) {
|
||||
console.warn('returnsChart canvas not found');
|
||||
return;
|
||||
}
|
||||
|
||||
// 销毁已存在的图表
|
||||
if (this.returnsChart) {
|
||||
this.returnsChart.destroy();
|
||||
this.returnsChart = null;
|
||||
}
|
||||
|
||||
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 returnsData = this.dailyReturns.map(d => d.return_percent);
|
||||
const colors = returnsData.map(v => v >= 0 ? '#00ff41' : '#ff4444');
|
||||
|
||||
this.returnsChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: '日收益率',
|
||||
data: returnsData,
|
||||
backgroundColor: colors,
|
||||
borderColor: colors,
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
const value = context.parsed.y;
|
||||
return '收益率: ' + (value >= 0 ? '+' : '') + value.toFixed(2) + '%';
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log('Rendering returns chart:', { labels, returnsData });
|
||||
|
||||
try {
|
||||
this.returnsChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: '日收益率',
|
||||
data: returnsData,
|
||||
backgroundColor: colors,
|
||||
borderColor: colors,
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
maxRotation: 45,
|
||||
minRotation: 45
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
const value = context.parsed.y;
|
||||
return '收益率: ' + (value >= 0 ? '+' : '') + value.toFixed(2) + '%';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
grid: {
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
maxRotation: 45,
|
||||
minRotation: 45
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
callback: function(value) {
|
||||
return value.toFixed(1) + '%';
|
||||
y: {
|
||||
display: true,
|
||||
grid: {
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
callback: function(value) {
|
||||
return value.toFixed(1) + '%';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
console.log('Returns chart rendered successfully');
|
||||
} catch (e) {
|
||||
console.error('Error rendering returns chart:', e);
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -2161,9 +2207,11 @@
|
||||
if (this.dailyReturns.length === 0) {
|
||||
this.fetchDailyReturns();
|
||||
} else {
|
||||
// 数据已存在，需要重新渲染图表
|
||||
// 数据已存在，需要重新渲染图表，添加延迟确保 DOM 显示
|
||||
this.$nextTick(() => {
|
||||
this.renderCharts();
|
||||
setTimeout(() => {
|
||||
this.renderCharts();
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user