# oh-ucharts

**Repository Path**: w2cxy/oh-ucharts

## Basic Information

- **Project Name**: oh-ucharts
- **Description**: 用于openharmony的封装库**ucharts**(https://www.ucharts.cn),暂时先用webview封装。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-09
- **Last Updated**: 2023-12-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# oh-ucharts

#### 介绍
用于openharmony的封装库[ucharts](https://www.ucharts.cn),暂时先用webview封装。


#### 库安装教程

1. 手动安装

下载源码拷贝`ucharts`目录到自己项目根目录下面, 
在`entry/oh-package.json5`添加依赖`ucharts": "file:../ucharts"`,
然后按DevEcho提示重新执行同步即可

2. ohpm安装

尚未计划支持

### 使用方法

```shell
import { QiunDataCharts } from 'ucharts';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        QiunDataCharts({
          type: "line",
          opts: {
            color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
            padding: [15,15,0,5],
            enableScroll: false,
            legend: {},
            xAxis: {
              disableGrid: true
            },
            yAxis: {
              data: [
                {
                  min: 0
                }
              ]
            },
            extra: {
              column: {
                type: "group",
                width: 30,
                activeBgColor: "#000000",
                activeBgOpacity: 0.08
              }
            }
          },
          chartData: {
            categories: ["2018","2019","2020","2021","2022","2023"],
            series: [
              {
                name: "目标值",
                data: [35,36,31,33,13,34]
              },
              {
                name: "完成量",
                data: [18,27,21,24,6,28]
              }
            ]
          }
        })
          .width("100%")
          .height(200)
      }
      .width('100%')
    }
    .height('100%')
  }
}
```