HarmonyOS开发：ArkTS语法的图表组件 - McCharts

最新推荐文章于 2025-06-11 17:59:26 发布

原创

最新推荐文章于 2025-06-11 17:59:26 发布 · 2.3k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #windows #前端 #鸿蒙 #鸿蒙开发 #鸿蒙系统

简介

mcCharts(莓创图表)是McUI提供的一款开箱即用的图表工具库。作为HarmonyOS一款开源的图表组件库，组件库将会提供以下图表：折线图、柱状图、饼图、散点图、雷达图等等。并提供了配套的设计资源，充分满足可定制化的需求。

官方文档地址

mcCharts官方文档，快速跳转

安装教程

 ohpm install @mcui/mccharts

使用案例

1、折线图

引入折线图组件

 import { McLineChart, Options } from '@mcui/mccharts'

使用

@Entry
@Component
struct Index {
    // 初始化数据
    @State seriesOption: Options = new Options({
      xAxis:{
        data:['周一','周二','周三','周四','周五','周六','周日']
      },
      yAxis:{
        name:'温度'
      },
      series:[
        {
          name:'最高气温',
          data:[11, 11, 15, 13, 12, 130, 10]
        },
        {
          name:'最低气温',
          data:[1, -20, 2, 5, 3, 2, 0]
        }
      ]
    })
    // 动态修改数据
    aboutToAppear() {
        setTimeout(() => {
          // 传递需要修改的属性与数值，不需要全部传
          this.seriesOption.setVal({
            series:[
                {
                  name:'最高气温',
                  data:[110, 110, 150, 130, 120, 190, 100]
                }
            ]
          })
        }, 2000)
    }
    build() {
        Row() {
          McLineChart({
            options: this.seriesOption
          })
        }
        .height('50%')
    }
}