canvas动态绘制折线图

公司的实践课题vue项目，用折线图展示近六个月的收入和支出，以前看到图表，第一个想到的就是从echarts官网调用，但这次导师建议我们用canvas去画，然后去封装，这样可以加大课题难度，同时理解底层的东西。

demo运行效果如图所示：

先分析折线图

主要包括画线、画圆、绘制文字三部分,分别使用canvas提供的以下方法

画线：moveTo()    lineTo()

画圆：arc()

绘制文字：fillText()

绘制坐标系

  // 绘制坐标系
  drawAxis () {
      let ctx = this.ctx,
          w = this.w,
          xlength = this.xlength,     //x轴刻度数
          xl = this.xl,               // x轴起始位置
          xs = this.xs;               // x轴每个单位长度
      // 画x轴
      ctx.moveTo(0, this.lineHeight);
      ctx.lineTo(w, this.lineHeight);
      ctx.strokeStyle = '#C0C0C0';
      ctx.stroke();
      // 画y轴
      for (let i = 0; i < xlength; i++) {