var x = ['F>24', '18180']; 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', };

自定义热力图