热力图

热力图主要通过颜色去表现数值的大小，必须要配合 visualMap 组件使用

可以应用在直角坐标系以及地理坐标系上，这两个坐标系上的表现形式相差很大，直角坐标系上必须要使用两个类目轴

import * as echarts from 'echarts'
export default {
  install: (app: any) => {
    app.config.globalProperties.$leida = (id: any) => {
      var chartDom = document.getElementById(id)!
      if (chartDom == null) {
        return
      }
      echarts.dispose(chartDom)
      var myChart = echarts.init(chartDom, '', { width: 800, height: 500 })
      const hours = ['1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h', '10h', '11h', '12h']
      const days = ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday']
      const data = [
        [0, 0, 5],
        [0, 1, 7],
        [2, 3, 10],
        [3, 5, 2],
        [5, 5, 1],
        [6, 4, 3],
        [10, 2, 7],
        [3, 3, 6],
        [11, 2, 8],
        [11, 3, 10],
        [12, 4, 6],
        [5, 6, 1],
        [10, 4, 4],
        [10, 3, 7],
        [8, 1, 1],
        [8, 2, 1],
        [9, 2, 1],
        [8, 5, 2],
        [8, 3, 2],
        [9, 6, 1],
        [9, 3, 7],
      ]
      var option = {
        tooltip: {
          position: 'top',
        },
        xAxis: {
          type: 'category',
          data: hours,
        },
        yAxis: {
          type: 'category',
          data: days,
        },
        grid: {
          height: '70%',
          top: '10%',
        },
        visualMap: {
          min: 0,
          max: 10,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
        },
        series: [
          {
            name: '人力需求',
            type: 'heatmap',
            data: data,
            label: {
              show: true,
            },
          },
        ],
      }
      myChart.setOption(option)
    }
  },
}

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。