周分布echarts heatmap配置项内容和展示

      var hours = ['11下午', '10下午', '09下午', '08下午', '07下午', '06下午', '05下午', '04下午', '03下午', '02下午', '01下午', '12下午', '11上午', '10上午', '09上午', '08上午', '07上午', '06上午', '05上午', '04上午', '03上午', '02上午', '01上午', '12上午'];
var days = ['周日', '周一', '周二', '周三',
    '周四', '周五', '周六'
];
var data = [
    [0, 0, 5],
    [1, 0, 1],
    [2, 0, 0],
    [3, 0, 0],
    [4, 0, 0],
    [5, 0, 0],
    [6, 0, 0],
    [7, 0, 0],
    [8, 0, 0],
    [9, 0, 0],
    [10, 0, 0],
    [11, 0, 2],
    [12, 0, 4],
    [13, 0, 1],
    [14, 0, 1],
    [15, 0, 3],
    [16, 0, 4],
    [17, 0, 6],
    [18, 0, 4],
    [19, 0, 4],
    [20, 0, 3],
    [21, 0, 3],
    [22, 0, 2],
    [23, 0, 5],
    [0, 1, 7],
    [1, 1, 0],
    [2, 1, 0],
    [3, 1, 0],
    [4, 1, 0],
    [5, 1, 0],
    [6, 1, 0],
    [7, 1, 0],
    [8, 1, 0],
    [9, 1, 0],
    [10, 1, 5],
    [11, 1, 2],
    [12, 1, 2],
    [13, 1, 6],
    [14, 1, 9],
    [15, 1, 11],
    [16, 1, 6],
    [17, 1, 7],
    [18, 1, 8],
    [19, 1, 12],
    [20, 1, 5],
    [21, 1, 5],
    [22, 1, 7],
    [23, 1, 2],
    [0, 2, 1],
    [1, 2, 1],
    [2, 2, 0],
    [3, 2, 0],
    [4, 2, 0],
    [5, 2, 0],
    [6, 2, 0],
    [7, 2, 0],
    [8, 2, 0],
    [9, 2, 0],
    [10, 2, 3],
    [11, 2, 2],
    [12, 2, 1],
    [13, 2, 9],
    [14, 2, 8],
    [15, 2, 10],
    [16, 2, 6],
    [17, 2, 5],
    [18, 2, 5],
    [19, 2, 5],
    [20, 2, 7],
    [21, 2, 4],
    [22, 2, 2],
    [23, 2, 4],
    [0, 3, 7],
    [1, 3, 3],
    [2, 3, 0],
    [3, 3, 0],
    [4, 3, 0],
    [5, 3, 0],
    [6, 3, 0],
    [7, 3, 0],
    [8, 3, 1],
    [9, 3, 0],
    [10, 3, 5],
    [11, 3, 4],
    [12, 3, 7],
    [13, 3, 14],
    [14, 3, 13],
    [15, 3, 12],
    [16, 3, 9],
    [17, 3, 5],
    [18, 3, 5],
    [19, 3, 10],
    [20, 3, 6],
    [21, 3, 4],
    [22, 3, 4],
    [23, 3, 1],
    [0, 4, 1],
    [1, 4, 3],
    [2, 4, 0],
    [3, 4, 0],
    [4, 4, 0],
    [5, 4, 1],
    [6, 4, 0],
    [7, 4, 0],
    [8, 4, 0],
    [9, 4, 2],
    [10, 4, 4],
    [11, 4, 4],
    [12, 4, 2],
    [13, 4, 4],
    [14, 4, 4],
    [15, 4, 14],
    [16, 4, 12],
    [17, 4, 1],
    [18, 4, 8],
    [19, 4, 5],
    [20, 4, 3],
    [21, 4, 7],
    [22, 4, 3],
    [23, 4, 0],
    [0, 5, 2],
    [1, 5, 1],
    [2, 5, 0],
    [3, 5, 3],
    [4, 5, 0],
    [5, 5, 0],
    [6, 5, 0],
    [7, 5, 0],
    [8, 5, 2],
    [9, 5, 0],
    [10, 5, 4],
    [11, 5, 1],
    [12, 5, 5],
    [13, 5, 10],
    [14, 5, 5],
    [15, 5, 7],
    [16, 5, 11],
    [17, 5, 6],
    [18, 5, 0],
    [19, 5, 5],
    [20, 5, 3],
    [21, 5, 4],
    [22, 5, 2],
    [23, 5, 0],
    [0, 6, 1],
    [1, 6, 0],
    [2, 6, 0],
    [3, 6, 0],
    [4, 6, 0],
    [5, 6, 0],
    [6, 6, 0],
    [7, 6, 0],
    [8, 6, 0],
    [9, 6, 0],
    [10, 6, 1],
    [11, 6, 0],
    [12, 6, 2],
    [13, 6, 1],
    [14, 6, 3],
    [15, 6, 4],
    [16, 6, 0],
    [17, 6, 0],
    [18, 6, 0],
    [19, 6, 0],
    [20, 6, 1],
    [21, 6, 2],
    [22, 6, 2],
    [23, 6, 6]
];
data = data.map(function(item) {
    return [item[1], item[0], item[2] || '-'];
});

option = {
    tooltip: {
        position: 'top',
        formatter: function(params, ticket, callback) {
            return `${params['name']},${params['data'][1]}时</br><span style="font-size:20px;">${params['data'][2]}</span></br>用户数`;
        }
    },
    grid: {
        height: '50%',
        width: 300,
    },
    xAxis: {
        type: 'category',
        data: days,
        splitArea: {
            show: true
        },
        splitLine: {
            show: true
        },
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: "#ccc"
            }
        },
        axisLabel: {
            textStyle: {
                fontWeight: 'lighter',
                color: '#222'
            }
        }
    },
    yAxis: {
        type: 'category',
        position: 'right',
        data: hours,
        nameTextStyle: {
            color: "#ddd",
            fontStyle: "italic"
        },
        splitLine: {
            show: true
        },
        splitArea: {
            show: true
        },
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: "#ccc"
            }
        },
        axisLabel: {
            textStyle: {
                fontWeight: 'lighter',
                color: '#222'
            }
        }
    },
    visualMap: {
        min: 0,
        max: 10,
        calculable: true,
        orient: 'horizontal',
        left: '16%',
        bottom: '35%',
        inRange: {
            color: ['#eee', '#4285f4'],
        }
    },
    series: [{
        type: 'heatmap',
        data: data,
        label: {
            normal: {
                show: false
            }
        }
    }]
};