echarts中热力图和日历组件的结合
function getVirtulData(year, month) { //随机生成月份的值
var date = +echarts.number.parseDate(year + '-' + month + '-01');
var end = +echarts.number.parseDate(year + '-' + (month+1) + '-01');
var dayTime = 3600 * 24 * 1000;
var data = [];
for (var time = date; time < end; time += dayTime) {
data.push([
echarts.format.formatTime('yyyy-MM-dd', time),
Math.floor(Math.random() * 800)
]);
}
return data;
}
let lastM; //上个月
let lastLM; //上上个月
if (month < 2) {
lastM = 12;
lastLM = 11;
}else if (month < 3) {
lastM = 1;
lastLM = 12;
} else {
lastM = month - 1;
lastLM = month - 2;
}
const option = { //以下为option的配置
visualMap: {
min: 0,
max: 800,
calculable: true,
orient: 'vertical',
right: 10,
top: '25%',
color: ['#0088ff', '#fff'] //数值范围对应的颜色范围
},
calendar: [{ //calendar若为数组,则是有多个日历,每个对象是一个日历
orient: 'vertical',
top: 35,
left: 100,
right: 100,
range: year + '-' + month, //range可以是一个月也可以是1年,一年的话每个月的日历会连在一起,因为年是整体
itemStyle: {
normal: {
borderWidth: 0.5
}
},
yearLabel: {
show: false
},
monthLabel: {
show: true,
nameMap: 'cn',
fontWeight: 'bold',
fontSize: 18,
vertical: 'middle',
margin: 10
},
dayLabel: {
nameMap: 'cn'
}
},{
orient: 'vertical',
top: 170,
left: 100,
right: 100,
range: year + '-' + lastM,
itemStyle: {
normal: {
borderWidth: 0.5
}
},
yearLabel: {
show: false
},
monthLabel: {
show: true,
nameMap: 'cn',
fontWeight: 'bold',
fontSize: 18,
vertical: 'middle',
margin: 10
},
dayLabel: {
show: false
}
}, {
orient: 'vertical',
top: 305,
left: 100,
right: 100,
range: year + '-' + lastLM,
itemStyle: {
normal: {
borderWidth: 0.5
}
},
yearLabel: {
show: false
},
monthLabel: {
show: true,
nameMap: 'cn',
fontWeight: 'bold',
fontSize: 18,
vertical: 'middle',
margin: 10
},
dayLabel: {
show: false
}
}],
series: [{ //并不一定对应calendar中的各个
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 0, //此属性是决定对应calendar数组中的哪个日历,相当于数组的index
data: getVirtulData(year, month)
},{
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 1,
data: getVirtulData(year, lastM)
},{
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 2,
data: getVirtulData(year, lastLM)
}]
};