calendar日历坐标系完全指南
📋 概述
**calendar（日历坐标系）**是ECharts专门用于展示时间序列数据的组件，以日历的形式组织数据，适合展示每日、每周的周期性数据。它是GitHub提交热力图、年度活动统计等场景的理想选择。
核心价值
- 时间直观：以人们熟悉的日历形式展示
- 周期对比：轻松对比不同周/月的数据
- 热力集成：与heatmap完美结合展示密度
- 年度视图：全年数据一目了然
🎯 核心概念
1. 基础日历
javascript
option = {
calendar: {
range: '2023', // 显示2023年
cellSize: ['auto', 20] // 单元格大小
},
series: [{
type: 'heatmap',
coordinateSystem: 'calendar',
data: [
['2023-01-01', 10],
['2023-01-02', 20],
// ...
]
}]
};1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2. 数据格式
javascript
// 格式：[日期字符串, 数值]
const calendarData = [
['2023-01-01', 5],
['2023-01-02', 8],
['2023-01-03', 12]
];
// 或使用时间戳
const timestampData = [
[1672531200000, 5], // 2023-01-01
[1672617600000, 8] // 2023-01-02
];1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
🔧 详细配置项
完整calendar配置
javascript
option = {
title: {
text: '年度活动日历',
left: 'center'
},
tooltip: {
formatter: function(params) {
return `${params.data[0]}<br/>活动数: ${params.data[1]}`;
}
},
// === 日历组件 ===
calendar: {
// === 时间范围 ===
range: '2023', // 可以是年份、日期范围
// range: ['2023-01-01', '2023-12-31'],
// range: ['2023-01', '2023-06'],
// === 位置和尺寸 ===
left: 'center',
top: 'middle',
orient: 'horizontal', // 'horizontal' | 'vertical'
// === 单元格大小 ===
cellSize: [20, 20], // [宽, 高] 或 ['auto', 20]
// === 边距 ===
splitLine: {
show: true,
lineStyle: {
color: '#e0e0e0',
width: 1
}
},
// === 背景 ===
backgroundColor: '#fff',
borderColor: '#ccc',
borderWidth: 1,
// === 月份标签 ===
monthLabel: {
show: true,
nameMap: 'cn', // 'cn' | 'en' | 自定义数组
color: '#333',
fontSize: 12,
fontWeight: 'bold'
},
// === 星期标签 ===
dayLabel: {
show: true,
firstDay: 1, // 1=周一开始，0=周日开始
nameMap: 'cn', // 'cn' | 'en'
color: '#666',
fontSize: 10
},
// === 年份标签 ===
yearLabel: {
show: true,
color: '#999',
fontSize: 14,
fontWeight: 'bold',
position: 'top' // 'top' | 'bottom'
},
// === 单项样式 ===
itemStyle: {
color: '#ebedf0',
borderColor: '#fff',
borderWidth: 2
},
// === 响应式 ===
silent: false
},
visualMap: {
min: 0,
max: 10,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: 20,
inRange: {
color: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
}
},
series: [{
type: 'heatmap',
coordinateSystem: 'calendar',
data: generateYearData('2023')
}]
};
// 生成全年数据
function generateYearData(year) {
const data = [];
const startDate = new Date(`${year}-01-01`);
const endDate = new Date(`${year}-12-31`);
for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
const dateStr = d.toISOString().split('T')[0];
const value = Math.floor(Math.random() * 10);
data.push([dateStr, value]);
}
return data;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
💡 实战案例
案例1：GitHub风格提交热力图
javascript
option = {
title: {
text: '代码提交记录',
subtext: '2023年全年',
left: 'center'
},
tooltip: {
formatter: function(params) {
const date = params.data[0];
const commits = params.data[1];
return `${date}<br/>提交: ${commits}次`;
}
},
calendar: {
top: 80,
left: 30,
right: 30,
cellSize: ['auto', 13],
range: '2023',
itemStyle: {
borderWidth: 0.5,
borderColor: '#fff'
},
yearLabel: { show: false },
monthLabel: {
nameMap: 'en',
fontSize: 10
},
dayLabel: {
firstDay: 1,
nameMap: ['日', '一', '二', '三', '四', '五', '六']
}
},
visualMap: {
min: 0,
max: 10,
type: 'piecewise',
orient: 'horizontal',
left: 'center',
top: 40,
pieces: [
{min: 0, max: 0, label: '0', color: '#ebedf0'},
{min: 1, max: 3, label: '1-3', color: '#c6e48b'},
{min: 4, max: 6, label: '4-6', color: '#7bc96f'},
{min: 7, max: 9, label: '7-9', color: '#239a3b'},
{min: 10, max: 100, label: '10+', color: '#196127'}
]
},
series: [{
type: 'heatmap',
coordinateSystem: 'calendar',
data: generateCommitData('2023'),
emphasis: {
itemStyle: {
shadowBlur: 5,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
}
}]
};
function generateCommitData(year) {
const data = [];
const start = new Date(`${year}-01-01`);
const end = new Date(`${year}-12-31`);
for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
// 模拟：工作日提交多，周末少
const dayOfWeek = d.getDay();
let value;
if (dayOfWeek === 0 || dayOfWeek === 6) {
value = Math.floor(Math.random() * 3);
} else {
value = Math.floor(Math.random() * 10);
}
data.push([d.toISOString().split('T')[0], value]);
}
return data;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
案例2：垂直日历布局
javascript
option = {
calendar: {
orient: 'vertical', // 垂直布局
cellSize: [40, 40],
range: '2023-01', // 只显示1月
yearLabel: { show: false }
},
series: [{
type: 'scatter',
coordinateSystem: 'calendar',
data: [
['2023-01-01', 5],
['2023-01-15', 8],
['2023-01-28', 12]
],
symbolSize: function(val) {
return val[1] * 3;
}
}]
};1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
⚠️ 常见问题
问题1：日期格式错误
解决：
javascript
// ✅ 正确格式
['2023-01-01', 10]
['2023-1-1', 10]
// ❌ 错误格式
['2023/01/01', 10]
['Jan 1, 2023', 10]1
2
3
4
5
6
7
2
3
4
5
6
7
问题2：单元格太小
解决：
javascript
calendar: {
cellSize: [30, 30], // 增大单元格
// 或者使用自适应
cellSize: ['auto', 20]
}1
2
3
4
5
2
3
4
5
🎯 最佳实践
1. 选择合适的range
javascript
// 全年视图
range: '2023'
// 单月视图
range: '2023-01'
// 自定义范围
range: ['2023-01-01', '2023-06-30']1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
2. 颜色方案
javascript
// GitHub风格
color: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
// 蓝色渐变
color: ['#f0f9ff', '#bae7ff', '#5470c6', '#1e3a8a']
// 红色渐变
color: ['#fee0d2', '#fc9272', '#de2d26', '#a50f15']1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
3. 性能优化
javascript
// 大数据量时
series: [{
type: 'heatmap',
progressive: 5000,
large: true
}]1
2
3
4
5
6
2
3
4
5
6
📊 性能指标
| 配置 | 渲染时间 | 建议 |
|---|---|---|
| 单月视图 | 15ms | 无限制 |
| 全年视图 | 30ms | 正常 |
| 带大量散点 | 80ms | 启用progressive |
🔗 相关链接
- 热力图.md)
- 时间轴.md)
💎 总结
calendar核心价值：
- ✅ 日历形式直观展示
- ✅ 周期性数据对比
- ✅ GitHub风格热力图
- ✅ 支持水平和垂直布局
适用场景：
- 代码提交记录
- 每日活动统计
- 签到打卡日历
- 年度数据回顾
掌握calendar，让时间数据更清晰！📅
日历热力图
{
"title": {
"text": "年度活跃度",
"left": "center"
},
"tooltip": {},
"visualMap": {
"min": 0,
"max": 100,
"calculable": true,
"orient": "horizontal",
"left": "center",
"top": "top"
},
"calendar": {
"top": 80,
"left": 30,
"right": 30,
"cellSize": [
"auto",
13
],
"range": "2024",
"itemStyle": {
"borderWidth": 0.5
}
},
"series": [
{
"type": "heatmap",
"coordinateSystem": "calendar",
"data": [
[
"2024-01-01",
82
],
[
"2024-01-02",
26
],
[
"2024-01-03",
49
],
[
"2024-01-04",
27
],
[
"2024-01-05",
64
],
[
"2024-01-06",
50
],
[
"2024-01-07",
8
],
[
"2024-01-08",
95
],
[
"2024-01-09",
35
],
[
"2024-01-10",
25
],
[
"2024-01-11",
53
],
[
"2024-01-12",
22
],
[
"2024-01-13",
24
],
[
"2024-01-14",
18
],
[
"2024-01-15",
78
],
[
"2024-01-16",
90
],
[
"2024-01-17",
63
],
[
"2024-01-18",
1
],
[
"2024-01-19",
74
],
[
"2024-01-20",
16
],
[
"2024-01-21",
63
],
[
"2024-01-22",
89
],
[
"2024-01-23",
59
],
[
"2024-01-24",
36
],
[
"2024-01-25",
96
],
[
"2024-01-26",
9
],
[
"2024-01-27",
13
],
[
"2024-01-28",
16
],
[
"2024-01-29",
93
],
[
"2024-01-30",
33
],
[
"2024-01-31",
35
],
[
"2024-02-01",
79
],
[
"2024-02-02",
61
],
[
"2024-02-03",
43
],
[
"2024-02-04",
51
],
[
"2024-02-05",
29
],
[
"2024-02-06",
78
],
[
"2024-02-07",
88
],
[
"2024-02-08",
87
],
[
"2024-02-09",
75
],
[
"2024-02-10",
8
],
[
"2024-02-11",
65
],
[
"2024-02-12",
8
],
[
"2024-02-13",
55
],
[
"2024-02-14",
8
],
[
"2024-02-15",
81
],
[
"2024-02-16",
14
],
[
"2024-02-17",
21
],
[
"2024-02-18",
71
],
[
"2024-02-19",
20
],
[
"2024-02-20",
6
],
[
"2024-02-21",
19
],
[
"2024-02-22",
11
],
[
"2024-02-23",
73
],
[
"2024-02-24",
58
],
[
"2024-02-25",
1
],
[
"2024-02-26",
17
],
[
"2024-02-27",
44
],
[
"2024-02-28",
36
],
[
"2024-02-29",
12
],
[
"2024-03-01",
19
],
[
"2024-03-02",
87
],
[
"2024-03-03",
71
],
[
"2024-03-04",
39
],
[
"2024-03-05",
60
],
[
"2024-03-06",
82
],
[
"2024-03-07",
55
],
[
"2024-03-08",
52
],
[
"2024-03-09",
27
],
[
"2024-03-10",
90
],
[
"2024-03-11",
25
],
[
"2024-03-12",
27
],
[
"2024-03-13",
51
],
[
"2024-03-14",
90
],
[
"2024-03-15",
92
],
[
"2024-03-16",
91
],
[
"2024-03-17",
56
],
[
"2024-03-18",
8
],
[
"2024-03-19",
5
],
[
"2024-03-20",
14
],
[
"2024-03-21",
6
],
[
"2024-03-22",
91
],
[
"2024-03-23",
14
],
[
"2024-03-24",
87
],
[
"2024-03-25",
39
],
[
"2024-03-26",
79
],
[
"2024-03-27",
2
],
[
"2024-03-28",
57
],
[
"2024-03-29",
91
],
[
"2024-03-30",
67
],
[
"2024-03-31",
89
],
[
"2024-04-01",
62
],
[
"2024-04-02",
31
],
[
"2024-04-03",
82
],
[
"2024-04-04",
27
],
[
"2024-04-05",
14
],
[
"2024-04-06",
8
],
[
"2024-04-07",
49
],
[
"2024-04-08",
53
],
[
"2024-04-09",
9
],
[
"2024-04-10",
46
],
[
"2024-04-11",
7
],
[
"2024-04-12",
64
],
[
"2024-04-13",
38
],
[
"2024-04-14",
49
],
[
"2024-04-15",
89
],
[
"2024-04-16",
4
],
[
"2024-04-17",
17
],
[
"2024-04-18",
21
],
[
"2024-04-19",
83
],
[
"2024-04-20",
9
],
[
"2024-04-21",
69
],
[
"2024-04-22",
47
],
[
"2024-04-23",
65
],
[
"2024-04-24",
25
],
[
"2024-04-25",
3
],
[
"2024-04-26",
88
],
[
"2024-04-27",
70
],
[
"2024-04-28",
8
],
[
"2024-04-29",
8
],
[
"2024-04-30",
21
],
[
"2024-05-01",
66
],
[
"2024-05-02",
42
],
[
"2024-05-03",
95
],
[
"2024-05-04",
95
],
[
"2024-05-05",
82
],
[
"2024-05-06",
61
],
[
"2024-05-07",
86
],
[
"2024-05-08",
20
],
[
"2024-05-09",
73
],
[
"2024-05-10",
74
],
[
"2024-05-11",
69
],
[
"2024-05-12",
83
],
[
"2024-05-13",
18
],
[
"2024-05-14",
95
],
[
"2024-05-15",
52
],
[
"2024-05-16",
40
],
[
"2024-05-17",
39
],
[
"2024-05-18",
22
],
[
"2024-05-19",
9
],
[
"2024-05-20",
42
],
[
"2024-05-21",
4
],
[
"2024-05-22",
49
],
[
"2024-05-23",
15
],
[
"2024-05-24",
46
],
[
"2024-05-25",
48
],
[
"2024-05-26",
12
],
[
"2024-05-27",
90
],
[
"2024-05-28",
69
],
[
"2024-05-29",
73
],
[
"2024-05-30",
67
],
[
"2024-05-31",
35
],
[
"2024-06-01",
40
],
[
"2024-06-02",
99
],
[
"2024-06-03",
0
],
[
"2024-06-04",
48
],
[
"2024-06-05",
6
],
[
"2024-06-06",
31
],
[
"2024-06-07",
51
],
[
"2024-06-08",
94
],
[
"2024-06-09",
29
],
[
"2024-06-10",
0
],
[
"2024-06-11",
93
],
[
"2024-06-12",
80
],
[
"2024-06-13",
32
],
[
"2024-06-14",
35
],
[
"2024-06-15",
2
],
[
"2024-06-16",
78
],
[
"2024-06-17",
97
],
[
"2024-06-18",
96
],
[
"2024-06-19",
62
],
[
"2024-06-20",
34
],
[
"2024-06-21",
85
],
[
"2024-06-22",
40
],
[
"2024-06-23",
91
],
[
"2024-06-24",
97
],
[
"2024-06-25",
23
],
[
"2024-06-26",
34
],
[
"2024-06-27",
49
],
[
"2024-06-28",
60
],
[
"2024-06-29",
17
],
[
"2024-06-30",
4
],
[
"2024-07-01",
78
],
[
"2024-07-02",
99
],
[
"2024-07-03",
34
],
[
"2024-07-04",
33
],
[
"2024-07-05",
95
],
[
"2024-07-06",
88
],
[
"2024-07-07",
91
],
[
"2024-07-08",
38
],
[
"2024-07-09",
13
],
[
"2024-07-10",
9
],
[
"2024-07-11",
16
],
[
"2024-07-12",
43
],
[
"2024-07-13",
10
],
[
"2024-07-14",
37
],
[
"2024-07-15",
69
],
[
"2024-07-16",
61
],
[
"2024-07-17",
41
],
[
"2024-07-18",
24
],
[
"2024-07-19",
67
],
[
"2024-07-20",
12
],
[
"2024-07-21",
50
],
[
"2024-07-22",
75
],
[
"2024-07-23",
0
],
[
"2024-07-24",
61
],
[
"2024-07-25",
49
],
[
"2024-07-26",
28
],
[
"2024-07-27",
93
],
[
"2024-07-28",
82
],
[
"2024-07-29",
60
],
[
"2024-07-30",
47
],
[
"2024-07-31",
43
],
[
"2024-08-01",
41
],
[
"2024-08-02",
31
],
[
"2024-08-03",
51
],
[
"2024-08-04",
49
],
[
"2024-08-05",
20
],
[
"2024-08-06",
96
],
[
"2024-08-07",
68
],
[
"2024-08-08",
47
],
[
"2024-08-09",
67
],
[
"2024-08-10",
82
],
[
"2024-08-11",
21
],
[
"2024-08-12",
91
],
[
"2024-08-13",
77
],
[
"2024-08-14",
35
],
[
"2024-08-15",
22
],
[
"2024-08-16",
92
],
[
"2024-08-17",
62
],
[
"2024-08-18",
68
],
[
"2024-08-19",
67
],
[
"2024-08-20",
96
],
[
"2024-08-21",
4
],
[
"2024-08-22",
49
],
[
"2024-08-23",
37
],
[
"2024-08-24",
69
],
[
"2024-08-25",
23
],
[
"2024-08-26",
34
],
[
"2024-08-27",
37
],
[
"2024-08-28",
26
],
[
"2024-08-29",
73
],
[
"2024-08-30",
56
],
[
"2024-08-31",
0
],
[
"2024-09-01",
58
],
[
"2024-09-02",
24
],
[
"2024-09-03",
37
],
[
"2024-09-04",
40
],
[
"2024-09-05",
51
],
[
"2024-09-06",
13
],
[
"2024-09-07",
27
],
[
"2024-09-08",
6
],
[
"2024-09-09",
88
],
[
"2024-09-10",
96
],
[
"2024-09-11",
64
],
[
"2024-09-12",
21
],
[
"2024-09-13",
40
],
[
"2024-09-14",
47
],
[
"2024-09-15",
36
],
[
"2024-09-16",
39
],
[
"2024-09-17",
14
],
[
"2024-09-18",
16
],
[
"2024-09-19",
30
],
[
"2024-09-20",
70
],
[
"2024-09-21",
16
],
[
"2024-09-22",
47
],
[
"2024-09-23",
62
],
[
"2024-09-24",
83
],
[
"2024-09-25",
94
],
[
"2024-09-26",
99
],
[
"2024-09-27",
18
],
[
"2024-09-28",
17
],
[
"2024-09-29",
83
],
[
"2024-09-30",
80
],
[
"2024-10-01",
10
],
[
"2024-10-02",
70
],
[
"2024-10-03",
74
],
[
"2024-10-04",
44
],
[
"2024-10-05",
84
],
[
"2024-10-06",
70
],
[
"2024-10-07",
7
],
[
"2024-10-08",
89
],
[
"2024-10-09",
42
],
[
"2024-10-10",
1
],
[
"2024-10-11",
97
],
[
"2024-10-12",
88
],
[
"2024-10-13",
34
],
[
"2024-10-14",
59
],
[
"2024-10-15",
33
],
[
"2024-10-16",
18
],
[
"2024-10-17",
37
],
[
"2024-10-18",
11
],
[
"2024-10-19",
76
],
[
"2024-10-20",
50
],
[
"2024-10-21",
2
],
[
"2024-10-22",
38
],
[
"2024-10-23",
31
],
[
"2024-10-24",
5
],
[
"2024-10-25",
66
],
[
"2024-10-26",
35
],
[
"2024-10-27",
73
],
[
"2024-10-28",
6
],
[
"2024-10-29",
80
],
[
"2024-10-30",
66
],
[
"2024-10-31",
76
],
[
"2024-11-01",
56
],
[
"2024-11-02",
0
],
[
"2024-11-03",
19
],
[
"2024-11-04",
51
],
[
"2024-11-05",
33
],
[
"2024-11-06",
74
],
[
"2024-11-07",
61
],
[
"2024-11-08",
30
],
[
"2024-11-09",
47
],
[
"2024-11-10",
56
],
[
"2024-11-11",
8
],
[
"2024-11-12",
74
],
[
"2024-11-13",
24
],
[
"2024-11-14",
89
],
[
"2024-11-15",
68
],
[
"2024-11-16",
28
],
[
"2024-11-17",
50
],
[
"2024-11-18",
23
],
[
"2024-11-19",
37
],
[
"2024-11-20",
94
],
[
"2024-11-21",
43
],
[
"2024-11-22",
78
],
[
"2024-11-23",
66
],
[
"2024-11-24",
34
],
[
"2024-11-25",
68
],
[
"2024-11-26",
86
],
[
"2024-11-27",
38
],
[
"2024-11-28",
49
],
[
"2024-11-29",
19
],
[
"2024-11-30",
59
],
[
"2024-12-01",
41
],
[
"2024-12-02",
81
],
[
"2024-12-03",
4
],
[
"2024-12-04",
40
],
[
"2024-12-05",
46
],
[
"2024-12-06",
78
],
[
"2024-12-07",
86
],
[
"2024-12-08",
28
],
[
"2024-12-09",
31
],
[
"2024-12-10",
20
],
[
"2024-12-11",
26
],
[
"2024-12-12",
97
],
[
"2024-12-13",
10
],
[
"2024-12-14",
81
],
[
"2024-12-15",
36
],
[
"2024-12-16",
90
],
[
"2024-12-17",
87
],
[
"2024-12-18",
52
],
[
"2024-12-19",
57
],
[
"2024-12-20",
11
],
[
"2024-12-21",
63
],
[
"2024-12-22",
52
],
[
"2024-12-23",
49
],
[
"2024-12-24",
24
],
[
"2024-12-25",
28
],
[
"2024-12-26",
69
],
[
"2024-12-27",
71
],
[
"2024-12-28",
35
],
[
"2024-12-29",
7
],
[
"2024-12-30",
7
],
[
"2024-12-31",
3
]
]
}
]
}