基于 Taro 的日历热力图,生成类似于 GitHub Contribution 统计图。
npm i taro-calendar-heatmap --save
import CalendarHeatmap from 'taro-calendar-heatmap';
// 引入样式
import 'taro-calendar-heatmap/dist/index.css';
const data = [
{ date: '2021-3-24', count: 6 },
{ date: '2021-3-25', count: 1 },
{ date: '2021-3-26', count: 4 },
{ date: '2021-3-27', count: 5 },
{ date: '2021-3-28', count: 7 },
];
<CalendarHeatMap data={data} showMonthLabel showWeekLabel theme="github" />;
参数 |
说明 |
类型 |
默认值 |
spacing |
方块的间隙 |
number |
1 |
squareWidth |
方块的宽度 |
number |
14 |
radius |
方块的弧度 |
number |
3 |
colorRange |
颜色范围,第一个颜色值为方块未填充的颜色 |
string[] |
[] |
theme |
日历主题 |
github | purple | volcano | blue | orange |
github |
startDate |
开始时间,可以传时间字符串、Date、时间戳 |
string | Date | number |
One year ago |
endDate |
结束时间,可以传时间字符串、Date、时间戳 |
string | Date | number |
Today |
showWeekLabel |
是否显示周标签 |
boolean |
false |
showMonthLabel |
是否显示月份标签 |
boolean |
false |
firstDay |
每周的第一天 |
Mon | Sun |
Mon |
data |
日历数据 |
DataProp[] |
[] |
onClick |
点击回调,可以在回调可以获取点击的日期时间 |
Function |
(date: Date ) => {} |
showTooltip |
点击是否显示提示 |
boolean |
false |
tooltipContent |
提示框内容,可以穿字符串或者组件。 |
string |
Element |
参数 |
说明 |
类型 |
默认值 |
count |
次数,次数越多,颜色越深 |
number |
0 |
date |
可以传时间字符串、Date、时间戳 |
string | Date | number |
null |
组件内置了 GitHub、酱紫、火山、极客蓝、日暮五种主题,效果如下。
theme |
主题名称 |
截图 |
github |
GitHub |
![IMG_0460EB86E4FA-1](https://camo.githubusercontent.com/661868826470aa43acc25882d46f28c13e70aefc8c94163185828cf274210553/68747470733a2f2f6d6179616e6465762e6f73732d636e2d68616e677a686f752e616c6979756e63732e636f6d2f755069632f494d475f3034363045423836453446412d312e6a706567) |
purple |
酱紫 |
![IMG_BAE84FD8F6A4-1](https://camo.githubusercontent.com/0f0ff5984b07dba3e0a91b5086f003da18f6eb671d4477162ad14884339cff1f/68747470733a2f2f6d6179616e6465762e6f73732d636e2d68616e677a686f752e616c6979756e63732e636f6d2f755069632f494d475f4241453834464438463641342d312e6a706567) |
volcano |
火山 |
![IMG_2D06301BC78A-1](https://camo.githubusercontent.com/8b7ce629fac2337700517132ce0bd5e430c04e9c689db867051c010058068faf/68747470733a2f2f6d6179616e6465762e6f73732d636e2d68616e677a686f752e616c6979756e63732e636f6d2f755069632f494d475f3244303633303142433738412d312e6a706567) |
blue |
极客蓝 |
![IMG_A2F31DAC7516-1](https://camo.githubusercontent.com/5464c2d3f3b32e3d44c04e62ab65d90a13d4ea57d4042d123af579624ee9ca93/68747470733a2f2f6d6179616e6465762e6f73732d636e2d68616e677a686f752e616c6979756e63732e636f6d2f755069632f494d475f4132463331444143373531362d312e6a706567) |
orange |
日暮 |
![IMG_B861E55C242B-1](https://camo.githubusercontent.com/d66c65eb1b5c03b72cbbcabd972700a611cf2066b8b4e4a8d95e06866fe78ef6/68747470733a2f2f6d6179616e6465762e6f73732d636e2d68616e677a686f752e616c6979756e63732e636f6d2f755069632f494d475f4238363145353543323432422d312e6a706567) |