|
@@ -31,7 +31,7 @@ export default {
|
|
|
ctx.scale(1, 1);
|
|
|
|
|
|
let canvasWidth = this.canvas.width;
|
|
|
- let canvasWidth2 = canvasWidth - 20
|
|
|
+ let canvasWidth2 = canvasWidth - 20;
|
|
|
let canvasHeight = this.canvas.height;
|
|
|
ctx.imageSmoothingEnabled = false;
|
|
|
ctx.lineWidth = 1;
|
|
@@ -55,7 +55,7 @@ export default {
|
|
|
ctx.font = `${fontSize}px serif`;
|
|
|
ctx.fillText("学生", 128, canvasHeight - 7);
|
|
|
let sum = this.data.data.reduce((pre, cur) => (pre += cur.value), 0);
|
|
|
- console.log(sum)
|
|
|
+ console.log(sum);
|
|
|
// 当前x位置的起始点
|
|
|
let currentX = 10;
|
|
|
// 计算并绘制每个区域
|
|
@@ -83,30 +83,43 @@ export default {
|
|
|
// });
|
|
|
|
|
|
let interval = parseFloat((this.step / (sum / canvasWidth2)).toFixed(2));
|
|
|
+ let _lastI = 0;
|
|
|
//绘制竖线
|
|
|
for (let i = 0; i < canvasWidth2; i += interval) {
|
|
|
ctx.beginPath();
|
|
|
- ctx.strokeStyle = '#BFBFBF'
|
|
|
- ctx.moveTo(i==0?10:i, canvasHeight - 70);
|
|
|
- ctx.lineTo(i==0?10:i, canvasHeight - 55);
|
|
|
+ ctx.strokeStyle = "#BFBFBF";
|
|
|
+ ctx.moveTo(i == 0 ? 10 : i, canvasHeight - 70);
|
|
|
+ ctx.lineTo(i == 0 ? 10 : i, canvasHeight - 55);
|
|
|
ctx.stroke();
|
|
|
- ctx.fillStyle = "#868686";
|
|
|
- let timeLabel = (((i / canvasWidth2) * sum)/60).toFixed(0); // 时间标识计算
|
|
|
- ctx.font = `${fontSize}px serif`;
|
|
|
- if(i==0){
|
|
|
- ctx.fillText(`${timeLabel}min`, i+10, canvasHeight - 40);
|
|
|
- }else if((i+interval)> canvasWidth2){
|
|
|
- ctx.fillText(`${timeLabel}min`, i - 20, canvasHeight - 40);
|
|
|
- }else{
|
|
|
- ctx.fillText(`${timeLabel}min`, i-15, canvasHeight - 40);
|
|
|
- }
|
|
|
+ ctx.fillStyle = "#868686";
|
|
|
+ let timeLabel = (((i / canvasWidth2) * sum) / 60).toFixed(0); // 时间标识计算
|
|
|
+ ctx.font = `${fontSize}px serif`;
|
|
|
+ if (i == 0) {
|
|
|
+ ctx.fillText(`${timeLabel}min`, i + 10, canvasHeight - 40);
|
|
|
+ } else if (i + interval >= canvasWidth2) {
|
|
|
+ ctx.fillText(`${timeLabel}min`, i - 20, canvasHeight - 40);
|
|
|
+ } else {
|
|
|
+ ctx.fillText(`${timeLabel}min`, i - 15, canvasHeight - 40);
|
|
|
+ }
|
|
|
+ _lastI = i;
|
|
|
+ }
|
|
|
+ if (canvasWidth2 - _lastI >60) {
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.strokeStyle = "#BFBFBF";
|
|
|
+ ctx.moveTo(canvasWidth2 + 10, canvasHeight - 70);
|
|
|
+ ctx.lineTo(canvasWidth2 + 10, canvasHeight - 55);
|
|
|
+ ctx.stroke();
|
|
|
+ ctx.fillStyle = "#868686";
|
|
|
+ let timeLabel = (sum / 60).toFixed(0); // 时间标识计算
|
|
|
+ ctx.font = `${fontSize}px serif`;
|
|
|
+ ctx.fillText(`${timeLabel}min`, canvasWidth2 - 20, canvasHeight - 40);
|
|
|
}
|
|
|
|
|
|
- ctx.beginPath();
|
|
|
- ctx.strokeStyle = '#BFBFBF'
|
|
|
- ctx.moveTo(10, canvasHeight - 55);
|
|
|
- ctx.lineTo(canvasWidth2+10, canvasHeight - 55);
|
|
|
- ctx.stroke();
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.strokeStyle = "#BFBFBF";
|
|
|
+ ctx.moveTo(10, canvasHeight - 55);
|
|
|
+ ctx.lineTo(canvasWidth2 + 10, canvasHeight - 55);
|
|
|
+ ctx.stroke();
|
|
|
},
|
|
|
drawRoundedRect(ctx, x, y, width, height, radius) {
|
|
|
// 限制 radius 的最大值,防止它超过矩形的宽度或高度的一半
|
|
@@ -130,22 +143,28 @@ export default {
|
|
|
ctx.closePath();
|
|
|
ctx.fill(); // 填充颜色
|
|
|
},
|
|
|
- formatTime(seconds) {
|
|
|
- let h = Math.floor(seconds / 3600); // 小时
|
|
|
- let m = Math.floor((seconds % 3600) / 60); // 分钟
|
|
|
- let s = Math.floor(seconds % 60); // 秒数
|
|
|
-
|
|
|
- // 格式化为两位数
|
|
|
- let formattedTime;
|
|
|
- if (h > 0) {
|
|
|
- // 如果有小时部分,格式化为 hh:mm:ss
|
|
|
- formattedTime = `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
|
|
|
- } else {
|
|
|
- // 否则,格式化为 mm:ss
|
|
|
- formattedTime = `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
|
|
|
- }
|
|
|
- return formattedTime;
|
|
|
-}
|
|
|
+ formatTime(seconds) {
|
|
|
+ let h = Math.floor(seconds / 3600); // 小时
|
|
|
+ let m = Math.floor((seconds % 3600) / 60); // 分钟
|
|
|
+ let s = Math.floor(seconds % 60); // 秒数
|
|
|
+
|
|
|
+ // 格式化为两位数
|
|
|
+ let formattedTime;
|
|
|
+ if (h > 0) {
|
|
|
+ // 如果有小时部分,格式化为 hh:mm:ss
|
|
|
+ formattedTime = `${h
|
|
|
+ .toString()
|
|
|
+ .padStart(2, "0")}:${m
|
|
|
+ .toString()
|
|
|
+ .padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
|
|
|
+ } else {
|
|
|
+ // 否则,格式化为 mm:ss
|
|
|
+ formattedTime = `${m
|
|
|
+ .toString()
|
|
|
+ .padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
|
|
|
+ }
|
|
|
+ return formattedTime;
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
this.init();
|