热力图echarts heatmap配置项内容和展示

      app.title = '热力图';

var hours = ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00',
        '7:00', '8:00', '9:00','10:00','11:00',
        '12:00', '13:00', '14:00p', '15:00', '16:00', '17:00',
        '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
var days = ['20161128', '20161129', '20161130',
         '20161201', '20161202', '20161203', '20161204',
         '20161205', '20161206', '20161207', '20161208', '20161209',
         '20161210', '20161211', '20161212', '20161213',
          '20161214', '20161215', '20161216', '20161217', '20161218', 
          '20161219', '20161220', '20161221', '20161222', '20161223', 
          '20161224'];

var data = [[0,0,74],[0,1,56],[0,2,51],[0,3,46],[0,4,45],[0,5,45],[0,6,48],[0,7,49],[0,8,51],[0,9,52],[0,10,53],[0,11,54],[0,12,54],[0,13,56],[0,14,58],[0,15,61],[0,16,64],[0,17,66],[0,18,70],[0,19,76],[0,20,82],[0,21,85],[0,22,88],[0,23,92],[1,0,96],[1,1,100],[1,2,103],[1,3,103],[1,4,103],[1,5,103],[1,6,103],[1,7,102],[1,8,102],[1,9,103],[1,10,105],[1,11,110],[1,12,116],[1,13,122],[1,14,125],[1,15,126],[1,16,127],[1,17,127],[1,18,127],[1,19,125],[1,20,124],[1,21,128],[1,22,128],[1,23,128],[2,0,126],[2,1,125],[2,2,124],[2,3,125],[2,4,126],[2,5,128],[2,6,130],[2,7,135],[2,8,139],[2,9,142],[2,10,145],[2,11,147],[2,12,149],[2,13,152],[2,14,151],[2,15,152],[2,16,152],[2,17,149],[2,18,145],[2,19,141],[2,20,135],[2,21,127],[2,22,123],[2,23,120],[3,0,117],[3,1,114],[3,2,110],[3,3,106],[3,4,101],[3,5,96],[3,6,91],[3,7,84],[3,8,77],[3,9,73],[3,10,69],[3,11,64],[3,12,58],[3,13,52],[3,14,44],[3,15,37],[3,16,32],[3,17,29],[3,18,32],[3,19,43],[3,20,46],[3,21,47],[3,22,51],[3,23,53],[4,0,57],[4,1,62],[4,2,70],[4,3,77],[4,4,80],[4,5,83],[4,6,86],[4,7,87],[4,8,88],[4,9,89],[4,10,90],[4,11,91],[4,12,93],[4,13,95],[4,14,97],[4,15,101],[4,16,105],[4,17,112],[4,18,118],[4,19,122],[4,20,128],[4,21,135],[4,22,142],[4,23,149],[5,0,153],[5,1,153],[5,2,155],[5,3,160],[5,4,167],[5,5,173],[5,6,174],[5,7,177],[5,8,179],[5,9,182],[5,10,186],[5,11,189],[5,12,193],[5,13,201],[5,14,208],[5,15,216],[5,16,224],[5,17,233],[5,18,242],[5,19,251],[5,20,259],[5,21,267],[5,22,275],[5,23,287],[6,0,300],[6,1,317],[6,2,331],[6,3,343],[6,4,356],[6,5,371],[6,6,388],[6,7,402],[6,8,410],[6,9,417],[6,10,422],[6,11,426],[6,12,427],[6,13,428],[6,14,426],[6,15,421],[6,16,414],[6,17,407],[6,18,399],[6,19,393],[6,20,387],[6,21,381],[6,22,374],[6,23,360],[7,0,344],[7,1,325],[7,2,306],[7,3,288],[7,4,269],[7,5,251],[7,6,234],[7,7,219],[7,8,206],[7,9,191],[7,10,176],[7,11,164],[7,12,153],[7,13,144],[7,14,136],[7,15,132],[7,16,129],[7,17,125],[7,18,119],[7,19,107],[7,20,93],[7,21,'-'],[7,22,65],[7,23,54],[8,0,52],[8,1,52],[8,2,53],[8,3,53],[8,4,53],[8,5,53],[8,6,53],[8,7,54],[8,8,55],[8,9,56],[8,10,57],[8,11,59],[8,12,62],[8,13,65],[8,14,68],[8,15,72],[8,16,75],[8,17,78],[8,18,81],[8,19,85],[8,20,92],[8,21,101],[8,22,110],[8,23,119],[9,0,126],[9,1,133],[9,2,139],[9,3,145],[9,4,150],[9,5,155],[9,6,158],[9,7,159],[9,8,158],[9,9,158],[9,10,161],[9,11,166],[9,12,169],[9,13,170],[9,14,169],[9,15,169],[9,16,175],[9,17,180],[9,18,184],[9,19,187],[9,20,189],[9,21,191],[9,22,192],[9,23,194],[10,0,197],[10,1,201],[10,2,204],[10,3,208],[10,4,212],[10,5,218],[10,6,223],[10,7,229],[10,8,236],[10,9,241],[10,10,242],[10,11,237],[10,12,231],[10,13,226],[10,14,223],[10,15,218],[10,16,'-'],[10,17,202],[10,18,192],[10,19,182],[10,20,171],[10,21,160],[10,22,149],[10,23,139],[11,0,128],[11,1,116],[11,2,105],[11,3,93],[11,4,81],[11,5,74],[11,6,68],[11,7,62],[11,8,55],[11,9,47],[11,10,38],[11,11,36],[11,12,'-'],[11,13,'-'],[11,14,'-'],[11,15,24],[11,16,25],[11,17,28],[11,18,32],[11,19,33],[11,20,37],[11,21,41],[11,22,45],[11,23,49],[12,0,52],[12,1,54],[12,2,55],[12,3,58],[12,4,58],[12,5,59],[12,6,60],[12,7,60],[12,8,60],[12,9,61],[12,10,61],[12,11,61],[12,12,62],[12,13,63],[12,14,62],[12,15,63],[12,16,64],[12,17,65],[12,18,65],[12,19,66],[12,20,67],[12,21,68],[12,22,70],[12,23,72],[13,0,74],[13,1,77],[13,2,80],[13,3,83],[13,4,88],[13,5,95],[13,6,104],[13,7,113],[13,8,123],[13,9,133],[13,10,143],[13,11,153],[13,12,164],[13,13,176],[13,14,187],[13,15,196],[13,16,203],[13,17,209],[13,18,216],[13,19,'-'],[13,20,228],[13,21,234],[13,22,241],[13,23,248],[14,0,254],[14,1,259],[14,2,264],[14,3,268],[14,4,271],[14,5,273],[14,6,275],[14,7,277],[14,8,278],[14,9,278],[14,10,279],[14,11,281],[14,12,282],[14,13,282],[14,14,282],[14,15,'-'],[14,16,'-'],[14,17,'-'],[14,18,'-'],[14,19,'-'],[14,20,282],[14,21,281],[14,22,278],[14,23,275],[15,0,271],[15,1,268],[15,2,263],[15,3,258],[15,4,253],[15,5,245],[15,6,236],[15,7,227],[15,8,217],[15,9,208],[15,10,196],[15,11,183],[15,12,168],[15,13,156],[15,14,144],[15,15,135],[15,16,127],[15,17,118],[15,18,107],[15,19,96],[15,20,86],[15,21,76],[15,22,68],[15,23,59],[16,0,51],[16,1,41],[16,2,34],[16,3,28],[16,4,25],[16,5,25],[16,6,24],[16,7,27],[16,8,29],[16,9,26],[16,10,23],[16,11,23],[16,12,23],[16,13,23],[16,14,23],[16,15,23],[16,16,26],[16,17,31],[16,18,33],[16,19,37],[16,20,41],[16,21,46],[16,22,50],[16,23,53],[17,0,56],[17,1,58],[17,2,61],[17,3,62],[17,4,64],[17,5,64],[17,6,65],[17,7,65],[17,8,66],[17,9,67],[17,10,68],[17,11,67],[17,12,68],[17,13,69],[17,14,69],[17,15,70],[17,16,69],[17,17,67],[17,18,65],[17,19,64],[17,20,63],[17,21,62],[17,22,61],[17,23,59],[18,0,60],[18,1,62],[18,2,65],[18,3,69],[18,4,73],[18,5,73],[18,6,74],[18,7,73],[18,8,74],[18,9,75],[18,10,76],[18,11,78],[18,12,82],[18,13,85],[18,14,93],[18,15,104],[18,16,113],[18,17,117],[18,18,125],[18,19,139],[18,20,153],[18,21,169],[18,22,184],[18,23,194],[19,0,198],[19,1,201],[19,2,204],[19,3,201],[19,4,194],[19,5,199],[19,6,204],[19,7,208],[19,8,211],[19,9,213],[19,10,216],[19,11,220],[19,12,226],[19,13,233],[19,14,239],[19,15,242],[19,16,248],[19,17,254],[19,18,262],[19,19,266],[19,20,271],[19,21,276],[19,22,278],[19,23,283],[20,0,292],[20,1,298],[20,2,302],[20,3,309],[20,4,316],[20,5,320],[20,6,325],[20,7,329],[20,8,333],[20,9,337],[20,10,341],[20,11,343],[20,12,343],[20,13,342],[20,14,339],[20,15,336],[20,16,331],[20,17,327],[20,18,324],[20,19,321],[20,20,318],[20,21,315],[20,22,313],[20,23,311],[21,0,307],[21,1,303],[21,2,301],[21,3,301],[21,4,302],[21,5,303],[21,6,302],[21,7,299],[21,8,296],[21,9,293],[21,10,292],[21,11,292],[21,12,291],[21,13,290],[21,14,290],[21,15,290],[21,16,291],[21,17,291],[21,18,289],[21,19,288],[21,20,287],[21,21,289],[21,22,296],[21,23,306],[22,0,313],[22,1,321],[22,2,329],[22,3,336],[22,4,341],[22,5,347],[22,6,355],[22,7,364],[22,8,373],[22,9,382],[22,10,388],[22,11,393],[22,12,397],[22,13,406],[22,14,413],[22,15,419],[22,16,425],[22,17,430],[22,18,435],[22,19,438],[22,20,'-'],[22,21,441],[22,22,439],[22,23,437],[23,0,437],[23,1,435],[23,2,432],[23,3,429],[23,4,427],[23,5,426],[23,6,425],[23,7,426],[23,8,427],[23,9,427],[23,10,429],[23,11,431],[23,12,433],[23,13,429],[23,14,427],[23,15,426],[23,16,426],[23,17,427],[23,18,429],[23,19,432],[23,20,433],[23,21,435],[23,22,436],[23,23,436],[24,0,437],[24,1,437],[24,2,438],[24,3,434],[24,4,425],[24,5,415],[24,6,405],[24,7,392],[24,8,377],[24,9,363],[24,10,369],[24,11,378],[24,12,378],[24,13,378],[24,14,378],[24,15,336],[24,16,293],[24,17,244],[24,18,223],[24,19,203],[24,20,177],[24,21,151],[24,22,127],[24,23,105],[25,0,84],[25,1,67],[25,2,51],[25,3,34],[25,4,34],[25,5,34],[25,6,33],[25,7,33],[25,8,32],[25,9,33],[25,10,33],[25,11,'-'],[25,12,'-'],[25,13,'-'],[25,14,'-'],[25,15,'-'],[25,16,'-'],[25,17,'-'],[25,18,'-'],[25,19,43],[25,20,47],[25,21,51],[25,22,53],[25,23,54],[26,0,56],[26,1,59],[26,2,62],[26,3,65],[26,4,68],[26,5,72],[26,6,78],[26,7,85],[26,8,92],[26,9,98],[26,10,105],[26,11,112],[26,12,119],[26,13,128],[26,14,135],[26,15,141],[26,16,149],[26,17,156],[26,18,161],[26,19,165],[26,20,167],[26,21,170],[26,22,175],[26,23,181]];
data = data.map(function (item) {
    return [item[1], item[0], item[2] || '-'];
});

option = {
    tooltip: {
        position: 'top'
    },
    animation: false,
    grid: {
        height: '75%',
        y: '10%'
    },
    xAxis: {
        type: 'category',
        data: hours,
        splitArea: {
            show: true
        }
    },
    yAxis: {
        type: 'category',
        data: days,
        splitArea: {
            show: true
        }
    },
    visualMap: {
        min: 0,
        max: 400,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: '5%'
    },
    series: [{
        name: 'Punch Card',
        type: 'heatmap',
        data: data,
        label: {
            normal: {
                show: true
            }
        },
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};