echarts 自定义热力图 、数据组装+格式化

// 后端返回的数据格式
yAxis = [
  {
    "data": [],
    "deviceName": "充电桩_01"
  },
  {
    "data": [
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0
    ],
    "deviceName": "测试_2"
  },
  {
    "data": [],
    "deviceName": "测试_3"
  },
  {
    "data": [],
    "deviceName": "测试_004"
  },
  {
    "data": [
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      1.76,
      3.49,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0
    ],
    "deviceName": "单枪充电桩"
  }
]
xAxis = [
  "00:00",
  "01:00",
  "02:00",
  "03:00",
  "04:00",
  "05:00",
  "06:00",
  "07:00",
  "08:00",
  "09:00",
  "10:00",
  "11:00",
  "12:00",
  "13:00",
  "14:00",
  "15:00",
  "16:00",
  "17:00",
  "18:00",
  "19:00",
  "20:00",
  "21:00",
  "22:00",
  "23:00"
]
piles = [] //x轴的项名称
let data = []
//  组装热力图所需要的数据格式
for (let i = 0; i < xAxis.length; i++) {
		piles.push(xAxis[i].deviceName) 
          for (let j = 0; j < yAxis.length; j++) {
            data.push([j, i, resData.yAxis[j].data[i]]);
          }
}
//  [ [11,1 4,2,4.48] , ...]  数组内的数据依次代表 x轴位置 y位置 value
heartData = data.map(function (item) {
          return [item[1], item[0], item[2] || "-"];
 })
// 配置项
 heartOption: {
        tooltip: {
          position: "top",
          formatter: function (params) {
    
            return piles[params.data[1]] + "能耗:" + params.value[2] + "kW·h";
          },
        },
        grid: {
          width: "93%",
          height: "80%",
          left: "6%",
          top: "15%",
          right: "5%",
        },
        xAxis: {
          type: "category",
          data: xAxis ,
          splitArea: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#FFFFFF",
            fontSize: 12,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#161212", //同背景色
              width: 2,
              // type: 'dashed',
            },
          },
        },
        yAxis: {
          type: "category",
          data: piles.reverse(),
          splitArea: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#FFFFFF",
            fontSize: 12,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#161212", //同背景色
              width: 2,
            },
          },
        },
        visualMap: {
          min: 0,
          max: 10,
          calculable: true,
          orient: "horizontal",
          left: "center",
          top: "0",
          inRange: {
            color: ["#00e5fe00", "#00E6FE"],
          },
          textStyle: {
            color: "#A3C7E7",
          },
          text: ["能耗", ""],
        },
        series: [
          {
            name: "电桩能耗",
            type: "heatmap",
            data: heartData,
            label: {
              show: false,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            zlevel: -1,
          },
        ],
      },

效果图