[Bug] axisPointer label has been covered when data is large in heatmap

[CrazyWood007]

Version

5.3.2

Link to Minimal Reproduction

https://codepen.io/crazywood007/pen/vYRaJzL

Steps to Reproduce

1. Create chart at any site, it dos't matter.
2. The option is:

{
  grid: {
    left: 50,
    right: 46,
    bottom: 60,
    top: 50,
    containLabel: true
  },
  toolbox: {
    show: false,
    top: 5,
    right: 40,
    iconStyle: {
      normal: {
        borderColor: 'rgba(255, 255, 255, 0.6)'
      },
      emphasis: {
        borderColor: '#00ccff'
      }
    },
    feature: {
      dataZoom: {
        yAxisIndex: 'none',
        title: {
          zoom: 'Zoom-in',
          back: 'Revert'
        }
      },
      restore: {
        title: 'Revert to original'
      },
      saveAsImage: {
        name: 'hhh',
        backgroundColor: 'rgb(9, 77, 103)',
        title: 'Save as png',
        pixelRatio: 1.2
      }
    },
    showTitle: false,
    tooltip: {
      show: true,
      backgroundColor: '#222',
      textStyle: {
        fontSize: 12
      },
      confine: true,
      extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
    }
  },
  dataZoom: [
    {
      show: true,
      showDetail: false,
      yAxisIndex: 0,
      start: 0,
      end: 100,
      backgroundColor: 'transparent',
      fillerColor: 'rgba(0, 204, 255, 0.3)',
      borderColor: 'rgba(255, 255, 255, 0.3)',
      textStyle: {
        color: 'rgba(255,255,255,0.4)'
      },
      handleStyle: {
        color: '#00ccff'
      }
    }
  ],
  tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    borderWidth: 1,
    padding: 8,
    textStyle: {
      fontSize: 12,
      color: '#ffffff'
    },
    borderColor: '#00ccff'
  },
  legend: {
    data: ['label1', 'label2'],
    bottom: 35,
    left: 'center'
  },
  xAxis: {
    type: 'category',
    data: ['2022-01-01', '2022-01-02'],
    splitArea: {
      show: true
    },
    axisLabel: {
      show: true,
      interval: 4
    },
    splitLine: {
      show: false
    },
    axisTick: {
      show: false,
      alignWithLabel: true
    }
  },
  yAxis: {
    type: 'category',
    data: ['ALongLongLongName1', 'ALongLongLongName2'],
    splitArea: {
      show: true
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisPointer: {
      show: true,
      snap: false,
      trigger: 'item',
      type: 'shadow',
      shadowStyle: {
        color: 'transparent'
      },
      label: {
        margin: 100,
        backgroundColor: 'green'
      }
    },
    axisLabel: {
      width: 50,
      overflow: 'truncate' // 截断，显示...
    }
  },
  visualMap: [
    {
      min: 0,
      max: 20000,
      range: [0, 20000],
      precision: 2,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: '10',
      seriesIndex: 0,
      color: ['#FFCC66', '#00CCFF'],
      text: ['High', 'Low'],
      itemWidth: 14,
      itemHeight: 360,
      textStyle: {
        color: 'rgba(255,255,255,0.6)'
      }
    },
    {
      min: 0,
      max: 0,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: '100',
      seriesIndex: 1,
      zlevel: 1,
      show: false,
      color: ['#FF5F74']
    }
  ],
  series: [
    {
      name: 'label1',
      type: 'heatmap',
      label: {
        normal: {
          color: '#ffffff',
          fontSize: 14
        }
      },
      itemStyle: {
        emphasis: {
          borderColor: 'rgb(98, 118, 128)'
        },
        normal: {
          borderColor: 'rgb(98, 118, 128)',
          color: {
            colorStops: [
              {
                offset: 0,
                color: '#FFCC66'
              },
              {
                offset: 1,
                color: '#00CCFF'
              }
            ]
          }
        }
      },
      symbol: 'circle',
      symbolSize: 2,
      showSymbol: true,
      showAllSymbol: true,
      hoverAnimation: true,
      data: [
        ['2022-01-01', 'ALongLongLongName2', 1111],
        ...Array(1999)
          .fill(1)
          .map(() => ['1', '1', 1])
      ],
      unit: 'kWh'
    },
    {
      name: 'label2',
      type: 'heatmap',
      label: {
        normal: {
          color: '#ffffff',
          fontSize: 14
        }
      },
      itemStyle: {
        emphasis: {
          borderColor: 'rgb(98, 118, 128)'
        },
        normal: {
          borderColor: 'rgb(98, 118, 128)',
          color: '#FF5F74'
        }
      },
      symbol: 'circle',
      symbolSize: 2,
      showSymbol: true,
      showAllSymbol: true,
      hoverAnimation: true,
      data: Array(964)
        .fill(1)
        .map(() => ['1', '1', 1]),
      unit: 'kWh'
    }
  ]
}

4. In this option, there are 2 series. When the total length is more then 2963 or more then 2958(change toolbox.show to true), the axisPointer.label will be covered.

Current Behavior

Expected Behavior

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[echarts-bot[bot]]

I'm sorry to close this issue for it lacks the necessary title. Please provide a descriptive and as concise as possible title to describe your problems or requests and then the maintainers or I will reopen this issue.

Every good bug report or feature request starts with a title. Your issue title is a critical element as it's the first thing maintainers see.

A good issue title makes it easier for maintainers to understand what the issue is, easily locate it, and know what steps they'll need to take to fix it.

Moreover, it's better to include keywords, as this makes it easier to find the issue self and similar issues in searches.

[helgasoft]

Cannot reproduce and the meaning of "total length is more then 2963" is not clear. The yAxis green label shows on top as requested.