更新记录

1.0.0（2025-01-03）

V1.0.0 初版

平台兼容性

Contribution Graph 组件

一个基于uni-app的贡献图表组件，类似于GitHub的贡献热力图，支持自定义样式和交互。

功能特点

• 📅 支持多月份数据展示
• 🎨 可自定义颜色方案
• 📱 响应式设计，支持自适应宽度
• 🔄 月份切换动画效果
• 💡 支持方块点击交互
• ⚙️ 高度可配置（大小、间距、圆角等）

安装使用

1. 将组件文件夹 contribution-graph 复制到项目的 components 目录下
2. 在页面中引入并注册组件：

<template>
  <contribution-graph
    :data="contributionData"
    :colors="colors"
    :month-count="2"
  />
</template>

<script>
import ContributionGraph from '@/components/contribution-graph/contribution-graph.vue'

export default {
  components: {
    ContributionGraph
  }
}
</script>

API

Props

数据格式示例

const contributionData = [
  {
    date: '2024-03-01',
    value: 2
  },
  {
    date: '2024-03-02',
    value: 3
  }
  // ...更多数据
]

自定义颜色示例

const colors = ['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39']

使用示例

<template>
  <contribution-graph
    :data="contributionData"
    :colors="customColors"
    :month-count="2"
    :size="12"
    :gap="3"
    title="活动记录"
    fill
  />
</template>

<script>
export default {
  data() {
    return {
      contributionData: [
        { date: '2024-03-01', value: 2 },
        { date: '2024-03-02', value: 3 }
      ],
      customColors: ['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39']
    }
  }
}
</script>

注意事项

1. 贡献值应为整数，对应颜色数组的索引
2. 日期格式必须为 'YYYY-MM-DD'
3. 确保颜色数组长度大于等于最大贡献值