如何根据数字排序自定义热图的颜色，高手求教？echarts heatmap配置项内容和展示

我想让颜色分为五档，对数字进行排序，0-20%为一个颜色，20%-40%为一个颜色，40%-60%为一个颜色，60%-80%为一个颜色，80%-100%为一个颜色，我应该怎么实现呢？

      app.title = '笛卡尔坐标系上的热力图';

var hours = ['整体','前期准备','开源','简历投递','简历评估','笔试','面试','面委会review',
'分配','offer/sell','复捞','内推','其他'];
var days = ['整体设计', '规则制定', '时间安排',
        '人员配置', '岗位设置', '评估标准', '人才跟进','运营执行',
        '技术支持','内部沟通','外部沟通','配套保障','薪酬政策','雇主品牌'];

var data = [[0,0,38],[0,1,2],[0,2,134],[0,3,7],[0,5,13],[0,6,25],[0,9,5],[0,12,2],
[1,0,11],[1,1,1],[1,2,9],[1,3,147],[1,4,14],[1,5,89],[1,6,55],[1,8,5],[1,9,8],[1,10,9],[1,11,9],[1,12,2],
[2,0,75],[2,2,1541],[2,3,12],[2,4,2],[2,5,64],[2,6,68],[2,9,4],[2,12,2],
[3,0,2],[3,2,30],[3,6,27],[3,9,1],
[4,0,2],[4,1,12],[4,2,3],[4,3,205],[4,5,1],[4,6,11],[4,8,1],[4,9,1],
[5,0,9],[5,1,1],[5,3,4],[5,4,35],[5,5,694],[5,6,74],[5,10,1],[5,11,1],[5,12,1],
[6,0,289],[6,2,10],[6,3,338],[6,4,135],[6,5,448],[6,6,443],[6,7,1],[6,8,3],[6,9,53],[6,10,15],[6,11,15],[6,12,6],
[7,0,18],[7,2,41],[7,3,10],[7,4,3],[7,5,7],[7,6,26],[7,10,1],[7,11,1],[7,12,1],
[8,0,15],[8,2,2],[8,3,201],[8,4,6],[8,5,82],[8,6,98],[8,8,1],[8,9,1],[8,12,6],
[8,0,15],[8,2,2],[8,3,201],[8,4,6],[8,5,82],[8,6,98],[8,8,1],[8,9,1],[8,12,6],
[9,0,2],[9,5,3],[9,6,8],[9,10,1],[9,11,1],
[10,0,44],[10,1,2],[10,2,44],[10,3,35],[10,4,5],[10,5,31],[10,6,276],[10,7,1],[10,8,3],[10,9,46],[10,10,1],[10,11,1],[10,12,3],
[11,2,115],[11,3,1],[11,5,1],[11,6,9,],[11,9,2],
[12,0,2],[12,4,1],[12,5,1],[12,6,2],[12,9,41],
[13,0,11],[13,1,1],[13,2,12],[13,9,22]];

data = data.map(function (item) {
    return [item[1], item[0], item[2] || '-'];
});

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