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

      var x = ['F>24', '18<F≤24', '12<F≤18', '6<F≤12', '0<F≤6'];
var y = ['R≤30', '30<R≤60', '60<R≤90', '90<R≤180', 'R>180'];

var data = [];
var min = Infinity;
var max = -Infinity;
var total = 0;

for (let i = 0; i < x.length; i++) {
    for (let j = 0; j < y.length; j++) {
        const v = Math.trunc(Math.random() * 1e3);
        if (v < min) {
            min = v;
        }
        if (v > max) {
            max = v;
        }
        data.push([i, j, v]);
        total += v;
    }
}

option = {
    tooltip: {},
    grid: [
        {
            containLabel: false,
            top: '15%',
            right: '30%',
            bottom: '30%',
            left: '10%',
        },
        {
            containLabel: false,
            top: '15%',
            right: '5%',
            bottom: '30%',
            left: '75%',
        },
        {
            containLabel: false,
            top: '80%',
            right: '30%',
            bottom: '10%',
            left: '10%',
        },
        {
            containLabel: false,
            top: '80%',
            right: '5%',
            bottom: '10%',
            left: '75%',
        },
    ],
    xAxis: [
        {
            type: 'category',
            name: '到站次数(F)',
            gridIndex: 0,
            nameGap: 0,
            nameTextStyle: {
                align: 'center',
                verticalAlign: 'top',
                padding: [14, 0, 0, 0],
                color: '#444',
            },
            data: x,
            axisLabel: {
                margin: 14,
                color: '#666',
            },
            splitArea: {
                show: true,
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        {
            type: 'category',
            gridIndex: 1,
            position: 'top',
            data: ['行合计'],
            axisLabel: {
                margin: 14,
                color: '#666',
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        {
            type: 'category',
            gridIndex: 2,
            show: false,
        },
        {
            type: 'category',
            gridIndex: 3,
            show: false,
        },
    ],
    yAxis: [
        {
            type: 'category',
            name: '最新到站(R)',
            gridIndex: 0,
            nameGap: 0,
            nameTextStyle: {
                align: 'right',
                verticalAlign: 'bottom',
                padding: [0, 14, 0, 0],
                color: '#444',
            },
            data: y,
            axisLabel: {
                margin: 14,
                color: '#666',
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        {
            type: 'category',
            gridIndex: 1,
            show: false,
        },
        {
            type: 'category',
            gridIndex: 2,
            data: ['列合计'],
            axisLabel: {
                margin: 14,
                color: '#666',
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        {
            type: 'category',
            gridIndex: 3,
            axisLabel: {
                show: false,
                margin: 14,
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
    ],
    visualMap: [
        {
            min: 0,
            max: max,
            seriesIndex: 0,
            padding: 0,
            calculable: true,
            orient: 'horizontal',
            inverse: true,
            top: '5%',
            right: '30%',
            itemWidth: 18,
            itemHeight: 114,
            inRange: {
                color: ['#99d7ff', '#007bcb'],
                symbolSize: [100, 100],
            },
            text: ['高', '低'],
            textGap: 8,
            textStyle: {
                color: '#666',
            },
        },
    ],
    series: [
        {
            name: 'Punch Card',
            type: 'heatmap',
            data: data,
            gridIndex: 0,
            xAxisIndex: 0,
            yAxisIndex: 0,
            label: {
                show: true,
                formatter: (p) => {
                    const v = p.value[2];
                    return `${v} | ${((v / total) * 100).toFixed(2)}%`;
                },
                color: '#333',
            },
            itemStyle: {
                borderWidth: 2,
                borderColor: '#fff',
            },
        },
        {
            name: 'Punch Card',
            type: 'heatmap',
            data: [
                [
                    0,
                    0,
                    data.reduce((r, e) => {
                        if (e[1] === 0) {
                            r += e[2];
                        }
                        return r;
                    }, 0),
                ],
                [
                    0,
                    1,
                    data.reduce((r, e) => {
                        if (e[1] === 1) {
                            r += e[2];
                        }
                        return r;
                    }, 0),
                ],
                [
                    0,
                    2,
                    data.reduce((r, e) => {
                        if (e[1] === 2) {
                            r += e[2];
                        }
                        return r;
                    }, 0),
                ],
                [
                    0,
                    3,
                    data.reduce((r, e) => {
                        if (e[1] === 3) {
                            r += e[2];
                        }
                        return r;
                    }, 0),
                ],
                [
                    0,
                    4,
                    data.reduce((r, e) => {
                        if (e[1] === 4) {
                            r += e[2];
                        }
                        return r;
                    }, 0),
                ],
            ],
            gridIndex: 1,
            xAxisIndex: 1,
            yAxisIndex: 1,
            label: {
                show: true,
                formatter: (p) => {
                    const v = p.value[2];
                    return `${v} | ${((v / total) * 100).toFixed(2)}%`;
                },
                color: '#333',
            },
            itemStyle: {
                borderWidth: 2,
                borderColor: '#fff',
                color: '#E0EAFB',
            },
        },
        {
            name: 'Punch Card',
            type: 'heatmap',
            data: [
                [
                    0,
                    0,
                    data.reduce((r, e) => {
                        if (e[0] === 0) {
                            r += e[2];
                        }
                        return r;
                    }, 0),
                ],
                [
                    1,
                    0,
                    data.reduce((r, e) => {
                        if (e[0] === 1) {
                            r += e[2];
                        }
                        return r;
                    }, 0),
                ],
                [
                    2,
                    0,
                    data.reduce((r, e) => {
                        if (e[0] === 2) {
                            r += e[2];
                        }
                        return r;
                    }, 0),
                ],
                [
                    3,
                    0,
                    data.reduce((r, e) => {
                        if (e[0] === 3) {
                            r += e[2];
                        }
                        return r;
                    }, 0),
                ],
                [
                    4,
                    0,
                    data.reduce((r, e) => {
                        if (e[0] === 4) {
                            r += e[2];
                        }
                        return r;
                    }, 0),
                ],
            ],
            gridIndex: 2,
            xAxisIndex: 2,
            yAxisIndex: 2,
            label: {
                show: true,
                formatter: (p) => {
                    const v = p.value[2];
                    return `${v} | ${((v / total) * 100).toFixed(2)}%`;
                },
                color: '#333',
            },
            itemStyle: {
                borderWidth: 2,
                borderColor: '#fff',
                color: '#E0EAFB',
            },
        },
        {
            name: 'Punch Card',
            type: 'heatmap',
            data: [[0, 0, total]],
            gridIndex: 3,
            xAxisIndex: 3,
            yAxisIndex: 3,
            label: {
                show: true,
                formatter: (p) => {
                    const v = p.value[2];
                    return `${v} | ${((v / total) * 100).toFixed(2)}%`;
                },
                color: '#333',
            },
            itemStyle: {
                borderWidth: 1,
                borderColor: '#009afe',
                color: '#E0EAFB',
            },
        },
    ],
    backgroundColor: '#fff',
};