echart 做的
app.title = '笛卡尔坐标系上的热力图';
var hours = ['1', '2', '3', '4', '5'];
var days = ['扁山1', '扁山2', '漉角1',
'漉角2', '漉角3', '漉角4', '漉角5', '横岭湖4', '横岭湖5'];
var data = [ [ 0 , 0 , 0.271290694 ], [ 0 , 1 , 0.298509695 ], [ 0 , 2 , 0.298586394 ], [ 0 , 3 , 0.314656509 ], [ 0 , 4 , 0.329497532 ], [ 1 , 0 , 0.308034869 ], [ 1 , 1 , 0.320120917 ], [ 1 , 2 , 0.40784632 ], [ 1 , 3 , 0.307870124 ], [ 1 , 4 , 0.347526529 ], [ 2 , 0 , 0.394643266 ], [ 2 , 1 , 0.421008675 ], [ 2 , 2 , 0.381456298 ], [ 2 , 3 , 0.409241047 ], [ 2 , 4 , 0.441847744 ], [ 3 , 0 , 0.272392408 ], [ 3 , 1 , 0.284155602 ], [ 3 , 2 , 0.327404577 ], [ 3 , 3 , 0.273258329 ], [ 3 , 4 , 0.363044937 ], [ 4 , 0 , 0.360237119 ], [ 4 , 1 , 0.323634296 ], [ 4 , 2 , 0.334300653 ], [ 4 , 3 , 0.324526573 ], [ 4 , 4 , 0.342906889 ], [ 5 , 0 , 0.373647246 ], [ 5 , 1 , 0.381535032 ], [ 5 , 2 , 0.390887525 ], [ 5 , 3 , 0.355317558 ], [ 5 , 4 , 0.321181579 ], [ 6 , 0 , 0.368774004 ], [ 6 , 1 , 0.390498606 ], [ 6 , 2 , 0.409778996 ], [ 6 , 3 , 0.384993385 ], [ 6 , 4 , 0.359120828 ], [ 7 , 0 , 0.345334199 ], [ 7 , 1 , 0.319917986 ], [ 7 , 2 , 0.263480847 ], [ 7 , 3 , 0.570407181 ], [ 7 , 4 , 0.589850514 ], [ 8 , 0 , 0.366045132 ], [ 8 , 1 , 0.43978222 ], [ 8 , 2 , 0.563744923 ], [ 8 , 3 , 0.541375886 ], [ 8 , 4 , 0.516251119 ]];
data = data.map(function (item) {
return [item[1], item[0], item[2] || '-'];
});
option = {
tooltip: {
position: 'top'
},
animation: false,
grid: {
height: '50%',
y: '10%'
},
xAxis: {
type: 'category',
position: 'top',
data: hours,
splitArea: {
show: true
}
},
yAxis: {
type: 'category',
data: days,
splitArea: {
show: true
}
},
visualMap: {
min: 0.3,
max: 0.6,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [{
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
normal: {
show: false
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};