var hours = ['0-100', '100-200', '200-300', '300-400', '400-500', '500-600', '600-700',
'700-800', '800-900', '900-1000', '1000-1100', '1100-1200',
'1200-1300', '1300-1400', '1400-1500', '1500-1600', '1600-1700', '1700-1800',
'1800-1900', '1900-2000', '1900-2000'];
var days = ['Q1', 'Q2', 'Q3', 'Q4', ];
var data = [
[0, 0, 7524],
[0, 1, 14567],
[0, 2, 9100],
[0, 3, 0],
[1, 0, 490],
[1, 1, 882],
[1, 2, 170],
[1, 3, 0],
[2, 0, 55],
[2, 1, 131],
[2, 2, 60],
[2, 3, 0],
[3, 0, 43],
[3, 1, 94],
[3, 2, 31],
[3, 3, 0],
[4, 0, 46],
[4, 1, 69],
[4, 2, 20],
[4, 3, 0],
[5, 0, 42],
[5, 1, 560],
[5, 2, 502],
[5, 3, 0],
[6, 0, 27],
[6, 1, 40],
[6, 2, 13],
[6, 3, 0],
[7, 0, 12],
[7, 1, 29],
[7, 2, 14],
[7, 3, 0],
[8, 0, 8],
[8, 1, 24],
[8, 2, 13],
[8, 3, 0],
[9, 0, 10],
[9, 1, 22],
[9, 2, 8],
[9, 3, 0],
[10, 0, 2],
[10, 1, 6],
[10, 2, 3],
[10, 3, 0],
[11, 0, 5],
[11, 1, 12],
[11, 2, 4],
[11, 3, 0],
[12, 0, 6],
[12, 1, 6],
[12, 2, 2],
[12, 3, 0],
[13, 0, 3],
[13, 1, 12],
[13, 2, 6],
[13, 3, 0],
[14, 0, 2],
[14, 1, 4],
[14, 2, 2],
[14, 3, 0],
[15, 0, 3],
[15, 1, 6],
[15, 2, 0],
[15, 3, 0],
[16, 0, 3],
[16, 1, 7],
[16, 2, 6],
[16, 3, 0],
[17, 0, 2],
[17, 1, 8],
[17, 2, 0],
[17, 3, 0],
[18, 0, 4],
[18, 1, 7],
[18, 2, 1],
[18, 3, 0],
[19, 0, 0],
[19, 1, 7],
[19, 2, 2],
[19, 3, 0],
[20, 0, 533],
[20, 1, 554],
[20, 2, 225],
[20, 3, 0],
];
option = {
tooltip: {
position: 'top',
},
animation: false,
grid: {
height: '80%',
top: '5%'
},
xAxis: {
type: 'category',
data: hours,
splitArea: {
show: true
},
axisTick: {
lineStyle: {
color: '#c4c4c4'
}
}
},
yAxis: {
type: 'category',
data: days,
splitArea: {
show: true
},
axisTick: {
show: false
}
},
visualMap: {
show:false,
min: 0,
max: 70,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%',
color: ['#0d59b7', '#bee8ff']
},
series: [{
name: '',
type: 'heatmap',
data: data,
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};