Echarts中endLabel缩放时无法裁剪的解决方案咨询

在使用ECharts折线图时，开启endLabel后，进行y轴方向的dataZoom缩放或移动，会出现endLabel无法随折线图可视区域被裁剪、超出网格显示的问题。以下是两种可行的解决方法：

方法一：监听dataZoom事件动态控制endLabel显示 #

通过监听dataZoom事件，获取当前y轴的可视范围，判断折线最后一个数据点是否在可视范围内，动态切换endLabel的显示状态：

// 初始化图表
const chart = echarts.init(document.getElementById('main'));
chart.setOption(option);

// 监听dataZoom事件
chart.on('dataZoom', () => {
  // 获取当前y轴的可视范围
  const yAxisModel = chart.getModel().getComponent('yAxis', 0);
  const [yMin, yMax] = yAxisModel.axis.scale.getExtent();
  // 获取最后一个数据点的值
  const lastValue = valueList[valueList.length - 1];
  // 判断是否在可视范围内
  const isVisible = lastValue >= yMin && lastValue <= yMax;
  
  // 更新endLabel的显示状态
  chart.setOption({
    series: [{
      endLabel: {
        show: isVisible
      }
    }]
  });
});

方法二：使用自定义label替代原生endLabel #

不使用原生的endLabel，改用series.label并开启裁剪属性，同时控制仅显示最后一个点的标签：

修改series配置如下：

series: [
  {
    type: 'line',
    showSymbol: false,
    data: valueList,
    label: {
      show: true,
      position: 'end',
      clip: true, // 开启标签裁剪
      formatter: (params) => {
        // 仅最后一个点显示标签
        return params.dataIndex === valueList.length - 1 
          ? 'End Label of the serie-line' 
          : '';
      }
    }
  }
]

两种方法对比 #

• 方法一：保留原生endLabel的默认样式和位置逻辑，仅动态控制显示，适配性强。
• 方法二：配置更简洁，利用ECharts原生的label裁剪特性，无需额外事件监听。

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