如何从ECharts中获取已缩放的xAxis标签值？

当使用ECharts的dataZoom组件后，仅通过datazoom事件返回的参数只能拿到缩放的起止坐标/百分比，要获取对应的X轴标签值（比如堆叠面积图示例中的日期），可以通过以下步骤实现：

1. 在datazoom事件回调中，通过图表实例获取X轴的原始数据
2. 根据事件参数中的缩放范围，计算出对应的标签索引，进而提取标签值

以下是具体代码示例：

myChart.on('datazoom', (params) => {
    // 获取X轴的模型实例
    const xAxisModel = myChart.getModel().getComponent('xAxis');
    // 获取X轴的所有标签数据
    const xAxisData = xAxisModel.get('data');
    
    // 根据dataZoom类型处理缩放范围
    let startIndex, endIndex;
    if (params.batch[0].dataZoomId) { // 匹配指定的dataZoom组件（若设置了id）
        // slider类型：start/end为百分比，转换为数据索引
        startIndex = Math.floor((params.batch[0].start / 100) * xAxisData.length);
        endIndex = Math.ceil((params.batch[0].end / 100) * xAxisData.length) - 1;
    } else {
        // inside类型：start/end直接是数据索引
        startIndex = params.start;
        endIndex = params.end;
    }
    
    // 截取缩放范围内的X轴标签
    const zoomedLabels = xAxisData.slice(startIndex, endIndex + 1);
    console.log('缩放范围内的X轴标签：', zoomedLabels);
});

说明 #

• 若你的dataZoom组件设置了id，可以通过params.batch[0].dataZoomId精准匹配，避免多个dataZoom组件时逻辑冲突
• 不同类型的dataZoom返回的范围参数不同：slider类型返回0-100的百分比，需转换为数据索引；inside类型直接返回数据的起始/结束索引
• 通过slice方法截取对应范围的标签数据，即可拿到缩放范围内的X轴标签（如示例中的日期名称）

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