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>