<template>
|
<div class="training-chart">
|
<h3>训练进度</h3>
|
<div class="chart-container">
|
<canvas ref="chartCanvas"></canvas>
|
</div>
|
<div class="metrics">
|
<div class="metric">
|
<span class="label">损失值:</span>
|
<span class="value">{{ loss.toFixed(4) }}</span>
|
</div>
|
<div class="metric">
|
<span class="label">准确率:</span>
|
<span class="value">{{ accuracy.toFixed(2) }}%</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
|
const props = defineProps({
|
loss: {
|
type: Number,
|
default: 0
|
},
|
accuracy: {
|
type: Number,
|
default: 0
|
}
|
})
|
|
const chartCanvas = ref(null)
|
|
onMounted(() => {
|
const canvas = chartCanvas.value
|
const ctx = canvas.getContext('2d')
|
|
// 设置画布尺寸
|
canvas.width = canvas.offsetWidth
|
canvas.height = canvas.offsetHeight
|
|
// 绘制简单的图表
|
drawChart(ctx)
|
})
|
|
function drawChart(ctx) {
|
// 清空画布
|
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
|
|
// 绘制坐标轴
|
ctx.strokeStyle = '#ccc'
|
ctx.lineWidth = 1
|
ctx.beginPath()
|
ctx.moveTo(50, 30)
|
ctx.lineTo(50, ctx.canvas.height - 30)
|
ctx.lineTo(ctx.canvas.width - 30, ctx.canvas.height - 30)
|
ctx.stroke()
|
|
// 绘制示例数据点
|
ctx.strokeStyle = '#1677ff'
|
ctx.lineWidth = 2
|
ctx.beginPath()
|
ctx.moveTo(50, ctx.canvas.height - 30 - (props.loss * 100))
|
ctx.lineTo(100, ctx.canvas.height - 30 - (props.accuracy * 2))
|
ctx.stroke()
|
}
|
</script>
|
|
<style scoped>
|
.training-chart {
|
padding: 20px;
|
border: 1px solid #ddd;
|
border-radius: 8px;
|
background: white;
|
}
|
|
.chart-container {
|
margin: 20px 0;
|
height: 200px;
|
}
|
|
canvas {
|
width: 100%;
|
height: 100%;
|
border: 1px solid #eee;
|
}
|
|
.metrics {
|
display: flex;
|
gap: 20px;
|
}
|
|
.metric {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.label {
|
font-size: 12px;
|
color: #666;
|
}
|
|
.value {
|
font-size: 18px;
|
font-weight: bold;
|
color: #1677ff;
|
}
|
</style>
|
