Vue统计图表的网格和坐标轴优化技巧

<template>  <div>    <canvas ref="gridCanvas"></canvas>  </div></template><script>export default {  mounted() {    this.drawGrid();  },  methods: {    drawGrid() {      const canvas = this.$refs.gridCanvas;      const ctx = canvas.getContext('2d');      const width = canvas.width;      const height = canvas.height;            ctx.strokeStyle = '#eaeaea'; // 网格线颜色      ctx.lineWidth = 1; // 网格线宽度            // 绘制虚线网格      for(let x = 0.5; x < width; x += 20) {        ctx.moveTo(x, 0);        ctx.lineTo(x, height);      }      for(let y = 0.5; y < height; y += 20) {        ctx.moveTo(0, y);        ctx.lineTo(width, y);      }            ctx.stroke();    }  }}</script><style scoped>canvas {  width: 100%;  height: 100%;}</style>

<template>  <div>    <canvas ref="axisCanvas"></canvas>  </div></template><script>export default {  data() {    return {      startX: 0,      startY: 0,      endX: 200,      endY: 200,    };  },  mounted() {    this.drawAxis();  },  methods: {    drawAxis() {      const canvas = this.$refs.axisCanvas;      const ctx = canvas.getContext('2d');      const width = canvas.width;      const height = canvas.height;            ctx.strokeStyle = '#000'; // 坐标轴线颜色      ctx.lineWidth = 2; // 坐标轴线宽度      ctx.setLineDash([5, 5]); // 设置虚线效果            ctx.beginPath();      ctx.moveTo(this.startX, height);      ctx.lineTo(this.startX, this.startY);      ctx.lineTo(width, this.startY);      ctx.stroke();            // 模拟坐标轴动画效果      const animate = () => {        if (this.startX < this.endX) {          this.startX += 1;          requestAnimationFrame(animate);        }        if (this.startY < this.endY) {          this.startY += 1;          requestAnimationFrame(animate);        }        ctx.clearRect(0, 0, width, height);        this.drawAxis();      };      animate();    }  }}</script><style scoped>canvas {  width: 100%;  height: 100%;}</style>