定义折线图的长宽

在需要传参的时候，在开始定义绘制前，用private定义折线的总长和总宽，还有定义横向或纵向的基准点数组，都用number型。如：

private lineHeight: number = 40;
private lineWidth: number = 750;
private pointArr: number[] = [20, 20, 20, 20, 20];

折线图使用的组件

折线图绘制用到Polyline组件，point包含一个数组，需要用到多个数组的将多个数组用中括号括起来视为一个数组，fillOpacity设置填充区透明度，stroke设置颜色，strokeWidth设置宽度，strokeLineJoin设置拐角为圆弧，strokeLineCap设置两端为圆弧。

Polyline({ width: this.lineWidth, height: this.lineHeight })
  .points([[0,this.pointArr[0]],
    [(this.lineWidth * 0.5).toString(),this.pointArr[1]],[(this.lineWidth * 0.4).toString(),this.pointArr[2]],
    [(this.lineWidth * 0.6).toString(),this.pointArr[3]],[(this.lineWidth * 0.3).toString(),this.pointArr[4]]])
  .fillOpacity(0)
  .stroke(Color.Blue)
  .strokeWidth(3)

 // 设置折线拐角处为圆弧
.strokeLineJoin(LineJoinStyle.Round)
  // 设置折线两端为半圆
.strokeLineCap(LineCapStyle.Round)

接口

width和height

Polyline({ width: this.lineWidth, height: this.lineHeight })

点位计算

在计算点位的时候，自定义一个新的函数，利用if设计需要的条件，利用for循环计算，在for循环中可以利用if，else，定义计算条件，在逻辑运算中用let自定义变量。如：

calculatePoint() {
  if (this.weatherUiModel.hourlyTemp.length > 0) {
    for (var i = 0; i < 5; i++) {
      let tempArg = parseInt(this.weatherUiModel.hourlyTemp[0].temp)
      if (i == 0) {
        this.pointArr[i] = this.lineHeight - tempArg
      } else {
        this.pointArr[i] = this.lineHeight -
        (((parseInt(this.weatherUiModel.hourlyTemp[i].temp) - tempArg) * 10) +
        parseInt(this.weatherUiModel.hourlyTemp[i].temp))
      }
    }
  }
}

((parseInt(this.weatherUiModel.hourlyTemp[i].temp) - tempArg) * 10)通过改变乘以的数字的大小可改变折线的变化幅度。

图片