option = {
calendar: {
// 位置和大小
top: 'middle', // 日历坐标系组件的垂直位置
left: 'center', // 日历坐标系组件的水平位置
cellSize: [60, 60], // 每个日期单元格的大小 [宽度, 高度]
// 日历范围
range: ['2023-01-01', '2023-12-31'], // 日历的起始和结束日期
// 分隔线
splitLine: {
show: true, // 是否显示分隔线
lineStyle: {
color: 'rgba(255, 255, 255, 0.2)', // 分隔线颜色
width: 1, // 分隔线宽度
type: 'solid' // 分隔线类型
}
},
// 日期单元格样式
itemStyle: {
color: 'rgba(128, 128, 128, 0.1)', // 日期单元格的颜色
borderColor: 'rgba(255, 255, 255, 0.2)', // 日期单元格边框颜色
borderWidth: 1 // 日期单元格边框宽度
},
// 年份标签
yearLabel: {
show: true, // 是否显示年份标签
color: 'rgba(255, 255, 255, 0.7)' // 年份标签颜色
},
// 月份标签
monthLabel: {
show: true, // 是否显示月份标签
color: 'rgba(255, 255, 255, 0.7)' // 月份标签颜色
},
// 日期标签
dayLabel: {
firstDay: 1, // 每周的第一天从星期几开始,0 为周日,1 为周一
show: true, // 是否显示日期标签
color: 'rgba(255, 255, 255, 0.7)' // 日期标签颜色
}
},
series: [
{
type: 'heatmap',
coordinateSystem: 'calendar',
data: [
['2023-01-01', 1], // 日期和数据值的配对
// ... 更多的日期和数据值
]
}
]
// 其他配置项...
};
这里展示了一些常用的 Calendar 组件属性,你可以根据实际需求调整这些配置,以满足你的图表展示需求。在这个例子中,calendar 对象包含了日历坐标系的各种配置选项,而 series 中的 Heatmap 系列通过 coordinateSystem: 'calendar' 将其与日历坐标系关联。
转载请注明出处:http://www.zyzy.cn/article/detail/5390/ECharts