<!--
  模板: 热力图 (heatmap)
  引擎: ECharts
  数据形态: S2/S12 多维矩阵/多维时序矩阵
  DOM ID: chart-heatmap
  说明: 数值矩阵映射为颜色，模式识别极快
-->
(function() {
  const dom = document.getElementById('chart-heatmap');
  const myChart = echarts.init(dom);
  const hours = ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'];
  const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
  const heatData = [];
  for (let i = 0; i < 7; i++) for (let j = 0; j < 12; j++) heatData.push([j, i, Math.random() * 100]);
  myChart.setOption({
    tooltip: { position: 'top' }, grid: { left: '12%', right: '12%', bottom: '14%', top: '8%' },
    xAxis: { type: 'category', data: hours, splitArea: { show: true } },
    yAxis: { type: 'category', data: days, splitArea: { show: true } },
    visualMap: { min: 0, max: 100, calculable: true, orient: 'horizontal', left: 'center', bottom: '0%', inRange: { color: ['#e0f3db', '#a8ddb5', '#43a2ca', '#0868ac'] } },
    series: [{ type: 'heatmap', data: heatData, label: { show: false } }]
  });
  window.addEventListener('resize', () => myChart.resize());
})();