我在鸿蒙【生态市场】发布的活跃预览组件上架了

zhousg10072026-01-30 12:48

Activity Overview Component

https://developer.huawei.com/consumer/cn/market/prod-detail/28529adcf9b743128c8a3b7baa89ec7d/ad5e4b6a3925429b8dad78363063436a

简介

activity_overview 是一个类似于 GitHub 贡献图（Contribution Graph）的动态预览组件。它能够以热力图的形式直观展示用户在一段时间内的活动频率或贡献情况。

功能特性

动态数据展示：支持传入日期和贡献数量的数据数组。
完全自定义样式 ：
- 支持自定义色块颜色等级（colors）。
- 支持自定义贡献数阈值（thresholds）。
- 支持设置色块尺寸（blockSize）和间距（blockSpace）。
时间范围控制 ：支持设置显示过去多少周的数据（weeks）。
交互支持：支持点击色块触发回调函数，返回日期和贡献数。

快速开始

安装组件

bash 复制代码

ohpm install @ohmos/activity_overview

引入组件

typescript 复制代码

import { ActivityCalendar, ContributionItem } from '@ohmos/activity_overview';

基础用法

typescript 复制代码

@Entry
@Component
struct MyComponent {
  @State contributions: ContributionItem[] = [
    { date: '2023-10-01', count: 5 },
    { date: '2023-10-02', count: 12 },
    // ... 更多数据
  ];

  build() {
    Column() {
      ActivityCalendar({
        contributions: this.contributions,
        weeks: 52, // 显示过去52周
        onBlockClick: (date, count) => {
          console.info(`Clicked: ${date}, Count: ${count}`);
        }
      })
    }
  }
}

API 参考

ActivityCalendar 组件属性

属性名	类型	默认值	说明
`contributions`	`ContributionItem[]`	`[]`	贡献数据列表，包含日期和数量。
`weeks`	`number`	`52`	显示的周数，从当前日期向前推算。
`blockSize`	`number`	`10`	每个色块的宽度和高度（单位：vp）。
`blockSpace`	`number`	`2`	色块之间的间距（单位：vp）。
`colors`	`string[]`	`['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39']`	颜色数组。第一个颜色为背景色（0贡献），后续颜色对应不同等级。
`thresholds`	`number[]`	`[1, 3, 6, 10]`	阈值数组。用于决定贡献数对应哪个颜色等级。
`onBlockClick`	`(date: string, count: number) => void`	`-`	点击色块时的回调函数。

ContributionItem 接口

typescript 复制代码

interface ContributionItem {
  date: string; // 日期格式 'YYYY-MM-DD'
  count: number; // 贡献数量
}

联系方式

如有问题或建议，请联系维护团队。

仓库：https://github.com/HarmonyOS-Next/activity_overview
作者：zhousg1007@qq.com