update
This commit is contained in:
aaron
parent
4a357b56c0
commit
55202f959b
@ -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(() => {
|
||||||
this.renderCharts();
|
setTimeout(() => {
|
||||||
|
this.renderCharts();
|
||||||
|
}, 100);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
@ -1928,154 +1930,198 @@
|
|||||||
// 渲染净值曲线图
|
// 渲染净值曲线图
|
||||||
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);
|
||||||
|
|
||||||
this.balanceChart = new Chart(ctx, {
|
console.log('Rendering balance chart:', { labels, balanceData });
|
||||||
type: 'line',
|
|
||||||
data: {
|
try {
|
||||||
labels: labels,
|
this.balanceChart = new Chart(ctx, {
|
||||||
datasets: [{
|
type: 'line',
|
||||||
label: '账户净值',
|
data: {
|
||||||
data: balanceData,
|
labels: labels,
|
||||||
borderColor: '#00ff41',
|
datasets: [{
|
||||||
backgroundColor: 'rgba(0, 255, 65, 0.1)',
|
label: '账户净值',
|
||||||
borderWidth: 2,
|
data: balanceData,
|
||||||
fill: true,
|
borderColor: '#00ff41',
|
||||||
tension: 0.4,
|
backgroundColor: 'rgba(0, 255, 65, 0.1)',
|
||||||
pointRadius: 2,
|
borderWidth: 2,
|
||||||
pointHoverRadius: 5
|
fill: true,
|
||||||
}]
|
tension: 0.4,
|
||||||
},
|
pointRadius: 2,
|
||||||
options: {
|
pointHoverRadius: 5
|
||||||
responsive: true,
|
}]
|
||||||
maintainAspectRatio: false,
|
},
|
||||||
plugins: {
|
options: {
|
||||||
legend: {
|
responsive: true,
|
||||||
display: false
|
maintainAspectRatio: false,
|
||||||
},
|
plugins: {
|
||||||
tooltip: {
|
legend: {
|
||||||
mode: 'index',
|
display: false
|
||||||
intersect: false,
|
},
|
||||||
callbacks: {
|
tooltip: {
|
||||||
label: function(context) {
|
mode: 'index',
|
||||||
return '净值: $' + context.parsed.y.toFixed(2);
|
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: {
|
scales: {
|
||||||
display: true,
|
x: {
|
||||||
grid: {
|
display: true,
|
||||||
color: 'rgba(255, 255, 255, 0.1)'
|
grid: {
|
||||||
|
color: 'rgba(255, 255, 255, 0.1)'
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
color: 'rgba(255, 255, 255, 0.6)',
|
||||||
|
maxRotation: 45,
|
||||||
|
minRotation: 45
|
||||||
|
}
|
||||||
},
|
},
|
||||||
ticks: {
|
y: {
|
||||||
color: 'rgba(255, 255, 255, 0.6)',
|
display: true,
|
||||||
callback: function(value) {
|
grid: {
|
||||||
return '$' + value.toFixed(0);
|
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() {
|
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');
|
||||||
|
|
||||||
this.returnsChart = new Chart(ctx, {
|
console.log('Rendering returns chart:', { labels, returnsData });
|
||||||
type: 'bar',
|
|
||||||
data: {
|
try {
|
||||||
labels: labels,
|
this.returnsChart = new Chart(ctx, {
|
||||||
datasets: [{
|
type: 'bar',
|
||||||
label: '日收益率',
|
data: {
|
||||||
data: returnsData,
|
labels: labels,
|
||||||
backgroundColor: colors,
|
datasets: [{
|
||||||
borderColor: colors,
|
label: '日收益率',
|
||||||
borderWidth: 1
|
data: returnsData,
|
||||||
}]
|
backgroundColor: colors,
|
||||||
},
|
borderColor: colors,
|
||||||
options: {
|
borderWidth: 1
|
||||||
responsive: true,
|
}]
|
||||||
maintainAspectRatio: false,
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
callbacks: {
|
|
||||||
label: function(context) {
|
|
||||||
const value = context.parsed.y;
|
|
||||||
return '收益率: ' + (value >= 0 ? '+' : '') + value.toFixed(2) + '%';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
scales: {
|
options: {
|
||||||
x: {
|
responsive: true,
|
||||||
display: true,
|
maintainAspectRatio: false,
|
||||||
grid: {
|
plugins: {
|
||||||
|
legend: {
|
||||||
display: false
|
display: false
|
||||||
},
|
},
|
||||||
ticks: {
|
tooltip: {
|
||||||
color: 'rgba(255, 255, 255, 0.6)',
|
callbacks: {
|
||||||
maxRotation: 45,
|
label: function(context) {
|
||||||
minRotation: 45
|
const value = context.parsed.y;
|
||||||
|
return '收益率: ' + (value >= 0 ? '+' : '') + value.toFixed(2) + '%';
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
y: {
|
scales: {
|
||||||
display: true,
|
x: {
|
||||||
grid: {
|
display: true,
|
||||||
color: 'rgba(255, 255, 255, 0.1)'
|
grid: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
color: 'rgba(255, 255, 255, 0.6)',
|
||||||
|
maxRotation: 45,
|
||||||
|
minRotation: 45
|
||||||
|
}
|
||||||
},
|
},
|
||||||
ticks: {
|
y: {
|
||||||
color: 'rgba(255, 255, 255, 0.6)',
|
display: true,
|
||||||
callback: function(value) {
|
grid: {
|
||||||
return value.toFixed(1) + '%';
|
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: {
|
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(() => {
|
||||||
this.renderCharts();
|
setTimeout(() => {
|
||||||
|
this.renderCharts();
|
||||||
|
}, 100);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user