如何从 ECharts 中获取缩放后的 X 轴标签？

在ECharts中实现图表缩放功能后，获取当前X轴实际展示的标签是很多交互场景下的常见需求，比如需要根据缩放后的标签范围统计对应数据、生成自定义提示信息等。要实现这个功能，核心是利用dataZoom的事件监听和ECharts实例的API方法。

核心实现思路

ECharts的dataZoom组件在触发缩放、拖拽等操作时，会抛出dataZoom事件，我们可以监听这个事件获取当前的缩放范围。之后通过ECharts实例的getModel方法获取当前图表的模型数据，从中提取X轴的坐标轴信息，就能拿到缩放后实际渲染的标签内容。

基础配置示例

首先我们需要先搭建一个带有dataZoom组件的ECharts基础图表，以下是完整的初始化配置代码：

// 初始化ECharts实例
const chartDom = document.getElementById('chart');
const myChart = echarts.init(chartDom);
// 模拟X轴标签数据
const xAxisData = [];
for (let i = 1; i <= 30; i++) {
    xAxisData.push(`2024-03-${i < 10 ? '0' + i : i}`);
}
// 模拟系列数据
const seriesData = xAxisData.map(() => Math.floor(Math.random() * 100));
// 图表配置项
const option = {
    xAxis: {
        type: 'category',
        data: xAxisData,
        axisLabel: {
            rotate: 45
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: seriesData,
            type: 'line'
        }
    ],
    dataZoom: [
        {
            type: 'slider',
            xAxisIndex: 0,
            start: 0,
            end: 100
        },
        {
            type: 'inside',
            xAxisIndex: 0
        }
    ]
};
// 设置配置项
myChart.setOption(option);

监听缩放事件获取标签

接下来我们需要监听dataZoom事件，在事件回调中获取缩放后的X轴标签，具体实现代码如下：

// 监听dataZoom事件
myChart.on('dataZoom', function(params) {
    // 获取当前缩放后的X轴标签
    const zoomedXLabels = getZoomedXAxisLabels(myChart);
    console.log('缩放后的X轴标签：', zoomedXLabels);
});

// 封装获取缩放后X轴标签的方法
function getZoomedXAxisLabels(chartInstance) {
    // 获取图表模型
    const model = chartInstance.getModel();
    // 获取X轴坐标轴组件
    const xAxis = model.getComponent('xAxis', 0);
    // 获取坐标轴的标签数据
    const labels = xAxis.axis.getLabels();
    // 提取标签的文本内容
    const labelTexts = labels.map(item => item.text);
    return labelTexts;
}

注意事项

• 如果X轴配置了axisLabel.formatter格式化函数，那么getLabels返回的内容已经是格式化后的结果，不需要额外再做处理。
• 当同时存在多个X轴时，需要根据实际的xAxisIndex调整getComponent的第二个参数，获取对应索引的X轴实例。
• 如果需要在图表初始化后就获取默认的X轴标签，可以直接调用getZoomedXAxisLabels方法，不需要等待dataZoom事件触发。

常见问题说明

有些开发者可能会尝试通过getCurrentOption方法获取X轴数据，但这种方式拿到的是初始配置的完整X轴数据，不会随缩放操作变化。只有通过getModel获取运行时模型，才能拿到缩放后实际渲染的标签内容。

如果缩放后X轴开启了标签间隔自动隐藏，那么getLabels返回的也只会是实际展示出来的标签，不会包含被隐藏的标签项，符合大部分场景下的使用需求。

ECharts缩放后_X_轴标签dataZoomaxisLabel图表交互修改时间：2026-07-04 10:30:26