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

      var hours = ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00',
    '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'
];
var days = ['周日', '周六', '周五', '周四', '周三', '周二', '周一'];

var data = [

    [0, 0, 39.9],
    [0, 1, 39.9],
    [0, 2, 39.9],
    [0, 3, 39.9],
    [0, 4, 39.9],
    [0, 5, 3.21],
    [0, 6, 39.9],

    [1, 0, 53.6],
    [1, 1, 53.6],
    [1, 2, 53.6],
    [1, 3, 53.6],
    [1, 4, 53.6],
    [1, 5, 53.6],
    [1, 6, 53.6],

    [2, 0, 19.0],
    [2, 1, 19.0],
    [2, 2, 19.0],
    [2, 3, 19.0],
    [2, 4, 3.21],
    [2, 5, 19.0],
    [2, 6, 19.0],

    [3, 0, 38.5],
    [3, 1, 38.5],
    [3, 2, 9.5],
    [3, 3, 38.5],
    [3, 4, 38.5],
    [3, 5, 38.5],
    [3, 6, 38.5],

    [4, 0, 53.6],
    [4, 1, 53.6],
    [4, 2, 53.6],
    [4, 3, 53.6],
    [4, 4, 34.1],
    [4, 5, 53.6],
    [4, 6, 53.6],

    [5, 0, 19.0],
    [5, 1, 19.0],
    [5, 2, 19.0],
    [5, 3, 3.21],
    [5, 4, 19.0],
    [5, 5, 19.0],
    [5, 6, 19.0],

    [6, 0, 38.5],
    [6, 1, 26.4],
    [6, 2, 26.4],
    [6, 3, 26.4],
    [6, 4, 26.4],
    [6, 5, 26.4],
    [6, 6, 26.4],

    [7, 0, 53.6],
    [7, 1, 53.6],
    [7, 2, 53.6],
    [7, 3, 38.5],
    [7, 4, 53.6],
    [7, 5, 53.6],
    [7, 6, 53.6],

    [8, 0, 12.5],
    [8, 1, 12.5],
    [8, 2, 17.9],
    [8, 3, 12.5],
    [8, 4, 12.5],
    [8, 5, 12.5],
    [8, 6, 12.5],

    [9, 0, 31.0],
    [9, 1, 38.5],
    [9, 2, 38.5],
    [9, 3, 38.5],
    [9, 4, 6.9],
    [9, 5, 38.5],
    [9, 6, 38.5],

    [10, 0, 9.5],
    [10, 1, 0.0],
    [10, 2, 9.5],
    [10, 3, 9.5],
    [10, 4, 9.5],
    [10, 5, 9.5],
    [10, 6, 9.5],

    [11, 0, 31.0],
    [11, 1, 31.0],
    [11, 2, 31.0],
    [11, 3, 31.0],
    [11, 4, 31.0],
    [11, 5, 31.0],
    [11, 6, 12.4],

    [12, 0, 60.5],
    [12, 1, 60.5],
    [12, 2, 60.5],
    [12, 3, 11.4],
    [12, 4, 60.5],
    [12, 5, 60.5],
    [12, 6, 60.5],
];

option = {
    tooltip: {
        position: 'top'
    },
    animation: false,
    grid: {
        height: '80%',
        top: '5%',
        left: '2.5%',
        right: '4%',
        bottom: '5%'
    },
    xAxis: [{
            type: 'category',
            data: hours,
            boundaryGap: false,
            textStyle: {
                fontsize: 8,
                backgroudcolor: 'red'
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#c4c4c4'
                }
            },
            splitLine: {
                show: true
            },
            axisLine: {
                show: false
            }
        },
        {
            type: 'category',
            data: hours,
            boundaryGap: true,
            textStyle: {
                fontsize: 8,
                backgroudcolor: 'red'
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            }
        }
    ],
    yAxis: [{
            type: 'category',
            data: days,
            boundaryGap: true,
            splitArea: {
                show: false
            },
            splitLine: {
                show: true
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        {
            type: 'category',
            data: days,
            boundaryGap: true,
            splitArea: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false,
                alignWithLabel: true
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: false
            }
        }
    ],
    visualMap: {
        min: 0,
        max: 70,
        calculable: false,
        orient: 'horizontal',
        show: false,
        left: 'center',
        color: ['#2493EA', '#EEFAFF']
    },
    series: [{
        name: 'Ratio',
        type: 'heatmap',
        data: data,
        xAxisIndex: 1,
        yAxisIndex: 1,
        label: {
            normal: {
                show: false
            }
        },
        itemStyle: {
            emphasis: {
                shadowBlur: 1,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }

    }]
};