项目背景

在API 9后官方推出了ohpm工具，在这里小编推荐使用ohpm进行包管理，而不是npm进行的管理。
由于当前基本所有的文章都是基于npm构建的，所以新学习本地库开发的小伙伴直接看这篇文章就可以了。
后面小编也会另外写一篇文正来介绍ohpm
工具版本 DevEco Studio 3.1 Release
SDK版本 OpenHarmony 3.2 Release
源码获取 见附录

项目最终效果

新建本地模块

在项目加载完后，右键左部项目的任意位置，然后依次点击 新建 -> 模块 -> static Library -> 输入模块名称

本地库安装

第一步，我们先打开终端页面
第二步，将本地库加载入ohpm

ohpm install ./chart

第三步，使用ohpm检查本地库是否被加载

ohpm list

第四步，再次检查本地库是否被加载

如果到目前为止，你的操作都是正确的。那么在 build-profile.json5 文件的末尾就可以看见你刚刚加载的本地模块。

编写并配置本地模块

第一步，创建文件

第二步，完成项目包文件的设计

在模块目录下 index.ets 文件内配置模块对外开放的文件

export { Chart } from './src/main/ets/components/Chart'

完成代码编写

Chart.ets文件代码编写

@Component
export struct Chart {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @Watch('onDraw') @Link values: number[];

  build() {
    Stack() {
      Canvas(this.context)
        .width('100%')
        .height('50%')
        // .onReady(this.onDraw)
    }
    .width("100%")
    .height("100%")
  }

  onDraw() {
    //可供绘图的区域参数
    let width = this.context.width;
    let height = this.context.height;
    let maximum = 100;
    let pointMax = 10;

    //用来绘制图表的矩形参数
    let top = 0
    let bottom = height - 20;
    let left = 20;

    let right = width
    let rectW = right - left;
    let rectH = bottom - top;


    //用于在图表中计算y值的函数
    let gety = (d: number) => {
      return rectH * (1 - d / maximum)
      // return 10;
    };

    // X轴所需绘制点的横向间隔
    let xInterval = rectW / pointMax;
    //用于在图标中计算x值的函数
    let getx: (i: number) => number = (i) => {
      //向右偏移  量
      let p: number = xInterval / 2;
      return left + p + xInterval * i
    };

    // 开始绘制图标
    this.context.beginPath();
    this.values.forEach((value: number, index: number) => {
      //如果没有超过绘制的最大数目
      let x = getx(index);
      let y = gety(value);
      if (index == 0)
        this.context.moveTo(x, y);
      else
        this.context.lineTo(x, y)

    });
    // 结束绘制折线图
    this.context.stroke();


  }
}

主界面代码编写

import { Chart } from "chart"
import matrix4 from '@ohos.matrix4';

@Entry
@Component
struct Index {
  // @State message: string = '折线图绘制'


  @State values:Array<number>=new Array
  build() {
    Row() {
      Column() {
        Chart({
          values: $values,
        })
          .width("100%")
          .height("70%")
          // .flexGrow(1)
        Button("添加端点")
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.values.push(Math.random() * 100)
            // if(this.values.l/
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

然后运行项目就可以获得最终效果了