ECharts热力图技术求助：仅在单元格放大时显示标签

核心思路 #

通过监听ECharts的缩放相关事件，动态切换热力图标签的显示状态——未缩放时隐藏标签，当图表被放大到一定程度（单元格尺寸足够显示标签）时，再开启标签显示。

具体实现代码 #

1. 初始配置（默认隐藏标签） #

初始化热力图时，先将标签设置为隐藏状态：

const myChart = echarts.init(document.getElementById('main'));
const option = {
  // 按需配置xAxis、yAxis、dataZoom等基础组件
  series: [{
    type: 'heatmap',
    data: yourDataset,
    label: {
      show: false // 默认不显示标签
    },
    // 热力图配色、边框等样式配置
  }]
};
myChart.setOption(option);

2. 通过缩放比例控制标签显示 #

监听datazoom事件，根据缩放区间的占比判断是否显示标签：

myChart.on('datazoom', (params) => {
  // 计算当前缩放区间的占比，数值越小表示放大程度越高
  const zoomRange = params.batch[0].end - params.batch[0].start;
  // 自定义阈值，比如缩放占比小于80%时（即放大到一定程度）显示标签
  const showLabel = zoomRange < 80;

  // 动态更新标签显示状态
  myChart.setOption({
    series: [{
      label: {
        show: showLabel
      }
    }]
  });
});

3. 基于单元格实际尺寸的精准控制 #

如果需要更精准的判断（比如根据单元格实际显示宽度），可监听rendered事件，结合DOM元素尺寸判断：

// 添加防抖处理，避免频繁渲染导致性能问题
let updateTimer = null;
myChart.on('rendered', () => {
  clearTimeout(updateTimer);
  updateTimer = setTimeout(() => {
    const cellElements = document.querySelectorAll('.ec-series-heatmap .ec-item');
    if (!cellElements.length) return;

    // 获取第一个单元格的宽度，自定义阈值（比如25px）
    const cellWidth = cellElements[0].offsetWidth;
    const showLabel = cellWidth > 25;

    myChart.setOption({
      series: [{
        label: {
          show: showLabel
        }
      }]
    });
  }, 100); // 防抖延迟可按需调整
});

注意事项 #

• 无论使用slider还是inside类型的dataZoom（鼠标滚轮缩放），datazoom事件都能正常捕捉缩放变化。
• 防抖处理不可省略，否则图表频繁渲染时会触发大量更新，影响性能。
• 缩放占比、单元格尺寸的阈值，需根据你的图表实际大小和业务需求自行调整。

内容的提问来源于stack exchange，提问作者F_V