option = {
calendar: {
top: 'middle', // 日历坐标系组件的位置
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 组件的配置直接放在 option 对象的 calendar 属性下。
此外,我们还使用了 series 中的一个 Heatmap 系列,通过 coordinateSystem: 'calendar' 将该系列与日历坐标系关联,用于展示在不同日期的热力图数据。
你可以根据实际需求进一步调整这些配置,以满足你的图表展示需求。
转载请注明出处:http://www.pingtaimeng.com/article/detail/5389/ECharts