# openharmony_echarts

**Repository Path**: dssasdadssdfsdfs/hm_chart

## Basic Information

- **Project Name**: openharmony_echarts
- **Description**: 本库基于echarts 原库v5.5.1版本进行适配，使其可以运行在 OpenHarmony，并沿用其现有用法和特性。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 3
- **Created**: 2024-07-10
- **Last Updated**: 2025-06-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: HarmonyOS组件, Echarts

## README

# openharmony_echarts

#### 介绍
本库基于echarts 原库v5.5.1版本进行适配，使其可以运行在 OpenHarmony，并沿用其现有用法和特性。

#### 软件架构
软件架构说明


#### 安装教程

```
ohpm install @wuyan/hm_chart
```

#### 使用说明

* 静态数据示例演示
```

import {hmChart,ChartOptions,hmChartType }from  "@wuyan/hm_chart"

@Entry
@Component
struct Index {
  @State myChart :hmChartType|null = null
  @State Options:ChartOptions = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: 'axis'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  };

  build() {
    Column(){
      Column(){
          hmChart({Options:this.Options,myChart:this.myChart})
      }.width('90%')
      .height('400')
    }
    .height('100%')
    .width('100%')
  }
}
```
预览效果如下图所示

![image.png](https://img.vinua.cn/images/I6tni.png)

* 异步动态数据示例演示
```
import {hmChart,ChartOptions,hmChartType }from  "@wuyan/hm_chart"

@Entry
@Component
struct Index {
  @State myChart :hmChartType|null = null
  @State Options:ChartOptions = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: 'axis'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  };

  build() {
    Column(){
      Row(){
        Button('异步加载')
          .onClick(()=>{
            const Options:ChartOptions = {
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: [0, 3, 901, 934, 1290, 1330, 1320],
                  type: 'line',
                  smooth: true
                }
              ]
            }
            if(this.myChart){
              this.myChart.setOption(Options)
            }
          })
      }
      Column(){
          hmChart({Options:this.Options,myChart:this.myChart})
      }.width('90%')
      .height('400')
    }
    .height('100%')
    .width('100%')
  }
}

```

预览效果如下图所示

![image.png](https://img.vinua.cn/images/I64Uy.png)

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request