# harmony_line_chart

**Repository Path**: liu_520/harmony_line_chart

## Basic Information

- **Project Name**: harmony_line_chart
- **Description**: 鸿蒙绘制折线图，基金走势图
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 10
- **Forks**: 1
- **Created**: 2023-12-03
- **Last Updated**: 2025-08-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# harmony_line_chart

#### 介绍
鸿蒙绘制折线图，基金走势图
![平滑曲线.png](./screenshots/平滑曲线.png)

![有点的渐变面积图.png](./screenshots/有点的渐变面积图.png)

![有null数据的折线图.png](./screenshots/有null数据的折线图.png)

![对比折线图.png](./screenshots/对比折线图.png)

![没有点的折线图.png](./screenshots/没有点的折线图.png)

#### 已完成的功能：
```
1、基础一条线的折线图
2、多条线的折线图
3、支持贝塞尔曲线平滑线
4、支持渐变面积图(仅基础折线图，多条线对比图请参考基础折线图)
5、支持从左到右动态绘制
6、自定义横纵坐标展示多少个标线
7、支持坐标点的绘制
8、支持数据中有null的情况(请使用者自行兼容)
```


#### 使用说明


```

  @State xTicks: String[] = [] // x轴显示的刻度
  @State yTicks: number[] = [] // y轴显示的刻度值
  @Prop canvasWidth: number // 画布的宽度
  private canvasHeight = 300 // 画布的高度
  private yWidth = 20 // y轴的文字宽度
  private xHeight = 20 // X轴的文字高度
  private points: Point[] = [] // 原始数量大小
  private sps: any[] = [] // 平滑曲线的数量
  private grayColor = '#ccc'
  @State minY: number = this.xHeight // 对应的是y轴最小值
  @Prop xGridCount: number // x轴网格线的数量
  @Prop yGridCount: number // y轴网格线的数量
  private drawInterval: number = -1; // 定时器
  @State startIndex: number = 0 // 动画出现点
  @State useAnimate: boolean = false // 是否使用动画
  @State animateCount: number = 2 // 使用动画时 一个间隔时间内绘制的点或者线的数量
  @State animateTimeGap: number = 100 // 使用动画时的时间间隔
  @Prop smooth: boolean // 是否使用平滑曲线
  @State scaleRatio: number = 2 // 缩放比例 最小1 最大
  @State lastPoint: number = -1 // 点击了图表对应的x轴的位置 用于画垂直虚线
  @Link clickPoint: PointItem
  @State showAera: boolean = false // 是否显示面积图
  @State aeraYBase: number = 0 // 面积图的基准，默认是最小值

  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private ctx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private gap = (this.canvasWidth - this.yWidth) / data.length // 两个点之间的宽度 用来判断点击的范围是否在某个点内
```