# VitalUI

**Repository Path**: ezswift/VitalUI

## Basic Information

- **Project Name**: VitalUI
- **Description**: 基于ArkUI原生开发框架，使用原生ArkTS语言编写的扩展UI组件库。
目标是为开发者提供接近原生组件便捷性与自定义的扩展组件。

支持api12以及上版本
#ArkUI #HarmonyOS #HarmonyNEXT
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 4
- **Created**: 2024-11-08
- **Last Updated**: 2025-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: HarmonyOS组件, HarmonyOS, arkui, ArkTS, next

## README

# VitalUI

## 项目介绍

VitalUI是一个使用ArkTS、ArkUI原生开发的UI扩展库。提供可扩展的、高度自定义的UI组件。
期望为开发者提供如同原生组件一样规范易用的UI组件。
> 项目当前处于起步阶段，支持玫瑰图、雷达图、饼图。后续将提供更多易用的UI组件。

## 项目结构

```
├──VitalUI/src/main/ets                      //VitalUI库                      
│  ├──UIcomponents                           //UI组件
│  │  ├──PieChart                            //饼状图UI组件
│  │  ├──RingChart                           //环状图UI组件
│  │  ├──RadarChart                          //雷达图UI组件
│  │  ├──RoseChart                           //玫瑰图UI组件
│  │  └──...                                 //更多UI组件
│  └──utils                                  //公共库
│
├──entry/default/src/main/ets                //演示demo入口                   
│  ├──entryability                           //页面Ability
│  ├──RadarChart                             //雷达图demo、教程、预览图等
│  ├──RoseChart                              //玫瑰图demo、教程、预览图等
│  ├──RoseQuarterChart                       //第一象限玫瑰图demo、教程、预览图等
│  └──...                                    //更多demo制作中
│
└──preview                                   // 预览图
```

entry文件为项目演示文件，为VitalUI中组件的应用展示

## 示例

#### 饼状图`PieChart()`
![饼状图](./preview/PieChart.png)
#### 环装图`RingChart()`
![环状图](./preview/RingChart.png)
#### 雷达图`RadarChartQ()`
![雷达图](./preview/RadarChart.png)
#### 玫瑰图 `RoseChart()`
![玫瑰图](./preview/RoseChart.png)
#### 玫瑰图(第一象限) `RoseChartQ()`
![玫瑰图](./preview/RoseQuarterChart.png)



# 使用指南

该库暂未上架oh代码仓，您可以直接将库文件拷贝或直接复制您所需的ui组件文件。

成功上架后，将支持命令引入。

## 快速上手

- 以雷达图组件为例，首先引入需要的文件

```ts
import { ChartOption, RadarChart } from 'VitalUI'      //库中引用
import { ChartOption, RadarChart } from './RadarChart' //本地引用
```


- 根据ChartOption类型新建数据：

```ts
const DemoData: ChartOption = //测试数据
  {
    chartName: '天赋',
    chartDatas: [
      { name: '敏捷', value: 11, color: 0xffa87cf4 },
      { name: '力量', value: 5.2, color: 0xffa87cf4 },
      { name: '智慧', value: 9.3, color: 0xffcba50b },
      { name: '耐力', value: 2.3, color: 0xffe81b58 },
      { name: '天赋', value: 8, color: 0xff38ed44 },
      { name: '速度', value: 3.9, color: 0xffe81b58 },
      { name: '法力', value: 6.5, color: 0xfff7942c },
      { name: '生命', value: 11, color: 0xff68ead0 },
    ],
    minValue: 0,
    maxValue: 10
  }
```

- 调用`RadarChart`组件[最简使用方式]：

> 该组件的设计初衷是为大家提供方便快捷，同时又支持高度自定义的组件。因此除了data:Chart其余属性均不为必填项，开发者只需填写数据项，即可快速开始使用组件。

```typescript
    RadarChart({
      data: DemoData,          //引入数据
      primaryColor: 0x8800beff //指定主题色
    })
```


> 此为指定颜色前提下最简单的写法，其样式为默认样式



## 数据展示组件：

#### 饼状图

<img src="./preview/demoPie.png" style="zoom: 50%;float:left;" />

在线教程：

[PieChart使用教程 - 码云 -  (gitee.com)](https://gitee.com/ezswift/VitalUI/blob/master/entry/src/main/ets/PieChart/README.md)

[PieChart使用教程 - Wiki - Gitee.com](https://gitee.com/ezswift/VitalUI/wikis/PieChart使用教程)

开发教程：

撰写中...



#### 环状图
<img src="./preview/demoRing.png" style="zoom: 60%;float:left;" />

在线教程：

[RingChart使用教程 - 码云 -  (gitee.com)](https://gitee.com/ezswift/VitalUI/blob/master/entry/src/main/ets/RingChart/README.md)

[RingQuarterChart使用教程 - Wiki - Gitee.com](https://gitee.com/ezswift/VitalUI/wikis/RingChart使用教程)

开发教程：

撰写中...
#### 雷达图

<img src="./preview/demoRadar.png" style="zoom: 50%;float:left;"/>

在线教程：

[RadarChart使用教程 - 码云 -  (gitee.com)](https://gitee.com/ezswift/VitalUI/blob/master/entry/src/main/ets/RadarChart/README.md)

[RadarChart使用教程 - Wiki - Gitee.com](https://gitee.com/ezswift/VitalUI/wikis/RadarChart使用教程)

开发教程：

撰写中...



#### 玫瑰图

<img src="./preview/demoRose.png" style="zoom: 60%;float:left;" />

在线教程：

[RoseChart使用教程 - 码云 -  (gitee.com)](https://gitee.com/ezswift/VitalUI/blob/master/entry/src/main/ets/RoseChart/README.md)

[RoseChart使用教程 - Wiki - Gitee.com](https://gitee.com/ezswift/VitalUI/wikis/RoseChart使用教程)

开发教程：

撰写中...



#### 玫瑰图（第一象限）

<img src="./preview/demoRoseQ.png" style="zoom: 50%;float:left;" />

在线教程：

[RoseChart使用教程 - 码云 -  (gitee.com)](https://gitee.com/ezswift/VitalUI/blob/master/entry/src/main/ets/RoseQuarterChart/README.md)

[RoseQuarterChart使用教程 - Wiki - Gitee.com](https://gitee.com/ezswift/VitalUI/wikis/RoseQuarterChart使用教程)

开发教程：

撰写中...





# 联系我们

## 问题反馈

3014551329@qq.com