前言

本篇博文使用折线组件Polyline来绘制股票实施走势图，通过本篇博客，你可以了解到@State、定时器、Polyline的作用。同时可以加深对自定义组件的生命周期的理解。

Polyline

模拟股票的分时图功能实现思路如下

• 每段折线都有一对起始坐标点（X1,Y1）——>(X2,Y2)。连续的折线图就需要n个坐标点构成（X1,Y1）——>(X2,Y2)…——>(Xn,Yn).
• 每个坐标点都是一个Array数组：Array<number> = [X,Y]
• 连续的坐标点则是数组里面包含若干个数组坐标点：Array<Array<number>> =[ [X1,Y1], [X2,Y2],[X3,Y3],......,[Xn,Yn]]效果如下图：
• Polyline的points方法就是用来接收折线经过坐标点列表Array<Array<number>>。
  _
  结合以上思路，我们就可以使用定时器，每秒往坐标点集合里新增一个坐标点即可。

初始化坐标集合

我们使用@State标签初始化坐标点集合，当集合发生变化时，就会重绘页面。

 //初始化坐标点集合@State positions: Array<Array<number>> = [[0, 0], [5, 10], [6, 20]];

开启定时器

根据组件的生命周期（见下图），我们可以在aboutToAppear里面开启一个定时器，在aboutToDisapper里面销毁定时器。

通过setInterval方法开启计时器，该方法会返回一个Id,通过该Id可以关闭定时器。每个一秒就获取坐标集合里前一个坐标点的X坐标，然后以该坐标为基准根据随机数生成一个新的X坐标，再生成一个新的随机Y坐标即可。代码如下：

  private intervalId = -1aboutToAppear(): void {this.intervalId = setInterval(() => {//前一个坐标点的X坐标let lastPositionX = this.positions[this.positions.length-1][0];//新的坐标点(newX，newY)let newX: number = lastPositionX + Math.random() * 15let newY: number = Math.random() * 200;let newPosition: Array<number> = [newX,newY];//追加新坐标点，刷新页面this.positions.push(newPosition)}, 1000);}//关闭计时器aboutToDisappear(): void {clearInterval(this.intervalId)}

具体效果见如下视频：

全部源码

@Entry
@Component
struct Index {//初始化坐标@State positions: Array<Array<number>> = [[0, 0], [5, 10], [6, 20]];private intervalId = -1aboutToAppear(): void {this.intervalId = setInterval(() => {//前一个坐标点的X坐标let lastPositionX = this.positions[this.positions.length-1][0];//新的坐标点(newX，newY)let newX: number = lastPositionX + Math.random() * 15let newY: number = Math.random() * 200;let newPosition: Array<number> = [newX,newY];this.positions.push(newPosition)}, 1000);}build() {Row() {Polyline().points(this.positions).stroke(Color.Red).strokeWidth(1).borderStyle(BorderStyle.Dashed).antiAlias(true).fillOpacity(0).height("50%").width("100%")}.justifyContent(FlexAlign.Center).height("100%").width("100%")}aboutToDisappear(): void {clearInterval(this.intervalId)}
}

参考资料

Timer定时器
Polyline API
@State组件
@entry和@Component的生命周期