示例echarts heatmap配置项内容和展示

      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)'
            }
        }
    }]
};