# Lite-Chart

**Repository Path**: an-ran0/lite-chart

## Basic Information

- **Project Name**: Lite-Chart
- **Description**: OpenHarmony下的用纯ArkTS编写的画图库
可以进行折线图、曲线图、柱状图、饼图等表的绘制
实用简单
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-07-21
- **Last Updated**: 2024-01-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# lite_chart

## 项目介绍

项目名称：lite_chart

描述：
> OpenHarmony下的用纯ArkTS编写的画图库
> 可以进行折线图、曲线图、柱状图、饼图等表的绘制
> 实用简单

仓库地址：[https://atomgit.com/so_love_bang/LiteChart](https://atomgit.com/so_love_bang/LiteChart)

详情请见[lite_chart/README.md](./lite_chart/README.md)

安装方式：

```
ohpm install lite_chart
```

服务编译时的版本： API10

服务兼容的最低版本： API9



> lite_chart是一款轻量的图表绘制工具。
>
> 它可以使用非常少的代码绘制出漂亮的折线图、曲线图等图形样式。
> 源代码少、调用方便。
>
> 非常适合初学者了解和学习Canvas 以及帮助刚学习鸿蒙的小白快速的绘制心仪的图表。
>

### 设备支持情况

| 开发板          | CPU内核架构 | 系统                   | API | 测试时间       |
|--------------|---------|----------------------|-----|------------|
| DAYU200      | ARM     | OpenHarmony 3.2.15.2 | 9   | 2023-10-19 |
| DAYU800      | RISC-V  | HiHopeOS V2          | 9   | 2023-10-19 |
| Purple-Pi-Oh | ARM     | OpenHarmony 3.2.11.9 | 9   | 2023-10-19 |

### 开发工具支持情况

| 开发工具                    | 构建版本      | 测试时间       |
|-------------------------|-----------|------------|
| DevEco Studio 4.0 Beta2 | 4.0.0.400 | 2023-10-27 |

### 作者

项目发起作者：刘张豪

## 演示项目图

演示项目源码：https://atomgit.com/so_love_bang/transactions

## 运行样例：

### 相关模块导入

> 导包

```typescript
import { LiteChart } from 'lite_chart'
```

> 数据初始化

```
  @State linesDatas: number[] = [20, 73, 4, 51];
```

### 折线图

> 通过修改绘制内容来显示折线图

```typescript
import { LiteChart } from 'lite_chart'

Text("折线图")
LiteChart({
  values: $linesDatas,
  axisStyle: "#999999",
  linesStyle: "#000000",
})
  .backgroundColor("#4999")
  .width(200)
  .height(80)
```

![折线图演示样式](lite_chart/img/demo_linechart.png)

### 曲线图

> 通过修改绘制内容来显示曲线图

```typescript
// 曲线图
LiteChart({
  // 曲线图
  values: $linesDatas,
  axisStyle: "#999",
  graphStyle: "#f00",
})
  .backgroundColor("#4999")
  .width(200)
  .height(80)
```

![曲线图演示样式](lite_chart/img/demo_graphchart.png)

### 条形图

> 通过修改绘制内容来显示条形图

```typescript
 LiteChart({
  values: $linesDatas,
  axisStyle: "#999",
  barChartStyle: "#00f",
})
  .backgroundColor("#4999")
  .width(200)
  .height(80)
```

![条形图演示样式](lite_chart/img/demo_barchart.png)

### 柱状图演示样式

> 通过修改绘制内容来显示柱状图

```typescript
LiteChart({
  values: $linesDatas,
  axisStyle: "#999",
  histogramStyle: "#0ff",
})
  .backgroundColor("#4999")
  .width(200)
  .height(80)
```

![柱状图演示样式](lite_chart/img/demo_histogramchart.png)


### 饼图演示样式

> 通过修改绘制内容来显示饼图

```typescript
LiteChart({
    values: $linesDatas,
    pieChartStyle: ["#f00", "#0f0", "#00f", "#ff0"]
})
    .backgroundColor("#4999")
    .width(200)
    .height(80)
```


![饼图演示样式](lite_chart/img/demo_piechart.jpg)

### 环形图演示样式

> 通过修改绘制内容来显示环形图

```typescript
LiteChart({
values: $linesDatas,
    ringWidth:8,
    ringChartStyle: ["#f00", "#0f0", "#00f", "#ff0"]
})
    .backgroundColor("#4999")
    .width(200)
    .height(80)
```

![环形图演示样式](lite_chart/img/demo_ringchart.jpg)



### 目录结构

```
|---- lite_chart
|     |---- AppScrope  # 示例代码文件夹
|     |---- entry  # 示例代码文件夹
|     |---- screenshots #截图
|     |---- lite_chart  # lite_chart 库文件夹
|           |---- build  # lite_chart 模块打包后的文件
|           |---- src  # 模块代码
|                |---- ets/components   # 模块代码
|                     |---- base         # lite_chart 核心库基础文件
|                     |---- chart         # chart 各类图表逻辑文件
|            |---- index.js        # 入口文件
|            |---- index.d.ts      # 声明文件
|            |---- *.json5      # 配置文件
|     |---- README.md  # 安装使用方法
|     |---- README.OpenSource  # 开源说明
|     |---- CHANGELOG.md  # 更新日志
```

### 项目介绍视频

【Lite_Chart图形库介绍】 https://www.bilibili.com/video/BV1XN411W7QY/?share_source=copy_web&vd_source=86a5dc04bfb2a8f1e1a167049550eb36

### 贡献代码

使用过程中发现任何问题都可以提Issue 给我们，当然，我们也非常欢迎你给我们提PR 。

### 开源协议

本项目基于 Apache 2.0 ，请自由地享受和参与开源。